MCP Setting

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

这将：

1. 启动本地web服务器（默认端口：4000）
2. 自动打开默认浏览器
3. 加载您当前的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

配置文件位置

该工具按以下顺序自动检测配置文件并确定其优先级：

1. 项目范围： .mcp.json
2. 光标范围： .cursor/mcp.json
3. VS代码范围： .vscode/mcp.json （项目）或 ~/.vscode/mcp.json （用户）
4. 用户范围： ~/.claude.json
5. 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服务器

添加服务器

1. 点击“添加服务器”按钮
2. 输入服务器详细信息：

- 服务器名称（唯一标识符） - 命令（例如。， npx) - 论点（例如。， -y, @modelcontextprotocol/server-filesystem) - 环境变量（可选）

1. 点击“保存”

预设置的使用

1. 点击“从预设添加”
2. 搜索或浏览可用的预设
3. 点击所需预设的“添加”
4. 根据需要自定义配置
5. 点击“保存”

预置模式

• 文件系统MCP：访问本地文件和目录
• Git MCP：Git存储库操作
• GitHub MCP：GitHub API集成
• 勇敢搜索MCP：Web搜索功能
• PostgreSQL MCP：PostgreSQL数据库操作
• SQLite MCP：SQLite数据库操作
• 木偶MCP：浏览器自动化
• 松弛MCP：Slack工作空间集成

编辑服务器

1. 点击服务器卡上的“编辑”
2. 修改配置
3. 点击“保存”

删除服务器

1. 点击服务器卡上的“删除”
2. 确认删除

启用/禁用服务器

单击服务器名称旁边的复选框以切换启用/禁用状态。

发展

设置

# 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