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