# 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. 安装依赖

```bash
# 安装 Python 依赖
pip install -r backend/requirements.txt
```

### 2. 配置环境变量

确保设置了以下环境变量：
- `ANTHROPIC_AUTH_TOKEN`: Claude API 密钥
- `ANTHROPIC_BASE_URL`: API 基础 URL
- `ANTHROPIC_MODEL`: 使用的模型名称

### 3. 启动服务

```bash
cd backend
python app.py
```

服务将在 `http://0.0.0.0:5000` 启动。

### 4. 访问界面

打开浏览器访问 `http://localhost:5000`

## MCP 服务器配置

在 `backend/config.py` 中配置 MCP 服务器：

```python
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