STARWARCLOUD STARWAR.AI
返回市场
MCP游乐场

MCP游乐场

作者：emergent-lab7 星标更新：2025-11-05
安装使用来源：spider==github.com

项目介绍

<p align="center"> <picture> <source srcset="public/icon0.svg" media="(prefers-color-scheme: dark)"> <img src="public/icon0.svg" alt="MCP Playground Logo" width="64"/> </picture> </p>

MCP Playground

一个基于Web的开源工具，用于测试和检查MCP服务器。

什么是MCP Playground？

MCP Playground 是一个基于Web的开发者工具，旨在检查和测试模型上下文协议（MCP）服务器。它提供了一个交互式环境，用于探索由MCP服务器暴露的工具、资源和提示，使得调试和开发MCP集成变得容易。

关键特性：

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

为什么选择MCP Playground？

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

  • 快速连接到任何MCP服务器，并查看其暴露的内容
  • 交互式测试工具和提示，无需编写代码
  • 调试OAuth流程，当与认证服务器集成时
  • 查看请求/响应日志，以理解底层发生了什么
  • 轻松切换服务器，同时在多个项目上工作

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

技术栈

MCP Playground 使用现代且可靠的科技构建：

  • 前端：Next.js 16（App Router）、React 19、TypeScript、Tailwind CSS 4、Shadcn UI
  • 后端：tRPC、Node.js、Drizzle ORM
  • 数据库：PostgreSQL 11
  • 身份验证：Better Auth（GitHub OAuth、Magic Link、匿名）
  • 邮件服务：React Email with Resend
  • MCP集成：@modelcontextprotocol/sdk
  • 代码质量：Ultracite（AI准备的linter）、Biome

快速开始

前提条件

所需版本：

  • Node.js（v18或更高版本）
  • pnpm（v10或更高版本）
  • Docker（v20或更高版本）

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

快速入门指南

  1. 克隆并安装

    # 克隆仓库
git clone https://github.com/yourusername/mcp-playground.git
cd mcp-playground

# 安装依赖
pnpm install

  2. 设置环境

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

    # 数据库
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/mcp-playground"

# Better Auth
BETTER_AUTH_SECRET="your_secret_key"  # 生成方式：openssl rand -hex 32
BETTER_AUTH_URL="http://localhost:3000"

# GitHub OAuth（GitHub登录所需）
GITHUB_CLIENT_ID="your_github_client_id"
GITHUB_CLIENT_SECRET="your_github_client_secret"

# Resend（Magic Link认证所需）
RESEND_API_KEY="your_resend_api_key"

# 应用级加密
ENCRYPTION_KEY="paste_64_char_hex_key"  # 生成方式：openssl rand -hex 32

  3. 启动数据库

    pnpm docker:db:up

  4. 初始化数据库

    pnpm db:push

  5. 启动应用

    
pnpm dev

  6. 在浏览器中打开

    访问 http://localhost:3000

环境设置

1. Better Auth 设置

生成一个安全的秘密键用于Better Auth：

openssl rand -hex 32

添加到 .env.local：

BETTER_AUTH_SECRET="your_generated_secret"
BETTER_AUTH_URL="http://localhost:3000"  # 生产环境中更改为您生产URL

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

  1. 前往 GitHub 开发者设置

  2. 点击“新建OAuth应用”

  3. 填写应用详情：

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

  4. 点击“注册应用”

  5. 复制Client ID并生成Client Secret

  6. 添加到 .env.local：

    GITHUB_CLIENT_ID="your_client_id"
GITHUB_CLIENT_SECRET="your_client_secret"

[!WARNING] 授权回调URL必须与您在 .env.local 中配置的完全一致，包括协议（http/https）、域名和路径。

3. Resend 设置（Magic Link认证所需）

  1. 前往 Resend

  2. 创建账户或登录

  3. 导航至仪表板中的API密钥

  4. 创建一个新的API密钥

  5. 添加到 .env.local：

    RESEND_API_KEY="re_..."

[!NOTE] Magic Link认证在生产使用时需要在Resend中验证域。在开发中，您可以使用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 Studio）：

    pnpm db:studio

  • 停止数据库：

    pnpm docker:db:stop

  • 移除数据库和卷：

    pnpm docker:db:clean

环境变量

变量描述是否必需
DATABASE_URLPostgreSQL连接字符串是
BETTER_AUTH_SECRETBetter Auth加密的秘密键是
BETTER_AUTH_URL认证回调的基础URL是
GITHUB_CLIENT_IDGitHub OAuth应用的客户端ID对于GitHub登录
GITHUB_CLIENT_SECRETGitHub OAuth应用的客户端密钥对于GitHub登录
RESEND_API_KEY发送Magic Link电子邮件的Resend API密钥对于Magic Link认证
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 linter（检查模式）
  • pnpm lint:fix - 运行Ultracite linter（修复模式）
  • pnpm format - 使用Biome格式化代码
  • 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 GUI

项目结构

src/
├── app/                          # Next.js App Router
│   ├── api/auth/[...all]/       # Better Auth捕获所有路由
│   ├── server/[serverId]/       # 预取的服务器详情页面
│   ├── oauth/callback/          # OAuth回调处理器
│   └── page.tsx                 # 主页
├── components/
│   ├── playground/              # 主要的playground界面
│   ├── request-logs/            # 请求日志UI
│   └── ui/                      # 可重用的UI组件
├── server/
│   ├── api/routers/             # tRPC API路由
│   ├── services/                # 业务逻辑
│   └── storage/                 # 数据库访问层
├── lib/
│   ├── trpc/                    # tRPC配置
│   ├── auth.ts                  # Better Auth配置
│   └── mcp/                     # MCP客户端逻辑
├── db/
│   ├── schema/                  # 数据库模式
│   └── index.ts                 # Drizzle客户端
└── env.ts                       # 类型安全的环境变量

工作原理

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

许可证

MIT许可证 - 详情见LICENSE文件