[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-webfansplz--vite-plugin-vue-mcp":3,"tool-webfansplz--vite-plugin-vue-mcp":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",150037,2,"2026-04-10T23:33:47",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":32,"last_commit_at":59,"category_tags":60,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":66,"readme_en":67,"readme_zh":68,"quickstart_zh":69,"use_case_zh":70,"hero_image_url":71,"owner_login":72,"owner_name":73,"owner_avatar_url":74,"owner_bio":75,"owner_company":76,"owner_location":75,"owner_email":75,"owner_twitter":72,"owner_website":77,"owner_url":78,"languages":79,"stars":96,"forks":97,"last_commit_at":98,"license":99,"difficulty_score":32,"env_os":100,"env_gpu":101,"env_ram":100,"env_deps":102,"category_tags":107,"github_topics":75,"view_count":32,"oss_zip_url":75,"oss_zip_packed_at":75,"status":17,"created_at":108,"updated_at":109,"faqs":110,"releases":145},4989,"webfansplz\u002Fvite-plugin-vue-mcp","vite-plugin-vue-mcp","Vite plugin that enables a MCP server helping models to understand your Vue app better.","vite-plugin-vue-mcp 是一款专为 Vue 开发者设计的 Vite 插件，它通过集成模型上下文协议（MCP），在本地开发环境中搭建一座连接 AI 助手与 Vue 应用的桥梁。在传统开发中，AI 往往难以实时感知应用内部复杂的组件结构、状态变化及路由信息，导致辅助编码不够精准。这款插件有效解决了这一痛点，让 AI 能够“看懂”你的项目。\n\n它主要服务于使用 Vue 3、Pinia 和 Vue Router 的前端开发者，特别是那些希望利用 Cursor 等 AI 编辑器提升调试与开发效率的人群。其核心亮点在于提供了一套丰富的工具集：AI 可以直接获取实时的组件树、查看或修改特定组件的状态、高亮显示页面元素，甚至深入洞察 Pinia 全局状态与路由详情。只需简单配置，插件即可自动更新编辑器设置，无需手动干预。值得注意的是，使用前需确保应用在浏览器中正常运行，以便插件捕获实时数据。通过将应用内部状态透明化，vite-plugin-vue-mcp 让 AI 从单纯的代码生成者转变为真正理解业务逻辑的开发伙伴，显著提升了复杂场景下的调试体验。","# vite-plugin-vue-mcp\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![bundle][bundle-src]][bundle-href]\n[![License][license-src]][license-href]\n\nVite plugin that enables a MCP server for your Vue app to provide information about the component tree, state, routes, and pinia tree and state.\n\n## Installation 📦\n\n```bash\npnpm install vite-plugin-vue-mcp -D\n```\n\n## Usage 🔨\n\n```ts\n\u002F\u002F vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n  plugins: [VueMcp()],\n})\n```\n\nThen the MCP server will be available at `http:\u002F\u002Flocalhost:[port]\u002F__mcp\u002Fsse`.\n\nIf you are using Cursor, create a `.cursor\u002Fmcp.json` file in your project root, this plugin will automatically update it for you. For more details about the MCP, check the [official Cursor documentation](https:\u002F\u002Fdocs.cursor.com\u002Fcontext\u002Fmodel-context-protocol).\n\n### Options\n\n```ts\nexport interface VueMcpOptions {\n  \u002F**\n   * The host to listen on, default is `localhost`\n   *\u002F\n  host?: string\n\n  \u002F**\n   * Print the MCP server URL in the console\n   *\n   * @default true\n   *\u002F\n  printUrl?: boolean\n\n  \u002F**\n   * The MCP server info. Ingored when `mcpServer` is provided\n   *\u002F\n  mcpServerInfo?: McpServerInfo\n\n  \u002F**\n   * Custom MCP server, when this is provided, the built-in MCP tools will be ignored\n   *\u002F\n  mcpServer?: (viteServer: ViteDevServer) => Awaitable\u003CMcpServer>\n\n  \u002F**\n   * Setup the MCP server, this is called when the MCP server is created\n   * You may also return a new MCP server to replace the default one\n   *\u002F\n  mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable\u003Cvoid | McpServer>\n\n  \u002F**\n   * The path to the MCP server, default is `\u002F__mcp`\n   *\u002F\n  mcpPath?: string\n\n  \u002F**\n   * Update the address of the MCP server in the cursor config file `.cursor\u002Fmcp.json`,\n   * if `.cursor` folder exists.\n   *\n   * @default true\n   *\u002F\n  updateCursorMcpJson?: boolean | {\n    enabled: boolean\n    \u002F**\n     * The name of the MCP server, default is `vue-mcp`\n     *\u002F\n    serverName?: string\n  }\n\n  \u002F**\n   * append an import to the module id ending with `appendTo` instead of adding a script into body\n   * useful for projects that do not use html file as an entry\n   *\n   * WARNING: only set this if you know exactly what it does.\n   * @default ''\n   *\u002F\n  appendTo?: string | RegExp\n}\n```\n\n## Features\u002FTools ✨\n\n### Get Component Tree\n\n`get-component-tree`: Get the Vue component tree.\n\n![component-tree](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_a1810f2c09b0.gif)\n\n### Get Component State\n\n`get-component-state`: Get the state of a component (input: `componentName`).\n\n![component-state](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_2aa774d0950f.gif)\n\n### Edit Component State\n\n`edit-component-state`: Edit the state of a component (input: `componentName`, `path`, `value`, `valueType`).\n\n![edit-component-state](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_bdb89d6a63bf.gif)\n\n### Highlight Component\n\n`highlight-component`: Highlight a component (input: `componentName`).\n\n![highlight-component](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_4e8255960727.gif)\n\n### Get Routes\n\n`get-router-info`: Get the Vue router info of the application.\n\n![route-tree](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_e47395fa5ef5.gif)\n\n### Get Pinia Tree\n\n`get-pinia-tree`: Get the Pinia tree of the application.\n\n![pinia-tree](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_c69e0afed9ea.gif)\n\n### Get Pinia State\n\n`get-pinia-state`: Get the Pinia state of the application (input: `storeName`).\n\n![pinia-state](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_dab7a22fa0d5.gif)\n\n## Architecture ⚡️\n\n![architecture](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_34f367c9dee6.png)\n\n## Notice 💡\n\n**Please ensure the application is running in your browser before using the features.**\n\n## Credits 💖\n\nThis project is inspired by [vite-plugin-mcp](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fnuxt-mcp\u002Ftree\u002Fmain\u002Fpackages\u002Fvite-plugin-mcp). Thanks to [@antfu](https:\u002F\u002Fgithub.com\u002Fantfu) for the great work.\n\n## License 📖\n\n[MIT](.\u002FLICENSE) License © [Arlo](https:\u002F\u002Fgithub.com\u002Fwebfansplz)\n\n\u003C!-- Badges -->\n\n[npm-version-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669\n[npm-version-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fvite-plugin-vue-mcp\n[npm-downloads-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669\n[npm-downloads-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fvite-plugin-vue-mcp\n[bundle-src]: https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fvite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669&label=minzip\n[bundle-href]: https:\u002F\u002Fbundlephobia.com\u002Fresult?p=vite-plugin-vue-mcp\n[license-src]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fwebfansplz\u002Fvite-plugin-vue-mcp.svg?style=flat&colorA=080f12&colorB=1fa669\n[license-href]: https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fblob\u002Fmain\u002FLICENSE\n","# vite-plugin-vue-mcp\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![bundle][bundle-src]][bundle-href]\n[![License][license-src]][license-href]\n\n一个 Vite 插件，为你的 Vue 应用启用 MCP 服务器，以提供组件树、状态、路由以及 Pinia 树和状态的相关信息。\n\n## 安装 📦\n\n```bash\npnpm install vite-plugin-vue-mcp -D\n```\n\n## 使用 🔨\n\n```ts\n\u002F\u002F vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n  plugins: [VueMcp()],\n})\n```\n\n随后，MCP 服务器将在 `http:\u002F\u002Flocalhost:[port]\u002F__mcp\u002Fsse` 可用。\n\n如果你使用 Cursor，在项目根目录下创建 `.cursor\u002Fmcp.json` 文件，此插件将自动为你更新该文件。有关 MCP 的更多详情，请参阅 [官方 Cursor 文档](https:\u002F\u002Fdocs.cursor.com\u002Fcontext\u002Fmodel-context-protocol)。\n\n### 配置选项\n\n```ts\nexport interface VueMcpOptions {\n  \u002F**\n   * 监听的主机，默认为 `localhost`\n   *\u002F\n  host?: string\n\n  \u002F**\n   * 在控制台打印 MCP 服务器 URL\n   *\n   * @default true\n   *\u002F\n  printUrl?: boolean\n\n  \u002F**\n   * MCP 服务器信息。当提供了 `mcpServer` 时，此配置将被忽略\n   *\u002F\n  mcpServerInfo?: McpServerInfo\n\n  \u002F**\n   * 自定义 MCP 服务器，当提供此选项时，内置的 MCP 工具将被忽略\n   *\u002F\n  mcpServer?: (viteServer: ViteDevServer) => Awaitable\u003CMcpServer>\n\n  \u002F**\n   * 设置 MCP 服务器的回调函数，此函数在 MCP 服务器创建时调用。\n   * 您也可以返回一个新的 MCP 服务器来替换默认的服务器\n   *\u002F\n  mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable\u003Cvoid | McpServer>\n\n  \u002F**\n   * MCP 服务器的路径，默认为 `\u002F__mcp`\n   *\u002F\n  mcpPath?: string\n\n  \u002F**\n   * 更新 Cursor 配置文件 `.cursor\u002Fmcp.json` 中的 MCP 服务器地址，\n   * 如果存在 `.cursor` 文件夹。\n   *\n   * @default true\n   *\u002F\n  updateCursorMcpJson?: boolean | {\n    enabled: boolean\n    \u002F**\n     * MCP 服务器的名称，默认为 `vue-mcp`\n     *\u002F\n    serverName?: string\n  }\n\n  \u002F**\n   * 将导入语句附加到以 `appendTo` 结尾的模块 ID，而不是将脚本添加到页面的 `\u003Cbody>` 中。\n   * 对于不使用 HTML 文件作为入口的项目非常有用。\n   *\n   * 警告：仅在您完全了解其作用时才设置此选项。\n   * @default ''\n   *\u002F\n  appendTo?: string | RegExp\n}\n```\n\n## 功能\u002F工具 ✨\n\n### 获取组件树\n\n`get-component-tree`: 获取 Vue 组件树。\n\n![component-tree](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_a1810f2c09b0.gif)\n\n### 获取组件状态\n\n`get-component-state`: 获取组件的状态（输入：`componentName`）。\n\n![component-state](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_2aa774d0950f.gif)\n\n### 编辑组件状态\n\n`edit-component-state`: 编辑组件的状态（输入：`componentName`, `path`, `value`, `valueType`）。\n\n![edit-component-state](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_bdb89d6a63bf.gif)\n\n### 高亮组件\n\n`highlight-component`: 高亮显示某个组件（输入：`componentName`）。\n\n![highlight-component](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_4e8255960727.gif)\n\n### 获取路由信息\n\n`get-router-info`: 获取应用的 Vue 路由信息。\n\n![route-tree](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_e47395fa5ef5.gif)\n\n### 获取 Pinia 树\n\n`get-pinia-tree`: 获取应用的 Pinia 树。\n\n![pinia-tree](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_c69e0afed9ea.gif)\n\n### 获取 Pinia 状态\n\n`get-pinia-state`: 获取应用的 Pinia 状态（输入：`storeName`）。\n\n![pinia-state](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_dab7a22fa0d5.gif)\n\n## 架构 ⚡️\n\n![architecture](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_readme_34f367c9dee6.png)\n\n## 注意事项 💡\n\n**请确保在使用这些功能之前，应用已在浏览器中运行。**\n\n## 致谢 💖\n\n本项目灵感来源于 [vite-plugin-mcp](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fnuxt-mcp\u002Ftree\u002Fmain\u002Fpackages\u002Fvite-plugin-mcp)。感谢 [@antfu](https:\u002F\u002Fgithub.com\u002Fantfu) 的出色工作。\n\n## 许可证 📖\n\n[MIT](.\u002FLICENSE) 许可证 © [Arlo](https:\u002F\u002Fgithub.com\u002Fwebfansplz)\n\n\u003C!-- 图标 -->\n\n[npm-version-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669\n[npm-version-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fvite-plugin-vue-mcp\n[npm-downloads-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669\n[npm-downloads-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fvite-plugin-vue-mcp\n[bundle-src]: https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fvite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669&label=minzip\n[bundle-href]: https:\u002F\u002Fbundlephobia.com\u002Fresult?p=vite-plugin-vue-mcp\n[license-src]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fwebfansplz\u002Fvite-plugin-vue-mcp.svg?style=flat&colorA=080f12&colorB=1fa669\n[license-href]: https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fblob\u002Fmain\u002FLICENSE","# vite-plugin-vue-mcp 快速上手指南\n\n`vite-plugin-vue-mcp` 是一个 Vite 插件，专为 Vue 应用提供 MCP（Model Context Protocol）服务器支持。它能向 AI 助手（如 Cursor）暴露组件树、状态、路由及 Pinia 状态等上下文信息，极大提升开发体验。\n\n## 环境准备\n\n- **系统要求**：Node.js 18+\n- **前置依赖**：\n  - 基于 Vite 构建的 Vue 项目\n  - 包管理器（推荐 `pnpm`，也可使用 `npm` 或 `yarn`）\n  - 可选：Cursor 编辑器（用于自动配置 MCP 连接）\n\n> 💡 **国内加速建议**：如遇网络问题，可配置淘宝镜像源：\n> ```bash\n> ppm config set registry https:\u002F\u002Fregistry.npmmirror.com\n> ```\n\n## 安装步骤\n\n在项目根目录下执行以下命令安装插件（作为开发依赖）：\n\n```bash\npnpm install vite-plugin-vue-mcp -D\n```\n\n若使用 npm：\n```bash\nnpm install vite-plugin-vue-mcp -D\n```\n\n## 基本使用\n\n### 1. 配置 Vite\n\n修改 `vite.config.ts` 文件，引入并注册插件：\n\n```ts\n\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite'\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n  plugins: [\n    VueMcp(),\n  ],\n})\n```\n\n### 2. 启动服务\n\n运行你的开发服务器：\n\n```bash\npnpm dev\n```\n\n插件启动后，MCP 服务器将默认运行在 `http:\u002F\u002Flocalhost:[port]\u002F__mcp\u002Fsse`。控制台会自动打印该地址（除非配置关闭）。\n\n### 3. 集成 Cursor（可选）\n\n如果你使用 **Cursor** 编辑器，只需在项目根目录创建 `.cursor` 文件夹（插件会自动处理），它会自动生成或更新 `.cursor\u002Fmcp.json` 配置文件，无需手动填写地址。\n\n若需手动配置，请在 `.cursor\u002Fmcp.json` 中添加：\n\n```json\n{\n  \"mcpServers\": {\n    \"vue-mcp\": {\n      \"url\": \"http:\u002F\u002Flocalhost:5173\u002F__mcp\u002Fsse\"\n    }\n  }\n}\n```\n*(请将端口号替换为你实际运行的端口)*\n\n### 4. 开始使用\n\n确保应用在浏览器中正常运行后，即可在 Cursor 的聊天窗口中使用以下功能：\n- 查看组件树 (`get-component-tree`)\n- 获取\u002F修改组件状态 (`get-component-state`, `edit-component-state`)\n- 高亮组件 (`highlight-component`)\n- 查看路由与 Pinia 状态信息等","资深前端开发者正在调试一个包含复杂嵌套组件和多个 Pinia 存储的大型 Vue 电商后台，急需定位深层状态异常。\n\n### 没有 vite-plugin-vue-mcp 时\n- 开发者必须手动在代码中插入大量 `console.log` 或依赖浏览器插件层层点击，才能看清深层组件的实时状态。\n- 修改特定组件的状态以复现边界情况时，需要反复刷新页面并手动操作表单，耗时且难以精确控制数据。\n- 面对庞大的路由表和 Pinia 树，AI 助手因缺乏上下文只能给出通用建议，无法针对当前应用的具体结构进行诊断。\n- 定位渲染问题对应的具体组件如同“大海捞针”，需要在 DOM 树和源代码之间来回切换比对，效率极低。\n\n### 使用 vite-plugin-vue-mcp 后\n- 开发者可直接命令 AI 调用 `get-component-state` 或 `get-pinia-state`，瞬间获取指定组件或存储的完整快照，无需任何手动埋点。\n- 通过 `edit-component-state` 工具，能直接让 AI 将任意组件的状态修改为特定值（如模拟库存为 0），立即验证逻辑分支。\n- AI 借助 `get-router-info` 和 `get-pinia-tree` 全面掌握应用架构，能精准指出路由守卫或状态流转中的具体错误位置。\n- 发送 `highlight-component` 指令后，目标组件在浏览器中直接高亮显示，实现了从代码逻辑到视觉界面的秒级映射。\n\nvite-plugin-vue-mcp 将原本黑盒般的 Vue 应用内部状态转化为 AI 可读写、可感知的透明上下文，使调试从“盲目猜测”进化为“精准操控”。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fwebfansplz_vite-plugin-vue-mcp_bdb89d6a.gif","webfansplz","Arlo","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fwebfansplz_a036ba1b.jpg",null,"@vuejs @vitejs @vueuse","https:\u002F\u002Farlo7.me","https:\u002F\u002Fgithub.com\u002Fwebfansplz",[80,84,88,92],{"name":81,"color":82,"percentage":83},"Vue","#41b883",53.5,{"name":85,"color":86,"percentage":87},"TypeScript","#3178c6",37.1,{"name":89,"color":90,"percentage":91},"JavaScript","#f1e05a",8.7,{"name":93,"color":94,"percentage":95},"HTML","#e34c26",0.7,556,33,"2026-04-04T00:37:38","MIT","未说明","不需要",{"notes":103,"python":101,"dependencies":104},"这是一个 Vite 插件，用于在 Vue 应用中启用 MCP 服务器。主要依赖 Node.js 环境（具体版本未说明，通常需较新版本以支持 Vite）。使用前请确保应用程序已在浏览器中运行。若使用 Cursor 编辑器，插件可自动更新 `.cursor\u002Fmcp.json` 配置文件。",[105,106],"vite","vue",[14,52],"2026-03-27T02:49:30.150509","2026-04-11T18:33:10.371291",[111,116,121,126,131,136,141],{"id":112,"question_zh":113,"answer_zh":114,"source_url":115},22663,"启动时报错 'SyntaxError: Unexpected end of JSON input' 怎么办？","这是因为项目根目录下缺少 `.cursor\u002Fmcp.json` 文件或文件内容为空。解决方法是手动创建 `.cursor\u002Fmcp.json` 文件，并写入初始内容 `{}` 或 `{ \"mcpServers\": {} }`。保存后重新启动开发服务器，插件会自动更新该文件。","https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fissues\u002F1",{"id":117,"question_zh":118,"answer_zh":119,"source_url":120},22664,"如何在 Cursor 编辑器中配置并使用该 MCP 服务？","需要在 Cursor 的配置文件中设置 SSE 服务器地址。参考 Cursor 官方文档配置 MCP Servers (https:\u002F\u002Fdocs.cursor.com\u002Fcontext\u002Fmodel-context-protocol#configuring-mcp-servers)。配置完成后，可在 Cursor 的 MCP 设置界面看到服务。注意：目前测试表明 Claude 3.7 模型支持较好，其他大模型可能兼容性不佳。","https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fissues\u002F2",{"id":122,"question_zh":123,"answer_zh":124,"source_url":125},22665,"在 GitHub Copilot Agent 中使用工具时一直显示“正在运行”且无结果？","该问题通常是因为 Vue DevTools 尚未生效。MCP 服务依赖 Vue DevTools 获取组件树信息，而 Vue DevTools 需要用户先在浏览器中访问并加载项目页面才会激活。请先在浏览器打开项目页面，确保 DevTools 正常工作，然后再尝试在 Copilot 中调用工具。","https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fissues\u002F21",{"id":127,"question_zh":128,"answer_zh":129,"source_url":130},22666,"当 Vite 项目的 base 路径不是 '\u002F' 时，出现资源 404 或 MCP 方法无响应如何解决？","当 `vite.config` 中设置了非根路径的 `base`（例如 `base: '\u002Fmc\u002F'`）时，会导致内部请求资源 404。这是一个已知兼容性问题。临时解决方案可能需要手动修改相关热更新上下文代码（如 `overlay.js` 中的 `createHotContext` 方法）以适配基础路径，或者等待插件后续版本修复对自定义 base 路径的支持。","https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fissues\u002F9",{"id":132,"question_zh":133,"answer_zh":134,"source_url":135},22667,"在配置中指定了自定义端口（port），但 Cursor 连接失败且未监听该端口？","插件目前的端口配置描述不够清晰，实际上自定义 `port` 参数可能不生效或被忽略。服务端口会默认跟随 Vite 开发服务器的端口设置。请移除配置中的 `port` 选项，直接使用 Vite 启动的端口（通常为 5173 或在终端显示的端口）进行连接。","https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fissues\u002F3",{"id":137,"question_zh":138,"answer_zh":139,"source_url":140},22668,"访问 `__mcp\u002Fsse` 端点跳转到项目 404 页面或无法被 LLM 调用？","这通常是因为 Vite 的 `vite:html` 插件在 MCP 插件之前运行，接管了所有路由导致 MCP 端点被拦截。解决方法是调整插件注册顺序，确保 `vite-plugin-vue-mcp` 在 `vite:html` 之前执行。可以通过编写脚本遍历插件数组，将 MCP 插件实例移动到 HTML 插件之前来解决。","https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-mcp\u002Fissues\u002F25",{"id":142,"question_zh":143,"answer_zh":144,"source_url":115},22669,"Playground 示例运行后访问 get-component-tree 报错 'Request timed out'？","请确认是否已正确创建并初始化 `.cursor\u002Fmcp.json` 文件（内容至少为 `{}`）。此外，确保已在 Cursor 编辑器中正确配置了 SSE 服务器地址，并且浏览器中已经打开了项目页面以激活 Vue DevTools。如果使用的是非 Claude 3.7 模型，也可能因模型兼容性导致超时。",[]]