MCP Debug Client

MCP Debug Client

一个基于 Vue.js 的调试客户端，用于测试 Model Context Protocol（MCP）服务。

功能

• 设置面板：配置 MCP 服务连接和 Anthropic API 密钥
• 工具发现：查看和测试所有可用的 MCP 工具
• 资源浏览器：浏览和加载 MCP 资源
• 聊天界面：使用 MCP 工具与 Claude 4 聊天
• 开发模式：在服务不可用时使用模拟数据进行测试

设置

快速开始（推荐）

./start.sh

这将：

• 安装所有依赖
• 启动 MCP 网桥服务（端口 3002）
• 启动 Vue.js 客户端（端口 3001）

在浏览器中打开 http://localhost:3001

配置

MCP 服务设置

• 服务命令：通常为 node
• 服务参数：MCP 服务的路径，例如 ../../build/mcp.js
• Anthropic API 密钥：Claude API 密钥（sk-ant-...）
• 环境变量：添加 MCP 服务需要的任何环境变量

开发模式

切换"使用模拟数据"以在不连接实际 MCP 服务的情况下测试界面。这使用与代码图 RAG 服务模式相匹配的预定义模拟响应。

使用

1. 配置设置：输入 MCP 服务详情、Anthropic API 密钥和任何必需的环境变量
2. 连接：点击"连接到 MCP 服务"
3. 探索工具：查看可用工具并使用示例输入进行测试
4. 浏览资源：加载和检查可用资源
5. 与 Claude 聊天：使用聊天界面通过 MCP 工具与 Claude 交互

MCP 服务集成

此客户端设计用于与任何 MCP 服务配合工作。只需提供命令和环境变量来运行它。

架构

该系统包含三个组件：

1. Vue.js 客户端（端口 3001）- 基于浏览器的 UI
2. 网桥服务（端口 3002）- HTTP 至 MCP 协议转换器
3. MCP 服务（你的实际服务）- 代码图 RAG 服务

Browser → HTTP → Bridge Server → stdio → MCP Server

网桥服务之所以必要，是因为：

• MCP 使用 stdio 传输，不适用于浏览器
• 网桥服务将 MCP 服务作为子进程生成
• 它将 HTTP 请求转换为 MCP 协议调用

故障排除

• 网桥服务问题：确保端口 3002 可用
• 连接问题：先尝试开发模式以验证 UI 是否正常工作
• CORS 错误：Anthropic SDK 已配置为通过 dangerouslyAllowBrowser: true 用于浏览器使用
• 服务路径：确保服务参数指向你编译的 MCP 服务文件
• "global is not defined"：通过 Vite 配置定义 global: 'globalThis' 已修复

生产版本构建

npm run build

编译后的文件将位于 dist/ 目录中。