Vite Plugin Vue MCP

🚀 vite-plugin-vue-mcp

一个 Vite 插件，启用 Vue 应用的 MCP 服务器，提供组件树、状态、路由和 Pinia 树及状态的信息。

🚀 快速开始

本插件可让你在 Vue 应用中启用 MCP 服务器，获取组件树、状态、路由和 Pinia 树及状态的信息。以下为你介绍安装和使用方法。

📦 安装指南

使用以下命令安装本插件：

pnpm install vite-plugin-vue-mcp -D

💻 使用示例

基础用法

在 vite.config.ts 中引入并使用该插件：

// 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，如果你有任何问题或建议，请随时提出。