# mcp-connection-toolkit

**Repository Path**: blues_c/mcp-connection-toolkit

## Basic Information

- **Project Name**: mcp-connection-toolkit
- **Description**: 一个基于Flask的Web应用，用于测试和管理MCP（Model Context Protocol）服务器连接。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-17
- **Last Updated**: 2026-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MCP连接测试工具

一个基于Flask的Web应用，用于测试和管理MCP（Model Context Protocol）服务器连接。

## 项目预览

![MCP连接测试工具主界面](images/screenshot.png)

*主界面展示了服务器配置、连接测试和结果展示功能*

## 功能特性

### 🔌 连接测试
- 支持测试多个MCP服务器的连接状态
- 实时显示连接结果和可用工具列表
- 异步处理，支持并发测试
- 详细的错误信息和诊断

### 🛠️ 配置管理
- 直观的Web界面管理服务器配置
- 支持添加、编辑、删除服务器配置
- 导入/导出标准MCP配置文件
- 配置验证和错误提示

### 📊 结果分析
- 详细的测试结果展示
- 支持搜索、筛选和排序
- 测试历史记录和统计信息
- 结果导出为JSON格式

### 🎨 用户界面
- 响应式设计，支持移动设备
- Bootstrap 5 现代化界面
- 实时状态更新和进度提示
- 直观的图标和状态指示器

## 快速开始

### 1. 创建并激活虚拟环境（推荐）

**Windows:**
```cmd
cd mcp-connection-toolkit
python -m venv venv
venv\Scripts\activate
```

**Linux/Mac:**
```bash
cd mcp-connection-toolkit
python3 -m venv venv
source venv/bin/activate
```

### 2. 安装依赖

```bash
pip install -r requirements.txt
```

### 3. 启动应用


```bash
python app.py
```

### 4. 访问应用

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

### 5. 退出虚拟环境

使用完毕后，可以退出虚拟环境：
```bash
deactivate
```

## 项目结构

```
mcp-connection-toolkit/
├── app.py                 # Flask主应用
├── run.py                 # 启动脚本
├── test_mcp.py           # 原始MCP测试脚本
├── requirements.txt       # 依赖包列表
├── routes/               # 路由模块
│   ├── __init__.py
│   ├── api.py           # API路由
│   └── web.py           # Web页面路由
├── services/            # 业务逻辑
│   ├── __init__.py
│   └── mcp_service.py   # MCP连接服务
├── templates/           # HTML模板
│   ├── base.html        # 基础模板
│   ├── index.html       # 首页
│   ├── config.html      # 配置页面
│   └── results.html     # 结果页面
└── static/              # 静态资源
    ├── css/
    │   └── style.css    # 自定义样式
    └── js/
        ├── app.js       # 通用JavaScript
        ├── index.js     # 首页功能
        ├── config.js    # 配置页面功能
        └── results.js   # 结果页面功能
```

## API接口

### 服务器管理
- `GET /api/servers` - 获取服务器列表
- `POST /api/servers` - 添加服务器配置
- `PUT /api/servers/<id>` - 更新服务器配置
- `DELETE /api/servers/<id>` - 删除服务器配置

### 连接测试
- `POST /api/test/<server_id>` - 测试单个服务器
- `POST /api/test/all` - 测试所有服务器

### 结果管理
- `GET /api/results` - 获取测试结果
- `GET /api/results/export` - 导出测试结果
- `POST /api/results/clear` - 清除测试结果

## 配置文件格式

支持标准MCP配置文件格式：

```json
{
  "mcpServers": {
    "server-name": {
      "command": "npx",
      "args": ["-y", "@package/name@version"],
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}
```

## 默认服务器

应用预配置了以下MCP服务器：

1. **Sequential Thinking**
   - 命令: `npx -y @iflow-mcp/server-sequential-thinking@0.6.2`
   - 描述: 顺序思维MCP服务器

2. **Mobile MCP**
   - 命令: `npx -y @mobilenext/mobile-mcp@latest`
   - 描述: 移动开发MCP服务器

## 使用说明

### 添加服务器
1. 在首页左侧填写服务器信息
2. 输入服务器名称、命令和参数
3. 可选填写描述信息
4. 点击"添加服务器"按钮

### 测试连接
1. 点击单个服务器的"测试"按钮测试单个服务器
2. 点击"测试所有服务器"按钮测试所有配置的服务器
3. 查看实时状态更新和测试结果

### 管理配置
1. 访问配置页面查看所有服务器配置
2. 导出配置文件用于备份或分享
3. 导入现有的MCP配置文件
4. 删除不需要的服务器配置

### 查看结果
1. 访问结果页面查看详细测试历史
2. 使用搜索和筛选功能查找特定结果
3. 导出测试结果进行分析
4. 清除旧的测试记录

## 技术栈

- **后端**: Flask 3.0, Python 3.8+
- **前端**: Bootstrap 5, Vanilla JavaScript
- **MCP**: mcp 1.0.0 Python库
- **异步**: asyncio for concurrent testing

## 开发说明

### 添加新功能
1. 在`services/mcp_service.py`中添加业务逻辑
2. 在`routes/api.py`中添加API端点
3. 在相应的JavaScript文件中添加前端功能
4. 更新HTML模板添加UI元素

### 自定义样式
- 修改`static/css/style.css`添加自定义样式
- 使用Bootstrap 5的工具类进行快速样式调整

### 错误处理
- 所有API调用都包含错误处理
- 前端显示用户友好的错误消息
- 后端记录详细的错误日志

## 故障排除

### 常见问题

1. **MCP服务器连接失败**
   - 检查Node.js和npm是否正确安装
   - 确认MCP包是否可以正常安装
   - 检查网络连接和防火墙设置

2. **应用启动失败**
   - 确认Python版本 >= 3.8
   - 检查所有依赖是否正确安装
   - 查看控制台错误信息

3. **前端功能异常**
   - 检查浏览器控制台错误
   - 确认API服务正常运行
   - 清除浏览器缓存

### 日志查看
应用会在控制台输出详细的日志信息，包括：
- API请求和响应
- MCP连接状态
- 错误信息和堆栈跟踪

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个工具！