feat: 实现完整的 MCP 工具调用管道 - 让 Claude AI 真正调用 MCP 工具 核心功能: - MCP 工具发现: 从 MCP 服务器获取可用工具列表 (SSE 响应解析) - 工具转换器: 将 MCP 工具定义转换为 Claude API tools 格式 - tool_use 处理器: 处理 Claude 返回的工具调用请求 - MCP 调用器: 实际调用 MCP 工具并返回结果 - 多轮对话管理: 自动处理工具调用后的后续对话 测试验证: - ✅ 成功发现 11 个 Novel Translator MCP 工具 - ✅ Claude 智能选择工具并执行翻译任务 - ✅ 自动添加术语表并优化翻译结果 新增文件: - backend/mcp_client.py: MCP 客户端 + SSE 响应解析 - backend/tool_converter.py: MCP → Claude 工具格式转换 - backend/tool_handler.py: tool_use 响应处理器 - backend/conversation_manager.py: 多轮对话管理器 - backend/app.py: Flask 后端集成完整管道 - frontend/index.html: Web 聊天界面 Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering> EOF )
1.7 KiB
1.7 KiB
AI MCP Web UI
通用 MCP (Model Context Protocol) 服务器 Web 界面,允许用户通过聊天界面与 Claude AI 对话,Claude 可以智能调用 MCP 工具。
功能特性
- 🤖 与 Claude AI 进行实时对话
- 🔌 集成 MCP 服务器工具
- 💬 现代化的聊天界面
- 📊 MCP 服务器状态监控
项目结构
/mnt/code/223-240-template-6/
├── backend/ # Python Flask 后端
│ ├── app.py # 主应用
│ ├── config.py # MCP 服务器配置
│ └── requirements.txt
├── frontend/ # 前端界面
│ └── index.html
├── .gitignore
└── README.md
快速开始
1. 安装依赖
# 安装 Python 依赖
pip install -r backend/requirements.txt
2. 配置环境变量
确保设置了以下环境变量:
ANTHROPIC_AUTH_TOKEN: Claude API 密钥ANTHROPIC_BASE_URL: API 基础 URLANTHROPIC_MODEL: 使用的模型名称
3. 启动服务
cd backend
python app.py
服务将在 http://0.0.0.0:5000 启动。
4. 访问界面
打开浏览器访问 http://localhost:5000
MCP 服务器配置
在 backend/config.py 中配置 MCP 服务器:
MCP_SERVERS = {
"server-name": {
"command": "npx",
"args": ["-y", "mcp-server-package"],
"enabled": True
}
}
API 端点
GET /- 前端界面GET /api/health- 健康检查POST /api/chat- 发送消息GET /api/mcp/servers- 获取 MCP 服务器列表GET /api/mcp/tools- 获取可用工具列表
技术栈
- 后端: Flask, Anthropic SDK
- 前端: HTML, Tailwind CSS, Vanilla JavaScript
- 协议: MCP (Model Context Protocol)
许可证
MIT License