Q MCP Manager

亚马逊Q-MCP经理仪表板

一个现代化的、响应式的基于web的仪表板，用于管理macOS上的Amazon Q MCP（模型上下文协议）服务器。此仪表板允许您轻松查看、启用和禁用在您的 ~/.aws/amazonq/mcp.json 文件。

特性

• 🎛️ 仪表板概述：一目了然地查看所有已配置的MCP服务器
• 🟢 状态指示灯：绿灯/红灯显示启用/禁用状态
• ⚡ 快捷操作：一次启用/禁用单个服务器或所有服务器
• 📊 统计：显示服务器总数、启用和禁用的实时统计数据
• 🔄 自动同步：自动读取和写入MCP配置文件
• 📱 响应式设计：适用于台式机、平板电脑和移动设备
• 🎨 现代用户界面：简洁直观的界面，动画流畅
• 🔒 安全操作：在进行更改之前创建备份
• ⌨️ 键盘快捷键：通过键盘快捷键快速访问

截图

浅色模式

简洁、现代的界面，采用glassmorphism设计和直观的控制：

Dashboard Light Mode

深色模式

光滑的深色主题，增强了视觉对比和现代美学：

Dashboard Dark Mode

仪表板演练

根据上面的截图，您可以在仪表板上找到以下内容：

🎛️ 标题和控件

• 仪表板标题：“MCP经理仪表板”，字体优雅
• 主题切换：右上角的太阳/月亮图标可在亮模式和暗模式之间切换
• “刷新”按钮：从MCP文件重新加载服务器配置
• 服务器统计信息：实时计数显示“总数：4，启用：2，禁用：2”

📊 服务器管理网格

每个服务器都显示为一张单独的卡，其中包含：

• 服务器名称：标签清晰（例如，“文件系统”、“勇敢搜索”、“mcp服务器git”、“postgres”）
• 服务器类型徽章：显示类型的视觉指示器（Docker、Python、Node.js等）
• 状态指示：带动画脉冲的绿点（启用）或红点（禁用）
• 命令预览：显示将要执行的实际命令
• 启用/禁用切换：控制每个服务器的单独按钮
• 服务器详细信息：环境变量、参数和配置信息

⚡ 批量操作面板

• “全部启用”按钮：一键激活所有MCP服务器
• “全部禁用”按钮：同时停用所有服务器
• 操作反馈：Toast通知确认操作成功

📈 实时活动时间表

• 活动日志：显示带有时间戳的最近操作
• 操作类型：服务器启用/禁用、配置刷新等。
• 时间戳：每次操作的精确计时（例如，“下午3:28:45”）
• 操作成功：已完成操作的视觉确认

🎨 视觉设计元素

• 玻璃形态卡：带有背景模糊效果的半透明卡片
• 渐变背景：美丽的蓝色到紫色渐变背景
• 平滑动画：交互式元素上的悬停效果和过渡
• 排版层次结构：具有不同字体粗细的清晰信息层次结构
• 颜色编码状态：服务器状态直观的绿色/红色系统
• 响应布局：适应不同屏幕尺寸的网格系统

🔧 实际使用案例

仪表板使您能够：

1. 快速服务器概述：一目了然地查看所有MCP服务器及其状态
2. 单独控制：根据需要启用或禁用特定服务器
3. 批量管理：打开/关闭所有服务器进行测试或维护
4. 配置监控：跟踪更改并验证服务器状态
5. 活动跟踪：回顾所做的更改以及更改的时间
6. 主题首选项：选择您喜欢的视觉模式以获得舒适感

先决条件

• 安装了Amazon Q CLI的macOS
• Node.js（版本14或更高）
• MCP配置文件位于 ~/.aws/amazonq/mcp.json

安装

1. 克隆存储库:

   git clone https://github.com/YOUR_USERNAME/q-mcp-manager.git
   cd q-mcp-manager

1. 安装依赖项:

   npm install

1. 验证您的MCP配置是否存在:

   ls -la ~/.aws/amazonq/mcp.json

用法

🚀 快速入门（最简单）

./start.sh start --background

确保start.sh和server.sh脚本具有可执行权限（chmod+x）

✅ 服务器启动+仪表板打开+终端免费！

🎛️ 替代方法

选项1：直接服务器脚本

./scripts/server.sh start --background

选项2:NPM命令

npm start

选项3：开发模式

npm run dev

停止： 单击仪表板标题中的红色“关机”按钮。

📱 为仪表板添加书签

http://localhost:3000  # Default port
http://localhost:8080  # Custom port example

______________________________________________________________________

统一服务器控制

所有服务器操作都使用单个脚本： ./scripts/server.sh

🔧 基本命令

• ./scripts/server.sh start [options] -启动服务器（自动打开浏览器）
• ./scripts/server.sh stop [options] -优雅地停止服务器
• ./scripts/server.sh restart [options] -重新启动服务器
• ./scripts/server.sh status [options] -检查服务器状态和运行状况
• ./scripts/server.sh logs [--follow] -查看服务器日志
• ./scripts/server.sh help -显示所有可用命令

🌐 端口定制（新增！）

在任何端口上运行仪表板以避免冲突或匹配您的偏好：

默认端口（3000）：

./scripts/server.sh start --background

自定义端口选项：

# Using --port flag
./scripts/server.sh start --port 8080 --background
./scripts/server.sh start -p 5000 --background --no-open

# Using --port= syntax  
./scripts/server.sh start --port=4000 --background

# All commands support custom ports
./scripts/server.sh status --port 8080
./scripts/server.sh stop --port 8080

端口验证：

• ✅ 端口1-65535有效
• ⚠️ 1024以下的端口显示特权警告
• ❌ 无效端口被拒绝，并显示明确的错误消息
• 🔍 自动端口冲突检测

常见用例：

• 多个实例：在不同端口上为不同项目运行仪表板
• 避免冲突：占用3000时使用备用端口
• 公司网络：使用非标准端口以避免防火墙限制
• 环境匹配：符合现有的开发港口惯例

环境变量支持：

# Direct Node.js execution with custom port
PORT=8080 node src/backend/server.js

# NPM script with custom port
PORT=8080 npm start

🌐 自动打开功能：启动服务器时，仪表板会自动在浏览器中打开（使用 --no-open 禁用）

📖 有关服务器管理的详细说明，请参阅 docs/SERVER_GUIDE.md

管理MCP服务器

仪表板运行后：

• 查看所有已配置的服务器及其当前状态
• 单击单个服务器卡上的启用/禁用按钮
• 对批量操作使用“全部启用”或“全部禁用”
• 单击“刷新”从磁盘重新加载配置

键盘快捷键

• Ctrl/Cmd + R：刷新服务器
• Ctrl/Cmd + E：启用所有服务器
• Ctrl/Cmd + D：禁用所有服务器

API终点

后端服务器提供以下REST API端点：

• GET /api/mcp-config：读取当前MCP配置
• POST /api/mcp-config：更新MCP配置
• POST /api/validate-config：保存前验证配置
• GET /api/health：检查服务器运行状况

文件结构

q-mcp-manager/
├── src/
│   ├── backend/
│   │   └── server.js              # Express.js server
│   ├── frontend/
│   │   ├── dashboard/             # Main dashboard
│   │   │   ├── index.html
│   │   │   ├── script.js
│   │   │   └── styles.css
│   │   └── home/                  # Home launcher
│   │       ├── index.html
│   │       ├── script.js
│   │       └── styles.css
│   └── assets/                    # Static assets & screenshots
│       ├── launcher.html
│       ├── start.html
│       ├── Screenshot_1.png       # Light mode dashboard
│       └── Screenshot_2.png       # Dark mode dashboard
├── scripts/
│   └── server.sh                  # Main server control script
├── docs/
│   ├── QUICK_START.md             # Quick start guide
│   └── SERVER_GUIDE.md            # Detailed server guide
├── logs/                          # Server logs (auto-generated)
├── start.sh                       # Convenience startup script
├── package.json                   # Node.js dependencies
├── CONTRIBUTING.md                # Development guidelines
├── LICENSE                        # MIT License
├── README.md                      # This file
└── .gitignore                     # Git ignore rules

配置文件格式

仪表板使用标准的Amazon Q MCP配置格式：

{
  "mcpServers": {
    "server-name": {
      "command": "docker",
      "args": ["run", "--rm", "--interactive", "image:latest"],
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}

安全功能

• 自动备份：在进行更改之前创建带时间戳的备份
• 配置验证：保存前验证JSON结构
• 错误处理：通过用户友好的消息进行全面的错误处理
• 实时状态：显示连接状态和加载状态

故障排除

服务器无法启动

• 请确保已安装Node.js： node --version
• 检查端口3000是否可用： lsof -i :3000
• 安装依赖项： npm install

无法读取MCP配置

• 验证文件是否存在： ls -la ~/.aws/amazonq/mcp.json
• 检查文件权限： chmod 644 ~/.aws/amazonq/mcp.json
• 验证JSON语法： cat ~/.aws/amazonq/mcp.json | jq .

更改未生效

• 点击“刷新”按钮从磁盘重新加载
• 检查浏览器控制台是否有错误消息
• 验证后端服务器是否正在运行

发展

要贡献或修改仪表板，请执行以下操作：

1. 前端更改：编辑 index.html, styles.css，或 script.js
2. 后端更改：编辑 server.js
3. 使用开发模式: npm run dev 用于自动重新加载

安全说明

• 仪表板在您的计算机上本地运行
• 只能通过本地主机访问（不暴露于互联网）
• 在进行任何更改之前创建备份
• 在应用之前验证所有配置更改

许可证

MIT许可证-可以根据需要自由修改和分发。

支持

如果您遇到任何问题：

1. 检查浏览器控制台是否有错误消息
2. 验证您的MCP配置文件是有效的JSON
3. 确保后端服务器在端口3000上运行
4. 检查MCP配置文件的文件权限