使用说明
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 - 无烟煤API密钥：您的Claude API密钥（sk-ant--…）
- 环境变量：添加MCP服务器所需的任何环境变量
开发模式
切换“使用模拟数据”以测试接口，而无需连接到实际的MCP服务器。这使用与代码图RAG服务器的模式匹配的预定义模拟响应。
用法
- 配置设置：输入MCP服务器详细信息、Anthropic API密钥和任何所需的环境变量
- 连接：单击“连接到MCP服务器”
- 探索工具：查看可用工具并使用示例输入进行测试
- 浏览资源：加载并检查可用资源
- 与Claude聊天：使用聊天界面使用MCP工具与Claude进行交互
MCP服务器集成
此客户端旨在与任何MCP服务器配合使用。您只需提供命令和env变量即可运行它。
建筑
该系统由三个部分组成：
- Vue.js客户端 （端口3001）-基于浏览器的用户界面
- 网桥服务器 （端口3002）-HTTP到MCP协议转换器
- MCP服务器 （您的实际服务器）-代码图RAG服务器
Browser → HTTP → Bridge Server → stdio → MCP Server
网桥服务器是必要的，因为：
- MCP使用在浏览器中不起作用的stdio传输
- 网桥服务器将您的MCP服务器作为子进程生成
- 它将HTTP请求转换为MCP协议调用
故障排除
- 网桥服务器问题：确保端口3002可用
- 连接问题：首先尝试开发模式以验证UI是否正常工作
- CORS错误：Anthropic SDK配置为浏览器使用
dangerouslyAllowBrowser: true - 服务器路径：确保服务器参数指向您构建的MCP服务器文件
- “全局未定义”：已通过Vite配置定义修复
global: 'globalThis'
为生产而建
npm run build
构建的文件将位于 dist/ 目录。
