MCP Playground: Your Sandbox for Claude & Gemini with Model Context Protocol 🚀

MCP Playground：使用 Model Context Protocol 为 Claude 和 Gemini 打造的沙盒 🚀

通过 Model Context Protocol（MCP）将 Anthropic 的 Claude 模型和 Google 的 Gemini 模型与外部工具和数据源无缝集成，释放它们的全部潜力。MCP Playground 提供直观的网页版界面，支持两个 AI 提供商，具备高级工具管理和全面的自定义选项，助你进行实验、调试和创新。

---

终极实验平台，让你可以即时将 Claude 或 Gemini 连接到任意兼容 MCP 的服务，通过系统提示词自定义其行为，选择性地控制工具访问权限，并实时观察 AI Agent 运用真实世界能力开展工作。

---

🔥 主要功能

MCP Playground 是面向使用大模型和 MCP 的开发者的综合性平台：

🤖 支持双提供商的高级 AI 聊天

• Claude 集成： 全面支持 Anthropic 的 Claude 模型（claude-3-5-sonnet-20241022）
• Gemini 集成： 全面支持 Google 的 Gemini 模型（gemini-2.0-flash、gemini-1.5-pro、gemini-1.5-flash 等）
• 灵活的 API 配置： 安全、独立地管理 Anthropic 和／或 Gemini API 密钥
• 动态模型选择： 即时切换两个提供商的不同模型
• 🆕 自定义系统提示词： 为 Claude 和 Gemini 定义独特的个性和行为

🔌 专业的 MCP 服务集成

• 通用服务支持： 以企业级可靠性连接任意基于 SSE 的 MCP 服务
• 快速入门选项： 提供预配置示例（Cloudflare Docs、DeepWiki、GitHub），可立即开始测试
• 自定义服务集成： 连接你的专用或特定用途的 MCP 服务
• 🆕 可用于生产环境的身份验证：
  • 开放服务： 公开的、无需身份验证的端点
  • Bearer 令牌身份验证： 使用 API 密钥／Bearer 令牌进行安全身份验证
  • OAuth 2.0 流程： 全面支持企业级 MCP 服务的 OAuth（现已正式支持）
• 能力发现： 即时查看每个服务的工具、提示词和资源

🛠️ 智能工具管理与控制

• 🆕 高级工具限制： 精细控制 AI 可访问的工具
  • 全部工具模式： AI 可使用任意可用工具
  • 所选工具模式： 将 AI 限制为仅使用指定工具
  • 无工具模式： 仅提供纯文本 AI 响应
  • 实时工具选择： 在对话期间动态限制工具
• 跨提供商兼容性： 同一批工具可同时与 Claude 和 Gemini 无缝配合
• 动态工具发现： 自动发现并分类所有可用工具
• 详细的工具检查： 查看完整的架构、参数和说明
• 手动工具测试： 使用自定义参数直接执行任意工具以进行调试
• 丰富的结果展示： 完整显示未经截断的 JSON 和文本输出，并提供语法高亮

✨ 卓越的开发者体验

• 直观的多面板界面： 将聊天、服务管理、工具和配置整合在有序的工作区中
• 提供商切换： 在对话期间可在 Claude 和 Gemini 之间无缝切换
• 实时通知： 所有操作（连接、错误、成功）均提供 Toast 通知
• 响应式设计： 在桌面、平板和移动设备上均可流畅使用

🔐 企业级安全

• 本地密钥存储： API 密钥安全地存储在浏览器 localStorage 中
• 直接 API 通信： 密钥仅发送至官方服务提供商 API
• 独立密钥管理： Claude 和 Gemini 分别配置
• 安全的服务连接： 对所有 MCP 通信强制使用 TLS/SSL

---

🤔 为什么选择 MCP Playground？

• 🚀 快速开发 AI： 无需编写代码，即可测试 Claude 和 Gemini 的工具交互
• 🔄 跨服务提供商比较： 比较不同 AI 模型如何处理相同任务和工具
• 🐛 高级调试： 通过直接测试工具和全面日志记录，隔离 MCP 服务问题
• 📖 边做边学： 通过多个 AI 服务提供商，亲身体验 Model Context Protocol
• 🎯 精确控制： 使用系统提示词和选择性工具访问，微调 AI 行为
• 🎨 展示能力： 使用专业级工具，展示支持 MCP 的服务
• ⚡ 即时试验： 实时测试服务配置、工具组合和 AI 服务提供商

---

🚀 几分钟即可开始！

1. 访问 Playground

访问 mcpsplayground.com — 无需登录！

2. 配置 AI 服务提供商

前往 "AI Model" 标签页：

• 对于 Claude：
  • 输入 Anthropic API Key（从 console.anthropic.com 获取）
  • 选择首选的 Claude 模型
  • 可选择为 Claude 的个性设置自定义系统提示词
• 对于 Gemini：
  • 输入 Google AI Studio API Key（从 aistudio.google.com 获取）
  • 从可用的 Gemini 模型中选择
  • 使用系统提示词自定义 Gemini 的行为

3. 连接 MCP 服务

前往 "MCP Servers" 标签页：

• 快速添加： 使用预配置示例（Cloudflare Docs、DeepWiki 等）
• 手动添加： 使用 SSE URL 和身份验证连接自定义服务
• OAuth 设置： 按照引导式设置，为企业服务完成 OAuth 流程

4. 控制工具访问权限 ⭐ 新功能

在 "Available Tools" 面板中：

• 查看已连接服务中的所有已发现工具
• 限制工具： 精确选择 AI 可访问的工具
• 测试工具： 使用自定义参数手动执行工具
• 监控使用情况： 查看 AI 在对话中使用了哪些工具

5. 开始高级 AI 对话

• 使用已连接的 MCP 工具与 Claude 或 Gemini 聊天
• 在对话过程中切换服务提供商，以比较回复
• 查看 AI 如何智能地仅选择并使用你授权的工具

---

🤖 支持的 AI 服务提供商

🔷 Anthropic Claude

• 模型： claude-3-5-sonnet-20241022（旗舰模型）
• API Key： Anthropic Console（console.anthropic.com）
• 优势： 高级推理、深入分析、精准选择工具
• 系统提示词支持： ✅ 可进行完整自定义

🔶 Google Gemini

• 模型：
  • gemini-2.0-flash-001（最新、速度最快）
  • gemini-2.0-flash
  • gemini-1.5-flash-001
  • gemini-1.5-flash
  • gemini-1.5-pro-001
  • gemini-1.5-pro（能力最强）
• API Key： Google AI Studio（aistudio.google.com）
• 优势： 推理速度快、多模态能力、工具调用高效
• 系统提示词支持： ✅ 可进行完整自定义

---

💡 什么是 MCP？

Model Context Protocol (MCP) 是一项标准化规范，使 Claude 和 Gemini 等语言模型能够安全地与外部工具、服务和数据源交互。MCP 定义了 AI Agent 如何：

• 🔍 发现能力：从已连接的服务中发现能力
• 🛠️ 执行工具：通过适当的参数验证来执行工具
• 📦 接收结构化结果：以便进一步处理
• 🔐 维护安全性：通过受控的访问模式实现

MCP Playground 使用 Server-Sent Events (SSE) 传输方式演示这些交互，实现实时通信，并支持 Anthropic 的 Claude 和 Google 的 Gemini，同时提供高级工具管理功能。

---

✨ 体验 AI 工具集成的未来

准备好使用最先进的 MCP 测试平台，为你的 AI 开发工作流注入强劲动力了吗？

➡️ 启动 MCP Playground

了解让 Claude 和 Gemini 精准地访问现实世界工具后，能实现哪些可能！

---

🏗️ 适用人群

• AI 开发者：构建具备外部能力的 LLM 应用
• MCP 服务作者：测试和调试其工具实现
• 企业团队：为基于工具的工作流评估 AI 提供商
• 研究人员：比较 Claude 和 Gemini 使用工具的性能
• 产品经理：向利益相关者演示 AI 能力
• 学生和教育工作者：了解 AI Agent 架构

---

由相信 AI 应在所有主要提供商平台上变得更强大、更可控、更易于使用的开发者打造。