AI导哈

MCP服务器测试工具

MCP Playground是一个开源的基于Web的工具，用于测试和检查MCP服务器，提供交互式环境来探索工具、资源和提示，便于调试和开发MCP集成。

  • by emergent-lab
  • TypeScript
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 emergent-lab/mcp-playground

使用说明

MCP游乐场

基于Web的开源MCP服务器测试与检测工具

什么是MCP游乐场？

MCP游乐场是一个 基于网络的 用于检查和测试模型上下文协议（MCP）服务器的开发工具。它为探索MCP服务器公开的工具、资源和提示提供了一个交互式环境，使调试和开发MCP集成变得容易。

主要特点：

  • 🌐 基于Web的界面 -无需CLI，直接从浏览器测试MCP服务器
  • 🔌 HTTP传输支持 -支持基于HTTP的无状态MCP交互
  • 🔧 交互式测试 -实时执行工具、查看资源和测试提示
  • 📊 请求日志记录 -跟踪所有JSON-RPC请求和响应以进行调试
  • 🔒 OAuth集成 -为需要身份验证的MCP服务器提供安全的OAuth流
  • 🛡️ 应用程序加密 -AES-256-GCM保护OAuth令牌和客户端机密
  • 👥 灵活的身份验证 -无需登录即可匿名使用，或创建一个帐户（GitHub OAuth、Magic Link）用于持久数据和跨设备访问

为什么选择MCP游乐场？

MCP Playground的建立是为了快速、简单地检查和测试MCP服务器，而无需每次处理复杂的CLI设置或编写自定义脚本。在使用MCP进行开发时，显然需要一个简单的web界面来：

  • 快速连接 访问任何MCP服务器，看看它暴露了什么
  • 测试工具和提示 无需编写代码即可交互
  • 调试OAuth流 与经过身份验证的服务器集成时
  • 查看请求/响应日志 了解引擎盖下发生了什么
  • 在服务器之间切换 轻松处理多个项目

该工具不是为每个项目重建这些功能，而是开源的，这样任何使用MCP的人都可以从中受益。这是任何使用模型上下文协议的人都应该使用的工具。

技术栈

MCP游乐场采用现代可靠的技术建造：

  • 前端：Next.js 16（应用路由器）、React 19、TypeScript、Tailwind CSS 4、Shadcn UI
  • 后端：tRPC、Node.js、Drizzle ORM
  • 数据库：PostgreSQL 17
  • 认证：更好的身份验证（GitHub OAuth、Magic Link、匿名）
  • 电子邮件：对电子邮件进行重新发送
  • MCP集成：@modelcontextprotocol/sdk
  • 代码质量：Ultracite（AI就绪过梁）、Biome

入门指南

先决条件

所需版本：

在运行应用程序之前，您需要设置服务并配置环境变量。有关环境变量的更多详细信息，请参阅 环境变量 部分。

快速入门指南

  1. 克隆并安装

    # Clone the repository
git clone https://github.com/yourusername/mcp-playground.git
cd mcp-playground

# Install dependencies
pnpm install

  2. 设置环境

    创建一个 .env.local 根目录中的文件，包含以下变量：

    # Database
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/mcp-playground"

# Better Auth
BETTER_AUTH_SECRET="your_secret_key"  # Generate with: openssl rand -hex 32
BETTER_AUTH_URL="http://localhost:3000"

# GitHub OAuth (Required for GitHub login)
GITHUB_CLIENT_ID="your_github_client_id"
GITHUB_CLIENT_SECRET="your_github_client_secret"

# Resend (Required for Magic Link authentication)
RESEND_API_KEY="your_resend_api_key"

# Application-level encryption
ENCRYPTION_KEY="paste_64_char_hex_key"  # Generate with: openssl rand -hex 32

  3. 启动数据库

    pnpm docker:db:up

  4. 初始化数据库

    pnpm db:push

  5. 启动应用程序

    pnpm dev

  6. 在浏览器中打开

    访问 http://localhost:3000

环境设置

1.更好的身份验证设置

生成安全密钥以实现更好的身份验证：

openssl rand -hex 32

添加到 .env.local:

BETTER_AUTH_SECRET="your_generated_secret"
BETTER_AUTH_URL="http://localhost:3000"  # Change to your production URL in production

2.GitHub OAuth设置（登录GitHub需要）

  1. 首选 GitHub开发人员设置

  2. 点击“新建OAuth应用程序”

  3. 填写申请详情：

    • 应用程序名称：MCP游乐场（或您喜欢的名字）
    • 主页网址: http://localhost:3000 （开发）或您的生产URL
    • 授权回调URL:
      • 发展： http://localhost:3000/api/auth/callback/github
      • 生产： https://your-production-url/api/auth/callback/github

  4. 点击“注册申请”

  5. 复制客户端ID并生成客户端密钥

  6. 添加到 .env.local:

    GITHUB_CLIENT_ID="your_client_id"
GITHUB_CLIENT_SECRET="your_client_secret"

[！警告] 授权回调URL必须匹配 精确地 在中配置什么 .env.local，包括协议（http/https）、域和路径。

3.重新发送设置（Magic Link身份验证所需）

  1. 首选 重发

  2. 创建帐户或登录

  3. 导航到仪表板中的API键

  4. 创建新的API密钥

  5. 添加到 .env.local:

    RESEND_API_KEY="re_..."

[！注意] Magic Link身份验证需要重新发送中经过验证的域才能用于生产。在开发中，您可以使用Resend的测试模式。

数据库设置

MCP Playground使用PostgreSQL来存储服务器连接、用户数据和请求日志。

启动数据库

运行此命令通过Docker启动本地PostgreSQL实例：

pnpm docker:db:up

这将创建一个数据库，其中包含：

  • 容器: mcp-playground-db
  • 数据库: mcp-playground
  • 用户名: postgres
  • 密码: postgres
  • 端口: 5432

数据库命令

  • 设置数据库表:

    pnpm db:push

  • 创建迁移文件 （架构更改后）：

    pnpm db:generate

  • 应用迁移:

    pnpm db:migrate

  • 查看数据库内容 （Drizzle工作室）：

    pnpm db:studio

  • 停止数据库:

    pnpm docker:db:stop

  • 删除数据库和卷:

    pnpm docker:db:clean

环境变量

变量 描述 必填
DATABASE_URL PostgreSQL连接字符串 是
BETTER_AUTH_SECRET 更好的身份验证加密密钥 是
BETTER_AUTH_URL 身份验证回调的基本URL 是
GITHUB_CLIENT_ID GitHub OAuth应用程序客户端ID 用于GitHub登录
GITHUB_CLIENT_SECRET GitHub OAuth应用程序客户端机密 用于GitHub登录
RESEND_API_KEY 重新发送用于发送魔术链接电子邮件的API密钥 用于魔术链接验证
ENCRYPTION_KEY 用于加密OAuth凭据的64字符十六进制密钥 是

加密设置

  • 使用以下命令在本地生成新密钥 openssl rand -hex 32 并将其添加到 .env.local 以及Supabase/Vercel的秘密。

常用命令

发展

  • pnpm dev:all -启动PostgreSQL容器和Next.js开发服务器
  • pnpm dev -仅启动Next.js开发服务器（需要运行数据库）
  • pnpm build -构建生产捆绑包
  • pnpm start -运行生产服务器

代码质量

  • pnpm lint -运行Ultracite过梁（检查模式）
  • pnpm lint:fix -运行Ultracite linter（修复模式）
  • pnpm format -使用生物特征格式化代码
  • pnpm typecheck -运行TypeScript类型检查

数据库管理

  • pnpm docker:db:up -启动PostgreSQL容器
  • pnpm docker:db:stop -停止PostgreSQL容器
  • pnpm docker:db:down -停止并删除PostgreSQL容器
  • pnpm docker:db:clean -停止、移除容器并删除卷
  • pnpm db:generate -从模式生成Drizzle迁移
  • pnpm db:migrate -运行Drizzle迁移
  • pnpm db:push -将模式更改直接推送到数据库
  • pnpm db:studio -打开Drizzle Studio图形用户界面

项目结构

src/
├── app/                          # Next.js App Router
│   ├── api/auth/[...all]/       # Better Auth catch-all route
│   ├── server/[serverId]/       # Server detail page with prefetching
│   ├── oauth/callback/          # OAuth callback handler
│   └── page.tsx                 # Home page
├── components/
│   ├── playground/              # Main playground interface
│   ├── request-logs/            # Request logging UI
│   └── ui/                      # Reusable UI components
├── server/
│   ├── api/routers/             # tRPC API routes
│   ├── services/                # Business logic
│   └── storage/                 # Database access layer
├── lib/
│   ├── trpc/                    # tRPC configuration
│   ├── auth.ts                  # Better Auth config
│   └── mcp/                     # MCP client logic
├── db/
│   ├── schema/                  # Database schemas
│   └── index.ts                 # Drizzle client
└── env.ts                       # Type-safe environment variables

运作原理

  1. 连接到MCP服务器：通过提供MCP服务器的HTTP端点和身份验证详细信息来添加MCP服务器
  2. OAuth流：如果服务器需要OAuth，MCP Playground将安全地处理整个流程
  3. 探索能力：浏览服务器公开的可用工具、资源和提示
  4. 交互式测试：使用自定义参数执行工具、获取资源和测试提示
  5. 请求日志记录：查看详细的JSON-RPC请求/响应日志以进行调试
  6. 多服务器管理：在多个MCP服务器之间连接和切换

许可证

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

相关 MCP