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 配置文件 `.cursor/mcp.json` 中 MCP 服务器的地址。
   *
   * @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 的出色工作。

许可证 📖

MIT 许可证 © Arlo

<!-- Badges -->