vite-plugin-vue-mcp
vite-plugin-vue-mcp 是一款专为 Vue 开发者设计的 Vite 插件，它通过集成模型上下文协议（MCP），在本地开发环境中搭建一座连接 AI 助手与 Vue 应用的桥梁。在传统开发中，AI 往往难以实时感知应用内部复杂的组件结构、状态变化及路由信息，导致辅助编码不够精准。这款插件有效解决了这一痛点，让 AI 能够“看懂”你的项目。
它主要服务于使用 Vue 3、Pinia 和 Vue Router 的前端开发者，特别是那些希望利用 Cursor 等 AI 编辑器提升调试与开发效率的人群。其核心亮点在于提供了一套丰富的工具集：AI 可以直接获取实时的组件树、查看或修改特定组件的状态、高亮显示页面元素，甚至深入洞察 Pinia 全局状态与路由详情。只需简单配置，插件即可自动更新编辑器设置，无需手动干预。值得注意的是，使用前需确保应用在浏览器中正常运行，以便插件捕获实时数据。通过将应用内部状态透明化，vite-plugin-vue-mcp 让 AI 从单纯的代码生成者转变为真正理解业务逻辑的开发伙伴，显著提升了复杂场景下的调试体验。
使用场景
资深前端开发者正在调试一个包含复杂嵌套组件和多个 Pinia 存储的大型 Vue 电商后台，急需定位深层状态异常。
没有 vite-plugin-vue-mcp 时
- 开发者必须手动在代码中插入大量
console.log或依赖浏览器插件层层点击，才能看清深层组件的实时状态。 - 修改特定组件的状态以复现边界情况时，需要反复刷新页面并手动操作表单，耗时且难以精确控制数据。
- 面对庞大的路由表和 Pinia 树，AI 助手因缺乏上下文只能给出通用建议，无法针对当前应用的具体结构进行诊断。
- 定位渲染问题对应的具体组件如同“大海捞针”，需要在 DOM 树和源代码之间来回切换比对，效率极低。
使用 vite-plugin-vue-mcp 后
- 开发者可直接命令 AI 调用
get-component-state或get-pinia-state，瞬间获取指定组件或存储的完整快照，无需任何手动埋点。 - 通过
edit-component-state工具，能直接让 AI 将任意组件的状态修改为特定值（如模拟库存为 0），立即验证逻辑分支。 - AI 借助
get-router-info和get-pinia-tree全面掌握应用架构，能精准指出路由守卫或状态流转中的具体错误位置。 - 发送
highlight-component指令后，目标组件在浏览器中直接高亮显示，实现了从代码逻辑到视觉界面的秒级映射。
vite-plugin-vue-mcp 将原本黑盒般的 Vue 应用内部状态转化为 AI 可读写、可感知的透明上下文，使调试从“盲目猜测”进化为“精准操控”。
运行环境要求
- 未说明
不需要
未说明
快速开始
vite-plugin-vue-mcp
一个 Vite 插件，为你的 Vue 应用启用 MCP 服务器，以提供组件树、状态、路由以及 Pinia 树和状态的相关信息。
安装 📦
pnpm install vite-plugin-vue-mcp -D
使用 🔨
// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'
export default defineConfig({
plugins: [VueMcp()],
})
随后，MCP 服务器将在 http://localhost:[port]/__mcp/sse 可用。
如果你使用 Cursor，在项目根目录下创建 .cursor/mcp.json 文件，此插件将自动为你更新该文件。有关 MCP 的更多详情，请参阅 官方 Cursor 文档。
配置选项
export interface VueMcpOptions {
/**
* 监听的主机，默认为 `localhost`
*/
host?: string
/**
* 在控制台打印 MCP 服务器 URL
*
* @default true
*/
printUrl?: boolean
/**
* MCP 服务器信息。当提供了 `mcpServer` 时，此配置将被忽略
*/
mcpServerInfo?: McpServerInfo
/**
* 自定义 MCP 服务器，当提供此选项时，内置的 MCP 工具将被忽略
*/
mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>
/**
* 设置 MCP 服务器的回调函数，此函数在 MCP 服务器创建时调用。
* 您也可以返回一个新的 MCP 服务器来替换默认的服务器
*/
mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>
/**
* MCP 服务器的路径，默认为 `/__mcp`
*/
mcpPath?: string
/**
* 更新 Cursor 配置文件 `.cursor/mcp.json` 中的 MCP 服务器地址，
* 如果存在 `.cursor` 文件夹。
*
* @default true
*/
updateCursorMcpJson?: boolean | {
enabled: boolean
/**
* MCP 服务器的名称，默认为 `vue-mcp`
*/
serverName?: string
}
/**
* 将导入语句附加到以 `appendTo` 结尾的模块 ID，而不是将脚本添加到页面的 `<body>` 中。
* 对于不使用 HTML 文件作为入口的项目非常有用。
*
* 警告：仅在您完全了解其作用时才设置此选项。
* @default ''
*/
appendTo?: string | RegExp
}
功能/工具 ✨
获取组件树
get-component-tree: 获取 Vue 组件树。
获取组件状态
get-component-state: 获取组件的状态（输入：componentName）。
编辑组件状态
edit-component-state: 编辑组件的状态（输入：componentName, path, value, valueType）。
高亮组件
highlight-component: 高亮显示某个组件（输入：componentName）。
获取路由信息
get-router-info: 获取应用的 Vue 路由信息。
获取 Pinia 树
get-pinia-tree: 获取应用的 Pinia 树。
获取 Pinia 状态
get-pinia-state: 获取应用的 Pinia 状态（输入：storeName）。
架构 ⚡️
注意事项 💡
请确保在使用这些功能之前，应用已在浏览器中运行。
致谢 💖
本项目灵感来源于 vite-plugin-mcp。感谢 @antfu 的出色工作。
许可证 📖
常见问题
相似工具推荐
openclaw
OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。 这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。 OpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。
gemini-cli
gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。 这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。 它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。
markitdown
MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。 在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。 这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器