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

MCP Playground：Claude と Gemini のための Model Context Protocol サンドボックス 🚀

Model Context Protocol（MCP）を介して外部ツールやデータソースとシームレスに連携し、Anthropic の Claude モデルと Google の Gemini モデルの可能性を最大限に引き出しましょう。MCP Playground は、2 つの AI プロバイダーに対応し、高度なツール管理機能と包括的なカスタマイズオプションを備えた、実験、デバッグ、イノベーションのための直感的なウェブベースのインターフェースを提供します。

---

Claude または Gemini を MCP 対応サーバーにすぐに接続し、システムプロンプトで動作をカスタマイズし、ツールへのアクセスを選択的に制御して、AI エージェントが現実世界の機能を活用する様子をリアルタイムで確認できる、究極のプレイグラウンドです。

---

🔥 主な機能

MCP Playground は、LLM と MCP を扱う開発者向けの最も包括的なプラットフォームです。

🤖 2 つのプロバイダーに対応した高度な 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 キーを個別に安全に管理
• 動的なモデル選択： 2 つのプロバイダーのさまざまなモデルを即座に切り替え
• 🆕 カスタムシステムプロンプト： 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 をシームレスに切り替え
• リアルタイム通知： すべての操作（接続、エラー、成功）をトースト通知で表示
• レスポンシブデザイン： デスクトップ、タブレット、モバイルデバイスで快適に動作

🔐 エンタープライズグレードのセキュリティ

• ローカルキーの保存： 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 キーを入力します（console.anthropic.com で取得できます）
  • 使用する Claude モデルを選択します
  • 必要に応じて、Claude のパーソナリティを設定するカスタムシステムプロンプトを指定します
• Gemini の場合：
  • Google AI Studio API キーを入力します（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 キー： 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 キー： Google AI Studio（aistudio.google.com）
• 強み： 高速な推論、マルチモーダル機能、効率的なツール呼び出し
• システムプロンプトのサポート： ✅ 完全にカスタマイズできます

---

💡 MCP とは？

Model Context Protocol（MCP） は、Claude や Gemini のような言語モデルが、外部のツール、サービス、データソースと安全にやり取りできるようにする標準仕様です。MCP は、AI エージェントが以下を行う方法を定義します。

• 🔍 接続されたサーバーの 機能を検出する
• 🛠️ 適切なパラメーター検証を行いながら ツールを実行する
• 📦 さらなる処理のために 構造化された結果を受け取る
• 🔐 制御されたアクセスパターンを通じて セキュリティを維持する

MCP Playground は、リアルタイム通信のための Server-Sent Events（SSE） トランスポートを使用して、こうしたやり取りを実演します。高度なツール管理機能を備え、Anthropic の Claude と Google の Gemini の両方に対応しています。

---

✨ AI ツール統合の未来を体験しましょう

最先端の MCP テストプラットフォームで、AI 開発のワークフローを強化しませんか？

➡️ MCP Playground を起動

Claude や Gemini に、精密な制御のもとで現実世界のツールを使わせると何ができるのか、ぜひご覧ください！

---

🏗️ 最適な対象

• 外部機能を備えた LLM アプリケーションを構築する AI 開発者
• ツールの実装をテストおよびデバッグする MCP サーバーの開発者
• ツールベースのワークフローに適した AI プロバイダーを評価する 企業チーム
• Claude と Gemini のツール使用性能を比較する 研究者
• 関係者に AI の機能を実演する プロダクトマネージャー
• AI エージェントのアーキテクチャを学ぶ 学生・教育者

---

AI は、主要なすべてのプロバイダーで、より高機能に、より制御しやすく、より利用しやすくあるべきだと考える開発者によって作られました。