AI导哈

MCP协议仪表板

MCP Lab是一个基于Next.js 15的仪表板，用于注册基于HTTP的模型上下文协议（MCP）服务器，手动测试工具，或通过引导式聊天体验让LLM调用这些工具。

  • by Preetnagda
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Preetnagda/mcp-tester

使用说明

MCP实验室

MCP Lab是一个Next.js 15仪表板，用于注册基于HTTP的模型上下文协议（MCP）服务器、手动测试工具，或让LLM通过引导聊天体验调用这些工具。每个用户都通过电子邮件登录，管理自己的注册表，并可以存储为AI聊天工作流程提供动力的提供商API密钥。

实时访问： MCP实验室

亮点

  • 检查能力：查看可用工具，阅读详细说明，并分析每个工具的JSON输入模式。
  • OAuth集成：内置支持连接到需要OAuth身份验证的MCP服务器（需要服务器上的动态客户端注册、RFC 7591支持）。
  • 自定义头：为MCP服务器请求定义并注入自定义头（例如，API密钥、身份验证令牌）。
  • 双重交互模式：通过生成的表单手动与MCP工具交互，或让LLM协调交互。
  • 情境感知：检查大致的上下文开销，并监控每个连接的MCP服务器的令牌使用情况。

部署架构

应用程序部署使用 海表温度 在AWS上，利用 打开下一页 为了使Next.js适应无服务器环境。OpenNext将Next.js构建输出转换为与AWS Lambda和其他无服务器平台兼容的格式。

要更深入地了解OpenNext如何构建部署，请参阅他们的 架构文档.

  • 计算：在AWS Lambda上运行，允许无限扩展和零闲置成本。
  • 内容分发网络：AWS CloudFront为静态资产提供服务，并在边缘缓存内容以实现低延迟。
  • 存储：用户数据和配置存储在托管的PostgreSQL数据库中。
  • 安全：环境变量和秘密通过SST的秘密管理进行安全管理。

运输支持

今天，运行时只注册 http 运输工具(StreamableHTTPClientTransport).数据库枚举仍然包括 stdio 和 sse，但UI有意将“传输类型”选择器限制为HTTP，直到发送其他传输。尝试保存另一种类型将在后端被拒绝，因为 McpConnectionManager 缺乏相应的实施。

入门指南

先决条件

  • Node.js 18或更高版本
  • 本地配置的AWS凭据（或使用配置文件）
  • PostgreSQL数据库URL（本地或远程）

设置步骤

  1. 克隆并安装
    git clone <repo-url>
cd mcp-tester
npm install
  2. 配置机密 使用SST初始化所需的秘密：
    npx sst secret set DATABASE_URL "postgresql://user:pass@host:5432/mcp_registry"
npx sst secret set NEXTAUTH_SECRET "your-random-secret"
npx sst secret set EMAIL_API_KEY "your-email-provider-api-key"
npx sst secret set EMAIL_FROM "noreply@example.com"
npx sst secret set ENCRYPTION_KEY "your-32-char-encryption-key"
  3. 应用迁移
    npm run db:migrate
  4. 启动开发服务器
    npx sst dev
    这将启动本地开发环境并将其链接到您的AWS沙盒。
  5. 访问仪表板 打开 http://localhost:3000，请求一个魔术链接，您将被重定向到 /dashboard/mcp 确认电子邮件后。

有用的脚本

  • npm run build –Next.js生产构建
  • npm run db:studio –针对配置的数据库启动Drizzle Studio
  • npm run lint –Next.js lint管道

核心工作流

1.登录和API密钥

  1. 首选 /auth/login 并请求一个魔术链接（Nodemailer通过发送 EMAIL_SERVER).
  2. 登录后，打开 /dashboard/credentials 以存储提供者密钥。只有OpenAI(openai)和人类学(anthropic)目前列举在 providers.
  3. 密钥在静态时由PostgreSQL访问控制进行加密；只有拥有它们的用户可以通过中的服务器操作读取/更新/删除它们 src/services/key-service.ts.

2.注册或编辑MCP服务器

  • /dashboard/mcp 仅列出当前用户的服务器，并显示注册/编辑/删除的操作按钮。
  • /dashboard/register 接受名称、描述、URL、HTTP标头，并（目前）强制传输类型为HTTP。
  • /dashboard/edit/[id] 重用相同的表单，通过以下方式加载记录 /api/mcp-servers/[id].
  • 记录的范围是API层的用户id，因此即使是精心编制的请求也无法访问其他用户的服务器。

3.手动工具测试

  1. 点击 互动 在服务器上加载 /dashboard/mcp/[id].
  2. 击打 连接到MCP服务器；页面调用 /api/mcp-connect，反过来又使用 McpConnectionManager.connect 列出工具。
  3. 选择一个工具来查看其描述、输入模式和自动生成的表单。如果没有提供模式，您还可以切换原始JSON文本区域。
  4. 每次跑步都成功 /api/mcp-call-tool 并将结果或错误记录在 最近通话 带有一键复制按钮的列表。
  5. 展开后，标题覆盖是可编辑的 更多信息，允许您临时交换令牌，而不会永久保存它们。

4.AI聊天运行器

  1. 将交互模式切换到 聊天 连接后；MCP实验室将在聊天侧边栏中显示所选服务器的工具。
  2. 选择具有API键的LLM提供程序/模型组合（模型在中定义 src/lib/llm.ts).
  3. 消息流式传输 /api/chat，这将每个请求的工具链接限制为五个步骤(stepCountIs(5)).工具定义回调到 McpConnectionManager.callTool 使用保存的服务器标头。
  4. 聊天UI显示所有助理/用户消息，并在等待响应时禁用发送，以防止重复执行工具。

5.OAuth连接流

  1. 如果MCP服务器需要身份验证（401响应）并支持动态客户端注册（RFC 7591），系统将使用PKCE启动OAuth 2.0授权码流。
  2. 您将被重定向到提供商的登录页面以授权应用程序。
  3. 成功后，您将被重定向回仪表板(/api/auth/mcp/callback)，其中访问令牌被安全地加密和存储。
  4. 仪表板会自动重新连接(auto_connect=true)，现在将存储的令牌用于所有后续请求。

API路线

  • GET/POST /api/mcp-servers -为经过身份验证的用户列出或创建MCP服务器。
  • GET/PUT/DELETE /api/mcp-servers/[id] -获取、更新或删除单个服务器（每个用户强制授权）。
  • POST /api/mcp-connect –连接到服务器并通过MCP SDK返回工具元数据。
  • POST /api/mcp-call-tool –使用JSON参数执行特定工具并返回原始MCP结果。
  • GET /api/api-keys –将存储的提供者密钥暴露给聊天配置UI。
  • POST /api/chat –流式传输所选LLM的响应，同时允许模型调用MCP工具。
  • api/auth/[...nextauth] –由NextAuth处理会话管理和电子邮件验证链接。

技术栈

  • 前端：Next.js 15+React 19，应用路由器，服务器组件，顺风4（通过PostCSS）+shadcn/ui。
  • 认证：NextAuth使用魔术链接、Drizzle适配器、SST部署秘密。
  • 数据库PostgreSQL 15，Drizzle ORM，DrizzleKit迁移。
  • 主控程序: @modelcontextprotocol/sdk 流式HTTP客户端，手动+聊天工具。
  • LLM SDK: ai （Vercel AI SDK）与以下供应商合作 @ai-sdk/openai 和 @ai-sdk/anthropic.
  • 开发工具：ESLint 9，TypeScript 5，涡轮包驱动 next dev.

故障排除

  • 电子邮件登录 –确保 EMAIL_SERVER 是一个有效的Nodemailer连接字符串，并且允许localhost作为身份验证主机(AUTH_TRUST_HOST / NEXTAUTH_URL).
  • 数据库错误 –确认可以通过以下方式联系到Postgres DATABASE_URL 移民潮席卷而来；小雨错误通常会引用缺少的表格。
  • MCP连接故障 –验证远程端点是否支持Streamable HTTP(@modelcontextprotocol/sdk 服务器传输），并且存在任何所需的身份验证标头；CORS必须允许 OPTIONS, POST，以及 GET.
  • 聊天显示“找不到API密钥” –在上添加匹配的提供程序密钥 /dashboard/credentials；聊天端点拒绝在没有它的情况下调用模型。
  • 工具调用验证 –模式通过以下方式进行验证 @rjsf/validator-ajv8；格式错误的JSON或模式违规出现在“最近调用”列表中，并带有详细的错误。

路线图

  • 将MCP资源与交互UI内的工具放在一起。
  • 支持其他LLM提供者和每个工具密钥选择。
  • 预先注册的client_id和OAuth流的秘密支持。

相关 MCP