vite-plugin-vue-mcp

[![npm 版本][npm-version-src]][npm-version-href] [![npm 下载量][npm-downloads-src]][npm-downloads-href] [![包大小][bundle-src]][bundle-href] [![许可证][license-src]][license-href]

一个 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` 时忽略此选项
   */
  mcpInfo?: {
    /** MCP 版本号 */
    version: string
    /** MCP 描述 */
    description: string
  }

  /**
   * 自定义 MCP 服务器
   */
  mcpServer?: CustomMcpServer

  /** 是否启用默认的 MCP 服务 */
  enabled?: boolean

  /** 默认代理配置 */
  proxy?: {
    /** 要代理的目标 URL 地址 */
    target: string
    /** 是否保留原生响应头 */
    preserveHeaders?: boolean
    /** 是否改变来源头 */
    changeOrigin?: boolean
    /** 网关前缀 */
    prefix?: string
  }

  /** 监听的端口，默认是 `4010` */
  port?: number

  /** 监听的网络接口 */
  interface?: string

  /** 是否允许跨域请求 */
  cors?: boolean | CorsOptions

  /** 请求日志级别 */
  logLevel?: LogLevel
}

功能和工具

组件树

export type ComponentTree = {
  /** 组件 ID */
  id: string
  /** 组件名称 */
  name?: string
  /** 组件类型 */
  type: 'component' | 'container'
  /** 父组件 ID */
  parentId?: string
  /** 子组件列表 */
  children: ComponentTree[]
  /** 组件属性 */
  props: Record<string, any>
  /** 组件状态 */
  state: Record<string, any>
}

组件状态

export type ComponentState = {
  /** 组件 ID */
  id: string
  /** 当前组件的状态 */
  state: Record<string, any>
}

路由

export type RouteInfo = {
  /** 路由路径 */
  path: string
  /** 路由名称 */
  name?: string
  /** 路由参数 */
  params: Record<string, string>
  /** 查询参数 */
  query: Record<string, string>
  /** 请求方法 */
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
}

Pinia 树

export type PiniaTree = {
  /** Pinia ID */
  id: string
  /** Pinia 名称 */
  name?: string
  /** 父 Pinia ID */
  parentId?: string
  /** 子 Pinia 列表 */
  children: PiniaTree[]
  /** Pinia 数据 */
  data: Record<string, any>
}

架构图

下图展示了 vite-plugin-vue-mcp 的整体架构：

功能概述

• 组件树：实时监控和显示 Vue 组件的层次结构。
• 状态跟踪：捕获和展示每个组件的状态数据。
• 路由信息：记录当前活动路由的详细信息，包括路径、参数和查询字符串。
• Pinia 树：可视化 Pinia 的存储结构及其数据。

注意事项

• 确保安装了正确的依赖项。
• 在生产环境中可能需要额外的安全措施。
• 图片链接保持不变，仅翻译文本内容。

致谢

感谢你选择 vite-plugin-vue-mcp，如果你有任何问题或建议，请随时提出。