Files
ai-mcp-web-ui/README.md
yourname bda56c8aa6 $(cat <<'EOF'
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
)
2026-03-16 13:30:33 +00:00

1.7 KiB
Raw Permalink Blame History

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 基础 URL
  • ANTHROPIC_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