AI导哈

MCP服务器监控控制面板

一个用于监控和控制Claude Code中Model Context Protocol (MCP)服务器的全栈Web应用程序，提供实时监控、服务器控制、配置管理等功能。

  • by dongkyun-yoo
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 dongkyun-yoo/mcp-dashboard

使用说明

MCP仪表板

用于监视和控制Claude Code使用的模型上下文协议（MCP）服务器的全栈web应用程序。

特性

  • 实时监控：基于WebSocket的实时状态更新
  • 服务器控件：启动、停止和重新启动MCP服务器
  • 配置管理：通过web界面编辑服务器配置
  • 服务器测试：测试MCP服务器连接和功能
  • 模板系统：使用预配置的服务器模板快速设置
  • 状态指示灯：所有服务器的视觉状态指示器

建筑

  • 前端：React+Vite+顺风CSS
  • 后端：Node.js+Express+WebSocket
  • 配置：读/写克劳德代码 .claude.json 配置文件

支持的MCP服务器

仪表板支持在Claude Code中配置的所有MCP服务器，包括：

  • 文件系统 -文件系统访问
  • GitHub -GitHub集成
  • 操纵者 -浏览器自动化
  • npm搜索 -NPM包搜索
  • 记忆 -内存管理
  • 困惑度 -AI搜索
  • 还有更多。..

安装

  1. 克隆存储库：
git clone https://github.com/dongkyun-yoo/mcp-dashboard.git
cd mcp-dashboard
  1. 安装依赖项：
npm run install:all
  1. 设置环境变量：
cp .env.example .env
# Edit .env with your API keys

用法

  1. 启动开发服务器：
npm run dev

  1. 打开浏览器 http://localhost:5173

  2. 仪表板将自动：

    • 阅读您的Claude代码配置
    • 显示所有已配置的MCP服务器
    • 显示实时状态更新
    • 允许您控制服务器

生产部署

  1. 构建前端：
npm run build
  1. 启动生产服务器：
npm start

配置

仪表板读取和写入位于以下位置的Claude Code的配置文件：

  • ~/.claude.json （Linux/Mac）
  • %USERPROFILE%\.claude.json （Windows）

添加新服务器

  1. 使用仪表板中的“添加服务器”按钮
  2. 从可用模板中选择或创建自定义配置
  3. 配置命令、参数和环境变量
  4. 保存配置

服务器模板

仪表板包括常用MCP服务器的模板：

  • 文件系统：文件系统操作
  • GitHub：GitHub API集成
  • 操纵者：浏览器自动化
  • npm搜索：NPM包搜索
  • 记忆：内存管理
  • 困惑度：人工智能搜索

API终点

  • GET /api/config -获取当前MCP配置
  • POST /api/config -更新MCP配置
  • GET /api/servers/:name/status -检查服务器状态
  • POST /api/servers/:name/start -启动服务器
  • POST /api/servers/:name/stop -停止服务器
  • GET /api/servers/:name/test -测试服务器连接

WebSocket事件

  • status_update -实时服务器状态更新

安全

  • 仪表板仅访问Claude Code的配置文件
  • 安全地处理环境变量
  • 没有敏感数据通过web界面暴露

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 提交拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件

相关 MCP