Vue MCP Vite 插件使用说明

项目简介

'Vue MCP Vite 插件' 是一个 Vite 插件，旨在为 Vue.js 开发的应用快速集成 MCP (Model Context Protocol) 服务器功能。通过该插件，Vue 应用可以轻松地向支持 MCP 协议的客户端（如 Cursor 编辑器）提供关于组件树、组件状态、Vue Router 路由信息以及 Pinia 状态管理的数据。这使得 LLM 能够理解和操作 Vue 应用的上下文信息，从而实现更智能化的代码编辑和辅助功能。

主要功能点

组件树信息: 提供当前 Vue 应用的组件层级结构，以树状 markdown 文本格式呈现。
组件状态信息: 获取指定 Vue 组件的当前状态数据，以 JSON 格式返回。
编辑组件状态: 允许客户端修改 Vue 组件的状态数据，实时更新应用行为。
高亮组件: 支持在应用界面中高亮指定的 Vue 组件，方便开发者定位。
路由信息: 提供 Vue Router 的路由配置信息，以 JSON 格式返回。
Pinia 状态树: 提供 Pinia 状态管理的 Store 树状结构信息，以 JSON 格式返回。
Pinia 状态信息: 获取指定 Pinia Store 的状态数据，以 JSON 格式返回。
Cursor 集成: 自动更新 '.cursor/mcp.json' 配置文件，简化 Cursor 编辑器的 MCP 服务器配置。

安装步骤

安装插件 在你的 Vue 项目中，使用包管理器安装 'vite-plugin-vue-mcp'：

pnpm install vite-plugin-vue-mcp -D

或者

npm install vite-plugin-vue-mcp -D

或者

yarn add vite-plugin-vue-mcp -D

配置 Vite 打开你的 'vite.config.ts' 或 'vite.config.js' 文件，引入并注册 'VueMcp' 插件：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VueMcp } from 'vite-plugin-vue-mcp'

export default defineConfig({
  plugins: [
    vue(),
    VueMcp(), // 注册 VueMcp 插件
  ],
})

启动开发服务器 使用 Vite 启动你的 Vue 应用开发服务器：
```
pnpm dev
```
或者
```
npm run dev
```
或者
```
yarn dev
```
启动成功后，在控制台会输出 MCP 服务器的 SSE 地址，例如：'MCP: Server is running at http://localhost:5173/__mcp/sse' (端口号可能根据你的配置有所不同)。

服务器配置 (MCP 客户端)

对于 MCP 客户端（例如 Cursor 编辑器），你需要配置以下信息以连接到 'Vue MCP Vite 插件' 提供的 MCP 服务器。

{
  "mcpServers": {
    "vue-mcp": { // 服务器名称，可以自定义
      "name": "vue-mcp", // 服务器名称，必须与外层 key 一致
      "command": "pnpm", // 启动命令，这里假设你使用 pnpm，如果使用 npm 或 yarn 请替换为相应的命令
      "args": ["dev"],  // 启动参数，这里假设你的启动命令是 'pnpm dev'
      "url": "http://localhost:5173/__mcp/sse" // MCP 服务器地址，启动 Vite 开发服务器后，控制台会输出
      // "url": "http://localhost:[Vite 端口号]/__mcp/sse" // 或者你可以使用占位符 [Vite 端口号]，实际端口号会根据 Vite 启动的端口自动替换
    }
  }
}

配置参数说明:

'server name': MCP 服务器的名称，用于在客户端中标识和选择。例如 "vue-mcp"。
'command': 启动 Vue 应用开发服务器的命令。通常是 'pnpm dev'，'npm run dev' 或 'yarn dev'。
'args': 启动命令的参数，通常是 'dev'，与 'command' 组合成完整的启动命令。
'url': MCP 服务器的 SSE 地址。重要: 这个地址会在 Vite 开发服务器启动时在控制台输出。请将控制台输出的地址复制到这里。如果你的 Vite 端口不是默认的 '5173'，请相应修改端口号。或者，部分 MCP 客户端可能支持使用占位符 '[Vite 端口号]' 自动替换实际端口。

Cursor 编辑器配置: 如果你使用 Cursor 编辑器，'Vue MCP Vite 插件' 默认会在项目根目录下的 '.cursor/mcp.json' 文件中自动更新 MCP 服务器的 URL。你只需要确保你的项目根目录下存在 '.cursor' 文件夹即可。插件会自动创建或更新 'mcp.json' 文件。

基本使用方法

确保 Vue 应用的开发服务器已经启动，并且 MCP 服务器地址已正确配置到 MCP 客户端。
在 MCP 客户端中连接到名为 "vue-mcp" (或你在配置中设置的 'server name') 的 MCP 服务器。
客户端可以通过 MCP 协议请求服务器提供的工具 (Tools) 获取 Vue 应用的上下文信息，例如：
- 请求 'get-component-tree' 工具获取组件树。
- 请求 'get-component-state' 工具并提供 'componentName' 参数获取指定组件的状态。
- 请求 'get-router-info' 工具获取路由信息。
- 请求 'get-pinia-tree' 和 'get-pinia-state' 工具获取 Pinia 状态管理相关信息。
根据 MCP 客户端的功能，利用这些上下文信息进行代码编辑、调试或智能辅助等操作。

注意:

请确保在浏览器中运行你的 Vue 应用，插件的功能依赖于 Vue Devtools 的信息采集。
插件提供的工具主要用于开发和调试阶段，不建议在生产环境中使用。

关键词