MCP服务器管理工具

MCP游乐场

基于web的UI，用于连接、管理和交互 模型上下文协议（MCP） 服务器。它允许您添加服务器（通过stdio或HTTP），浏览它们的工具、资源和提示，以及调用工具——所有这些都可以从浏览器界面完成。

⭐ 如果你觉得这个项目有用，请考虑 给它一颗星 --它帮助别人发现它！

为什么？

调试MCP服务器通常需要将它们连接到LLM，这需要令牌和金钱。MCP Playground允许您直接调用工具、读取资源和检查提示——不需要LLM。

特性

• 🔌 通过以下方式连接到MCP服务器 标准 （子流程）或 超文本传输协议 （SSE/流式HTTP）
• 🛠️ 浏览并拨打电话 工具 由任何连接的服务器暴露
• 📄 阅读 资源 并检索 提示
• 💾 在中持久化服务器配置 mcp-servers.json
• 🗑️ 从UI添加、编辑和删除服务器
• 🗂️ Stdio服务器进程在以下隔离的每服务器目录中运行 .mcp-data/ （忽略）
• ⚡ 热重载开发环境（服务器+客户端并发运行）

技术栈

建筑

flowchart TD
    subgraph Browser["Browser (localhost:5173)"]
        UI["React UI"]
    end

    subgraph Server["Node.js Server (localhost:8000)"]
        Hono["Hono HTTP API\n/api/servers/*"]
        McpManager["McpManager\n(singleton)"]
        Config["mcp-servers.json\n(persistence)"]
        Hono --> McpManager
        McpManager --> Config
    end

    subgraph MCPServers["MCP Servers"]
        Stdio["Stdio Server\n(subprocess)"]
        HTTP["HTTP Server\n(SSE / Streamable-HTTP)"]
    end

    UI -- "REST /api" --> Hono
    McpManager -- "spawn + stdin/stdout" --> Stdio
    McpManager -- "HTTP transport" --> HTTP

入门指南

先决条件

• Node.js 20+
• npm

安装

npm install
npm --prefix client install

运行（dev）

npm run dev

• API服务器 → http://localhost:8000
• 用户界面 → http://localhost:5173

运行（生产）

npm run build
npm start

Hono服务器将从以下位置为构建的客户端提供服务 http://localhost:8000.

配置

服务器连接被持久化 mcp-servers.json 在项目的根。您还可以通过UI或RESTneneneba API实时管理它们。

Stdio服务器示例：

{
  "mcpServers": {
    "my-server": {
      "command": "node",
      "args": ["path/to/server.js"],
      "env": {}
    }
  }
}

HTTP服务器示例：

{
  "mcpServers": {
    "my-http-server": {
      "url": "http://localhost:3000/mcp",
      "transport": "sse"
    }
  }
}

注： mcp-servers.json 是gitignore，因此您的本地服务器配置永远不会被提交。复制 mcp-servers.example.json 作为起点：

复制

cp mcp-servers.example.json mcp-servers.json

注： 每个stdio服务器进程都在其工作目录设置为的情况下运行 .mcp-data/<server-id>/。此文件夹是自动创建的，并被gitignored忽略，因此MCP服务器创建的任何文件（例如浏览器配置文件、缓存）都不在存储库中。

API 参考

贡献

欢迎发布问题和PR！请随时打开问题以报告错误或建议功能，或提交包含更改的拉取请求。