# 🚀 MCP Server Manager > 🔧 一个强大的 Model Context Protocol (MCP) 服务管理平台 [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/) [![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/) [![Express.js](https://img.shields.io/badge/Express.js-404D59?style=for-the-badge)](https://expressjs.com/) ## 📖 项目简介 MCP Server Manager 是一个现代化的 Web 应用程序，专为管理多个 MCP (Model Context Protocol) 服务器而设计。它提供了直观的用户界面来创建、配置和监控 MCP 服务器，以及管理相关的工具、提示和认证令牌。 ### 🎯 核心功能 - 🖥️ **服务器管理** - 创建、启动、停止和监控 MCP 服务器 - 🔧 **工具管理** - 动态创建和部署 JavaScript 函数作为 MCP 工具 - 📝 **提示管理** - 管理参数化的提示模板 - 🔑 **令牌管理** - 为每个服务器生成和管理访问令牌 - 📡 **实时监控** - 通过 SSE 实时查看服务器状态 - 💾 **数据持久化** - 基于 SQLite 的可靠数据存储 - 📋 **配置复制** - 一键复制 MCP 服务器配置到剪贴板 ![image](https://github.com/user-attachments/assets/59149086-0525-443c-b3ca-baee0207ca86) ![image](https://github.com/user-attachments/assets/7236bb8f-0a26-4e4e-b166-099ee75a75d2) ![image](https://github.com/user-attachments/assets/b19269ed-956c-4521-a460-86114f8bb680) ![image](https://github.com/user-attachments/assets/c2bb19de-1dd9-4aac-aa56-651906cc2b7d) ![image](https://github.com/user-attachments/assets/47b51f5f-fb1a-4175-a991-9a8fdec56fdf) ## 🎮 使用指南 ### 📊 服务器管理 1. **创建服务器** - 点击"创建服务器"按钮 - 填写服务器名称、描述和端口 - 选择要关联的工具和提示 2. **启动服务器** - 在服务器列表中点击"启动"按钮 - 实时查看服务器状态变化 3. **监控服务器** - 查看服务器运行状态 - 监控连接数和请求统计 ### 🔧 工具管理 1. **创建工具** - 编写 JavaScript 函数代码 - 定义工具的 JSON Schema - 测试工具功能 2. **部署工具** - 将工具关联到指定服务器 - 自动注册到 MCP 服务器实例 ### 📝 提示管理 1. **创建提示** - 编写提示模板 - 定义参数列表 - 预览提示效果 2. **使用提示** - 将提示关联到服务器 - 通过 MCP 协议访问 ### 🔑 令牌管理 1. **生成令牌** - 为指定服务器生成访问令牌 - 设置令牌名称和描述 2. **管理令牌** - 查看所有令牌 - 撤销不需要的令牌 ### 📋 配置复制 1. **复制配置** - 在服务器列表中找到要复制配置的服务器 - 点击橙色的"复制配置"按钮 📋 - 选择复制内容： - **确定** = 复制完整配置说明（包含代理脚本和使用指南） - **取消** = 仅复制 Claude Desktop 配置 JSON 2. **使用配置** - 将配置粘贴到 Claude Desktop 配置文件中 - 确保 MCP 服务器正在运行 - 重启 Claude Desktop 应用 - 服务器提供的工具和提示将在对话中可用 ## 📁 项目结构 ``` mcp-server-manage/ ├── 📦 packages/ │ ├── 🔧 backend/ # Node.js 后端 │ │ ├── 📁 src/ │ │ │ ├── 📊 models/ # 数据模型 │ │ │ ├── 🔧 services/ # 业务服务 │ │ │ ├── 🚀 mcp/ # MCP 服务器管理 │ │ │ ├── 🛣️ routes/ # API 路由 │ │ │ ├── 🛡️ middleware/ # 中间件 │ │ │ └── 🏠 index.ts # 应用入口 │ │ └── 📦 package.json │ └── 🎨 frontend/ # React 前端 │ ├── 📁 src/ │ │ ├── 🧩 components/ # UI 组件 │ │ ├── 📄 pages/ # 页面组件 │ │ ├── 🔗 services/ # API 服务 │ │ ├── 📘 types/ # 类型定义 │ │ └── 🏠 main.tsx # 应用入口 │ └── 📦 package.json ├── 📦 package.json # 根配置 ├── 🚫 .gitignore # Git 忽略规则 └── 📖 README.md # 项目文档 ``` ## 🔗 API 接口 ### 📊 服务器 API | 方法 | 路径 | 描述 | |------|------|------| | `GET` | `/api/servers` | 📋 获取所有服务器 | | `POST` | `/api/servers` | ➕ 创建新服务器 | | `GET` | `/api/servers/:id` | 📄 获取指定服务器 | | `PUT` | `/api/servers/:id` | ✏️ 更新服务器 | | `DELETE` | `/api/servers/:id` | ❌ 删除服务器 | | `POST` | `/api/servers/:id/start` | ▶️ 启动服务器 | | `POST` | `/api/servers/:id/stop` | ⏹️ 停止服务器 | | `GET` | `/api/servers/:id/status` | 📈 获取服务器状态 | | `GET` | `/api/servers/:id/mcp-config` | 🆕 获取服务器 MCP 配置 | ### 🔧 工具 API | 方法 | 路径 | 描述 | |------|------|------| | `GET` | `/api/tools` | 📋 获取所有工具 | | `POST` | `/api/tools` | ➕ 创建新工具 | | `GET` | `/api/tools/:id` | 📄 获取指定工具 | | `PUT` | `/api/tools/:id` | ✏️ 更新工具 | | `DELETE` | `/api/tools/:id` | ❌ 删除工具 | ### 📝 提示 API | 方法 | 路径 | 描述 | |------|------|------| | `GET` | `/api/prompts` | 📋 获取所有提示 | | `POST` | `/api/prompts` | ➕ 创建新提示 | | `GET` | `/api/prompts/:id` | 📄 获取指定提示 | | `PUT` | `/api/prompts/:id` | ✏️ 更新提示 | | `DELETE` | `/api/prompts/:id` | ❌ 删除提示 | ### 🔑 令牌 API | 方法 | 路径 | 描述 | |------|------|------| | `GET` | `/api/tokens` | 📋 获取所有令牌 | | `POST` | `/api/tokens` | ➕ 创建新令牌 | | `DELETE` | `/api/tokens/:id` | ❌ 删除令牌 | ## 🛠️ 开发指南 ### 🔧 开发环境设置 1. **安装依赖** ```bash npm run install:all ``` 2. **启动开发模式** ```bash npm run dev ``` 3. **运行测试** ```bash npm run test ``` 4. **代码检查** ```bash npm run lint ``` ### 📦 构建生产版本 ```bash # 构建后端 cd packages/backend npm run build # 构建前端 cd packages/frontend npm run build ``` ### 🐛 调试技巧 - 🔍 使用浏览器开发者工具调试前端 - 📊 查看后端日志：`packages/backend/logs/` - 🗃️ 数据库文件位置：`packages/backend/database.db` ## 🤝 贡献指南 我们欢迎所有形式的贡献！🎉 1. **🍴 Fork 项目** 2. **🌿 创建特性分支** (`git checkout -b feature/AmazingFeature`) 3. **💾 提交更改** (`git commit -m 'Add some AmazingFeature'`) 4. **📤 推送分支** (`git push origin feature/AmazingFeature`) 5. **🔄 创建 Pull Request** ### 📋 开发规范 - 📘 使用 TypeScript 编写代码 - 🧪 为新功能编写测试 - 📝 保持代码注释清晰 - 🎨 遵循现有的代码风格 ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。 ## 🙏 致谢 - 🔗 [Model Context Protocol](https://modelcontextprotocol.io/) - 官方协议规范 - ⚛️ [React](https://reactjs.org/) - 用户界面库 - 🎨 [Ant Design](https://ant.design/) - UI 组件库 - 🟢 [Node.js](https://nodejs.org/) - JavaScript 运行时 ## 📞 联系我们 - 📧 **邮箱**: [your-email@example.com] - 🐛 **问题反馈**: [GitHub Issues](https://github.com/your-username/mcp-server-manage/issues) - 💬 **讨论**: [GitHub Discussions](https://github.com/your-username/mcp-server-manage/discussions) --- ⭐ 如果这个项目对你有帮助，请给我们一个 Star！ ## 新功能: MCP 配置复制 现在您可以轻松复制 MCP 服务器的配置，用于 Claude Desktop 或其他 MCP 客户端： ### ✨ 重要特性 我们的 MCP 服务器支持 **SSE (Server-Sent Events)** 传输协议，Claude Desktop **原生支持**此协议，无需额外的代理脚本或工具。 ### 使用方法 1. 在服务器列表中，找到您要复制配置的服务器 2. 点击橙色的"复制配置"按钮 📋 3. 根据服务器状态选择复制内容： - **有认证Token时**：选择带认证配置（推荐）或基础配置 - **无认证Token时**：选择完整说明或仅JSON配置 ### 配置格式 #### 1. 基础SSE配置 ```json { "mcpServers": { "your-server": { "url": "http://localhost:3001/sse" } } } ``` #### 2. 带认证的配置（推荐） ```json { "mcpServers": { "your-server": { "url": "http://localhost:3001/sse", "headers": { "Authorization": "Bearer your-token-here" } } } } ``` ### 🔧 工作原理 - **直接连接**：Claude Desktop 直接连接到服务器的 SSE 端点 - **实时通信**：通过 SSE 协议进行实时双向通信 - **标准协议**：完全符合 MCP (Model Context Protocol) 标准 - **无需代理**：不需要任何中间脚本或工具 ### Claude Desktop 集成步骤 1. 复制配置后，打开 Claude Desktop 配置文件： - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` 2. 将复制的配置粘贴到文件中 3. 确保服务器正在运行（在我们的管理界面中启动） 4. 重启 Claude Desktop 应用 5. 在聊天界面左下角应该会出现 🔨 图标，表示工具可用 ### 🔍 故障排除 #### 连接问题 - 检查服务器状态：确保在管理界面中显示为"运行中" - 测试SSE端点：`curl http://localhost:端口/sse` - 查看健康检查：`curl http://localhost:端口/health` #### Claude Desktop 日志 - **macOS**: `~/Library/Logs/Claude/mcp*.log` - **Windows**: `%APPDATA%\Claude\logs\mcp*.log` #### 常见解决方案 1. 确保JSON配置格式正确（可使用在线JSON验证器） 2. 重启Claude Desktop后稍等片刻让连接建立 3. 检查防火墙是否阻止了本地端口访问 4. 确认服务器端口与配置中的端口一致 ### 🚀 优势 - **🔌 即插即用**：无需安装额外依赖 - **🔒 安全认证**：支持Bearer Token认证 - **⚡ 高性能**：直接SSE连接，低延迟 - **📱 跨平台**：支持所有Claude Desktop支持的平台 - **🛠️ 易维护**：标准协议，便于调试和监控