vite插件Vue MCP

Name: vite插件Vue MCP
Author: webfansplz

作者：webfansplz526 星标更新：2025-04-20

安装使用来源：spider==github.com

项目介绍

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:[端口]/__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: VViteDevServer) => Awaitable<void | McpServer>

  /**
   * MCP 服务器路径，默认是 `/__mcp`
   */
  mcpPath?: string

  /**
   * 更新 MCP 服务器地址到 cursor 配置文件 `.cursor/mcp.json` 中，
   * 如果存在 `.cursor` 文件夹。
   *
   * @default true
   */
  updateCursorMcpJson?: boolean | {
    enabled: boolean
    /**
     * MCP 服务器名称，默认是 `vue-mcp`
     */
    serverName?: string
  }

  /**
   * 将导入附加到以 `appendTo` 结尾的模块 ID，而不是将脚本添加到 body 中
   * 对于不使用 HTML 文件作为入口点的项目很有用
   *
   * 警告：仅在你知道确切作用时设置。
   * @default ''
   */
  appendTo?: string | RegExp
}