Manage

🔧 一个强大的 Model Context Protocol (MCP) 服务管理平台

TypeScript React Node.js Express.js

📖 项目简介

MCP Server Manager 是一个现代化的 Web 应用程序，专为管理多个 MCP (Model Context Protocol) 服务器而设计。它提供了直观的用户界面来创建、配置和监控 MCP 服务器，以及管理相关的工具、提示和认证令牌。

🎯 核心功能

• 🖥️ 服务器管理 - 创建、启动、停止和监控 MCP 服务器
• 🔧 工具管理 - 动态创建和部署 JavaScript 函数作为 MCP 工具
• 📝 提示管理 - 管理参数化的提示模板
• 🔑 令牌管理 - 为每个服务器生成和管理访问令牌
• 📡 实时监控 - 通过 SSE 实时查看服务器状态
• 💾 数据持久化 - 基于 SQLite 的可靠数据存储
• 📋 配置复制 - 一键复制 MCP 服务器配置到剪贴板

🎮 使用指南

📊 服务器管理

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

   npm run install:all
   

2. 启动开发模式

   npm run dev
   

3. 运行测试

   npm run test
   

4. 代码检查

   npm run lint
   

📦 构建生产版本

# 构建后端
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 文件了解详情。

🙏 致谢

• 🔗 Model Context Protocol - 官方协议规范
• ⚛️ React - 用户界面库
• 🎨 Ant Design - UI 组件库
• 🟢 Node.js - JavaScript 运行时

📞 联系我们

• 📧 邮箱: [[email protected]]
• 🐛 问题反馈: GitHub Issues
• 💬 讨论: GitHub Discussions

---

⭐ 如果这个项目对你有帮助，请给我们一个 Star！

新功能: MCP 配置复制

现在您可以轻松复制 MCP 服务器的配置，用于 Claude Desktop 或其他 MCP 客户端：

✨ 重要特性

我们的 MCP 服务器支持 SSE (Server-Sent Events) 传输协议，Claude Desktop 原生支持此协议，无需额外的代理脚本或工具。

使用方法

1. 在服务器列表中，找到您要复制配置的服务器
2. 点击橙色的"复制配置"按钮 📋
3. 根据服务器状态选择复制内容：
   • 有认证Token时：选择带认证配置（推荐）或基础配置
   • 无认证Token时：选择完整说明或仅JSON配置

配置格式

1. 基础SSE配置

{
  "mcpServers": {
    "your-server": {
      "url": "http://localhost:3001/sse"
    }
  }
}

2. 带认证的配置（推荐）

{
  "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支持的平台
• 🛠️ 易维护：标准协议，便于调试和监控