MCP仪表板
一个GUI仪表板，用于通过用户友好的web界面管理Claude Code和Claude Desktop MCP（模型上下文协议）设置。
特性
- Claude代码支持：完全支持Claude Code的MCP配置（.MCP.json、~/.Claude.json）
- VS代码MCP支持：配置VS代码MCP设置（.vcode/MCP.json、~/.vcode/mbp.json）
- 多范围配置：管理项目级、用户级和Claude Desktop配置
- 易于配置：通过直观的基于web的GUI管理MCP服务器
- 预设支持：使用预配置的MCP服务器模板快速设置
- 实时编辑：添加、编辑、删除和启用/禁用MCP服务器
- 验证：内置验证以确保配置正确性
- 自动备份：保存更改前自动备份
- 交叉平台的：适用于macOS、Windows和Linux
安装
npx mcp-dashboard或全局安装：
npm install -g mcp-dashboard
mcp-dashboard用法
基本用法
只需运行命令即可启动工具：
npx mcp-dashboard这将：
- 启动本地web服务器（默认端口：4000）
- 自动打开默认浏览器
- 加载您当前的MCP配置
命令行选项
mcp-dashboard [options]
Options:
-p, --port
Port number (default: 4000)
--no-open Do not open browser automatically
-h, --help Display help
-V, --version Display version配置文件位置
该工具按以下顺序自动检测配置文件并确定其优先级：
- 项目范围：
.mcp.json - 光标范围：
.cursor/mcp.json - VS代码范围：
.vscode/mcp.json（项目）或~/.vscode/mcp.json（用户） - 用户范围：
~/.claude.json - Claude Desktop范围：特定于平台的遗留路径
克劳德代码（推荐）
项目范围 (.mcp.json 在项目目录中）：
- 从当前目录向上搜索到主目录
- 非常适合团队共享、版本控制的配置
- 优先： 最高
用户范围 (~/.claude.json):
- 所有平台：
~/.claude.json在主目录中 - 所有项目共享的个人设置
- 可能包含其他克劳德代码设置（主题、项目等）
- 优先： 中等
VS代码MCP
项目范围 (.vscode/mcp.json 在项目目录中）：
- 从当前目录向上搜索到主目录
- 适用于VS Code MCP集成
- 优先： 高
用户范围 (~/.vscode/mcp.json):
- 存储在
.vscode在主目录中 - 可用于跨项目共享VS代码MCP设置
- 优先： 中高
Claude Desktop（传统支持）
Claude桌面配置:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - 视窗:
%APPDATA%/Claude/claude_desktop_config.json - Linux:
~/.config/Claude/claude_desktop_config.json - 优先： 最低 （向后兼容性）
该工具在标题中显示活动配置文件及其范围（项目/用户/Claude Desktop）。
管理MCP服务器
添加服务器
- 点击“添加服务器”按钮
- 输入服务器详细信息：
- 服务器名称（唯一标识符） - 命令（例如。， npx) - 论点（例如。， -y, @modelcontextprotocol/server-filesystem) - 环境变量（可选）
- 点击“保存”
预设置的使用
- 点击“从预设添加”
- 搜索或浏览可用的预设
- 点击所需预设的“添加”
- 根据需要自定义配置
- 点击“保存”
预置模式
- 文件系统MCP：访问本地文件和目录
- Git MCP：Git存储库操作
- GitHub MCP：GitHub API集成
- 勇敢搜索MCP：Web搜索功能
- PostgreSQL MCP：PostgreSQL数据库操作
- SQLite MCP：SQLite数据库操作
- 木偶MCP：浏览器自动化
- 松弛MCP：Slack工作空间集成
编辑服务器
- 点击服务器卡上的“编辑”
- 修改配置
- 点击“保存”
删除服务器
- 点击服务器卡上的“删除”
- 确认删除
启用/禁用服务器
单击服务器名称旁边的复选框以切换启用/禁用状态。
发展
设置
# Clone the repository
git clone https://github.com/ogison/mcp-dashboard.git
cd mcp-dashboard
# Install dependencies
npm install
# Build the project
npm run build发展模式
# Run both server and client in watch mode
npm run dev
# Or run them separately
npm run dev:server # Backend
npm run dev:client # Frontend项目结构
mcp-dashboard/
├── bin/
│ └── cli.js # CLI entry point
├── src/
│ ├── server/ # Backend (Express)
│ │ ├── index.ts
│ │ ├── routes/
│ │ ├── services/
│ │ ├── utils/
│ │ └── types/
│ ├── client/ # Frontend (React + Vite)
│ │ ├── src/
│ │ │ ├── components/
│ │ │ ├── hooks/
│ │ │ ├── services/
│ │ │ ├── types/
│ │ │ └── App.tsx
│ │ └── index.html
│ └── presets/
│ └── mcpServers.json # Preset definitions
└── dist/ # Build output技术栈
后端：
- Node.js+TypeScript
- 快速
- CORS，身体分析器
前端：
- 反应18
- 维特
- 尾风CSS
- React钩子形式
- Zod（验证）
CLI：
- 指挥官（CLI框架）
- 粉笔（彩色输出）
- 打开（浏览器启动器）
安全
- 仅限本地主机：Web服务器仅绑定到本地主机
- 输入验证：严格验证所有用户输入
- 路径安全：防止路径遍历攻击
- 自动备份：更改前已备份配置
故障排除
端口已在使用中
如果端口4000已在使用中：
mcp-dashboard -p 62000浏览器无法打开
如果浏览器没有自动打开：
mcp-dashboard --no-open然后手动打开： http://localhost:4000
未找到配置
如果未检测到配置文件，请确保安装了Claude Code，并且至少运行了一次以创建配置文件。
许可证
麻省理工学院
贡献
欢迎投稿！请随时提交拉取请求。
支持
有关问题和功能请求，请访问： https://github.com/ogison/mcp-dashboard/issues