vue-mcp-next

Vue MCP 新实现方案设计文档

项目概述

本文档提出了一种全新的 Vue MCP (Model Context Protocol) 实现方案，旨在为 Vue.js 应用提供运行时状态操作和控制能力。该方案专注于实时操作正在运行的 Vue 应用，支持测试、调试、演示等场景，采用分层架构设计，支持多平台构建工具集成，完全符合 MCP 官方协议规范。

参考实现分析

vite-plugin-vue-mcp 架构特点

参考的 vite-plugin-vue-mcp 实现采用以下正确架构：

1. 技术栈：

   • 打包系统作为载体
   • Vue DevTools Kit 作为数据操作工具
   • WebSocket 用于 打包工具-浏览器双向通信
   • StreamableHTTP + SSE 用于标准 MCP 协议通信
   • @modelcontextprotocol/sdk 作为 MCP 协议实现

2. 提供功能：

   • 组件树查看 (get-component-tree)
   • 组件状态获取/编辑 (get-component-state, edit-component-state)
   • 组件高亮显示 (highlight-component)
   • 路由信息获取 (get-router-info)
   • Pinia状态管理 (get-pinia-tree, get-pinia-state)

优秀的设计亮点

1. 标准 MCP 协议：使用官方 SDK 的 StreamableHTTPServerTransport
2. 高效通信机制：WebSocket 连接
3. 现代 DevTools 集成：使用 @vue/devtools-kit

新实现方案设计

核心设计理念

1. 运行时操作为中心：专注于操作正在运行的 Vue 应用，而非代码分析
2. 分层架构：Core 层专注 MCP 协议，Plugin 层适配不同构建工具
3. 多平台支持：支持 Vite、Webpack、Farm 等多种构建工具
4. 标准协议遵循：完全符合 MCP 官方 SDK 规范
5. 测试和调试友好：为手动测试、调试、演示提供强大支持

分层架构设计

┌─────────────────────────────────────────────────────────────────────────────┐
│                        MCP 客户端 (Cursor, Claude)                          │
│                              运行时操作控制                                    │
└─────────────────────────┬───────────────────────────────────────────────────┘
                          │ StreamableHTTP + SSE (标准 MCP 协议)
┌─────────────────────────▼───────────────────────────────────────────────────┐
│                            Core 层 - 运行时操作引擎                           │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────────────────┐  │
│  │   MCP 服务器     │  │   状态操作工具   │  │      交互控制工具            │  │
│  │                │  │                │  │                           │  │
│  │ • 协议处理      │  │ • get-tree     │  │ • highlight-component     │  │
│  │ • HTTP 服务     │  │ • get-state    │  │ • navigate-to            │  │
│  │ • 会话管理      │  │ • edit-state   │  │ • call-method            │  │
│  │ • 工具注册      │  │ • get-router   │  │ • trigger-event          │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────────────────┘  │
│                                    │                                       │
│                            VueAppBridge (抽象接口)                         │
└─────────────────────────────────────┼───────────────────────────────────────┘
                                     │
┌─────────────────────────────────────▼───────────────────────────────────────┐
│                            Plugin 层 (平台适配)                             │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────────────────┐  │
│  │  Vite 适配器     │  │ Webpack 适配器   │  │      Farm 适配器            │  │
│  │                │  │                │  │                           │  │
│  │ • WebSocket    │  │ • WebSocket     │  │ • WebSocket            │  │
│  │ • 插件钩子      │  │ • webpack 钩子   │  │ • farm 钩子               │  │
│  │ • 脚本注入      │  │ • 脚本注入       │  │ • 脚本注入                 │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────────────────┘  │
└─────────────────────────┬───────────────────────────────────────────────────┘
                          │ 各平台特定的通信协议
┌─────────────────────────▼───────────────────────────────────────────────────┐
│                             浏览器客户端层                                    │
│  ┌─────────────────────────────────────────────────────────────────────────┐ │
│  │                       Vue DevTools Kit 集成                            │ │
│  │                                                                        │ │
│  │  • devtools.api.getInspectorTree()     - 获取组件树                     │ │
│  │  • devtools.ctx.api.editInspectorState() - 修改组件状态                 │ │
│  │  • devtools.ctx.hooks.callHook()        - 触发事件钩子                  │ │
│  └─────────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────┬───────────────────────────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────────────────────────┐
│                          运行中的 Vue 应用实例                                │
│                    (实时状态、组件树、路由、Store)                            │
└─────────────────────────────────────────────────────────────────────────────┘

🎯 核心特性

• ✅ 标准 MCP 协议：完全基于官方 SDK 实现
• ✅ 分层架构设计：Core 层专注协议，Plugin 层适配平台
• ✅ 多平台支持：Vite、Webpack、Farm 等构建工具
• ✅ 运行时操作：实时查看和修改 Vue 应用状态

💡 使用场景

• 实时调试：在 Cursor 中查看和修改组件状态
• 状态验证：验证组件和应用状态是否符合预期
• 交互测试：通过 AI 指令模拟用户交互和状态变化
• 演示和教学：展示 Vue 应用的内部状态和组件结构
• 开发辅助：快速查看路由信息、Pinia store 状态等

通过这种设计，Vue MCP 不仅是一个开发工具，更是连接 AI 与 Vue 生态系统的桥梁，为现代 Vue 开发提供了前所未有的智能化体验。