blank

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