MCP调试客户端

基于Vue.js的调试客户端，用于测试模型上下文协议（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）- 基于浏览器的用户界面
2. 桥接服务器（端口3002）- HTTP到MCP协议转换器
3. MCP服务器（你的实际服务器）- 代码图RAG服务器

浏览器 → HTTP → 桥接服务器 → 标准输入输出 → MCP服务器

桥接服务器是必要的，因为：

• MCP使用标准输入输出传输方式，这在浏览器中不起作用
• 桥接服务器作为子进程启动你的MCP服务器
• 它将HTTP请求转换为MCP协议调用

故障排除

• 桥接服务器问题：确保端口3302可用
• 连接问题：首先尝试开发模式以验证UI是否正常工作
• CORS错误：Anthropic SDK已配置为浏览器使用，设置dangerouslyAllowBrowser: true
• 服务器路径：确保服务器参数指向你的构建好的MCP服务器文件
• "global未定义"：通过Vite配置定义global: 'globalThis'解决

为生产构建

npm run build

构建好的文件将在dist/目录下。