Vue MCP Server

快速插件视图MCP

](https://npmjs.com/package/vite-plugin-vue-mcp) ](https://npmjs.com/package/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 {
  /**
   * The host to listen on, default is `localhost`
   */
  host?: string

  /**
   * Print the MCP server URL in the console
   *
   * @default true
   */
  printUrl?: boolean

  /**
   * The MCP server info. Ingored when `mcpServer` is provided
   */
  mcpServerInfo?: McpServerInfo

  /**
   * Custom MCP server, when this is provided, the built-in MCP tools will be ignored
   */
  mcpServer?: (viteServer: ViteDevServer) => Awaitable

  /**
   * Setup the MCP server, this is called when the MCP server is created
   * You may also return a new MCP server to replace the default one
   */
  mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable

  /**
   * The path to the MCP server, default is `/__mcp`
   */
  mcpPath?: string

  /**
   * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,
   * if `.cursor` folder exists.
   *
   * @default true
   */
  updateCursorMcpJson?: boolean | {
    enabled: boolean
    /**
     * The name of the MCP server, default is `vue-mcp`
     */
    serverName?: string
  }

  /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
   * useful for projects that do not use html file as an entry
   *
   * WARNING: only set this if you know exactly what it does.
   * @default ''
   */
  appendTo?: string | RegExp
}

功能/工具✨

获取组件树

get-component-tree：获取Vue组件树。

component-tree

获取组件状态

get-component-state：获取组件的状态（输入： componentName).

component-state

编辑组件状态

edit-component-state：编辑组件的状态（输入： componentName, path, value, valueType).

edit-component-state

突出显示组件

highlight-component：突出显示一个组件（输入： componentName).

highlight-component

获取路线

get-router-info：获取应用程序的Vue路由器信息。

route-tree

获取Pinia树

get-pinia-tree：获取应用程序的Pinia树。

pinia-tree

获取皮尼亚州

get-pinia-state：获取应用程序的Pinia状态（输入： storeName).

pinia-state

建筑⚡️

architecture

通知💡

在使用这些功能之前，请确保应用程序正在浏览器中运行。

鸣谢💖

许可证📖