MCP Gradio Client Proof of Concept

MCP Gradio クライアント Proof of Concept

このリポジトリは、Gradioを使用してModel Context Protocol (MCP)クライアントを実装するための Proof of Concept です。Gradio インターフェース内で STDIO と SSE の両方の通信方法を使用して MCP サーバーと対話する方法を示しています。

Model Context Protocol (MCP)は、言語モデルとツール間の相互作用を標準化し、通信のための統一されたインターフェースを提供することを目指しています。この Proof of Concept は、ツール統合を備えた AI アシスタントを構築する際の MCP の実用的な応用を示しています。

目次

• 紹介
• 機能
• インストール
• 設定
  • STDIO サーバー定義
  • SSE サーバー定義
• 使用方法
• 注釈
• ライセンス
• 貢献

紹介

このプロジェクトは Gradio アプリケーション内に MCP クライアントを実装し、ユーザーが MCP 経由で公開されたツールと対話できるようにします。MCP の標準化された通信プロトコルを活用することで、クライアントは様々なツールとシームレスに統合でき、言語モデルの機能を強化します。

Model Context Protocolからの主要要素：

• 標準化: MCP は言語モデルがツールと相互作用するための標準化された方法を提供し、相互運用性を促進します。
• 通信方法: ツール統合における柔軟性のため、STDIO と SSE を含む複数の通信方法をサポートしています。
• ツール統合: 言語モデルが外部ツールを使用できるようにし、その機能と適用性を強化します。

機能

• Gradio インターフェース: MCP クライアントとツールと対話するためのユーザーフレンドリーなインターフェース。
• STDIO と SSE サポート: STDIO と SSE の両方の方法を使用して MCP サーバーに接続する方法を示しています。
• 動的ツール読み込み: MCP サーバーによって公開されたツールを自動的に検出して統合します。
• デバッグサポート: 開発とトラブルシューティングを支援するオプションのデバッグモード。

インストール

前提条件

• Python 3.12 以上
• Node.js
• uvicorn (STDIO サーバー用 UVX)
• NPX (STDIO サーバー用 NPX)
• Python (Python モジュール STDIO サーバー)
• OpenAI API キー (言語モデル相互作用用)

ステップ

1. リポジトリをクローン

   git clone https://github.com/yourusername/mcp-gradio-client.git
   cd mcp-gradio-client
   

2. 仮想環境を作成 Unix/macOS:

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`
   

   Windows:

    python -m venv .venv
    .venv\Scripts\activate
   

3. Install Dependencies

   pip install -r requirements.txt
   

4. 環境変数を設定

   .env.exampleをリファレンスとして、ルートディレクトリに.envファイルを作成し、OpenAI API キーを追加します：

   OPENAI_API_KEY=your_openai_api_key
   

5. アプリを実行

   Gradio アプリケーションを起動します：

   python gradio_ui.py
   

MCP STDIO vs SSE サーバーの理解

stdio_versus_sse_mcp_servers.mdを参照して、2 つのサーバータイプの違いについて詳しく確認してください。

設定

アプリケーションは MCP サーバーを定義するためにconfig.jsonファイルが必要です。このファイルはルートディレクトリに配置する必要があります。 config.json は以下の形式である必要があります：

{
  "mcpServers": {
    "stdio_server_name": {
      "type": "stdio",
      "command": "uvx",
      "args": [], 
      "env": {}
    },
    "sse_server_name": {
      "type": "sse",
      "url": "http://127.0.0.1:3001/sse",
      "headers": {}
    }
  }
}

詳細は情報 - config.json ファイルの設定方法を参照してください。ファイル構造はClaude Desktopで使用されるものと非常に似ていますが、完全に同じではありません。 重要な違いが複数あります（別の readme に注釈済み）

• サーバーのタイプを指定するために"type": "stdio"|"sse"が必須です
• "command": "uvx"|"npx"|"python"は Windows ユーザーの場合は調整が必要な場合があります。例えば、Windows ではnpxをnpx.cmdにする必要があります

STDIO サーバー定義

• Type: "stdio" に設定する必要があります。
• Command: STDIO サーバーを起動するコマンド (例: "python"、"uv"、"uvx"、"npx")。
• Args: コマンドの引数 (例: ["weather_server.py"])。
• Env: サーバーが必要とする環境変数。

注記: STDIO サーバーは Gradio によってインスタンス化され、手動で起動する必要はありません。通常は npx、uvicorn/uvx、または python -m コマンド引数経由で起動されます。認識されていないパッケージである場合、一部の Python STDIO サーバーは事前にダウンロードしてインストールする必要があります。

SSE サーバー定義

• Type: "sse" に設定する必要があります。
• URL: SSE サーバーが実行されているエンドポイント。
• Headers: (オプション) 接続に必要なヘッダー。

注記: SSE サーバーは Gradio クライアントが接続するために手動で起動して実行している必要があります。Gradio アプリケーションを実行する前に SSE サーバーが起動していることを確認してください。

使用方法

1. SSE サーバーを起動する (存在する場合) config.json で定義されているすべての SSE サーバーが実行されていることを確認してください。

2. Gradio アプリケーションを実行する

   python gradio_ui.py
   

3. インターフェースと対話する 提供された URL をウェブブラウザーで開き (通常は http://127.0.0.1:7860)、Gradio インターフェースにアクセスしてください。

4. 質問する チャットインターフェースを使用して言語モデルおよび MCP サーバーが提供するツールと対話してください。

注記

• STDIO サーバー: Gradio は設定に基づいて必要に応じて STDIO サーバーを自動的にインスタンス化します。
• SSE サーバー: Gradio クライアントを実行する前に手動で起動する必要があります。
• デバッグモード: インターフェースのチェックボックスを使用してデバッグモードを有効または無効にし、詳細なログを表示してください。
• ツールのインストール: 一部のツールは標準パッケージでない場合、追加のインストール手順が必要になる場合があります。すべての必要なツールがインストールされており、アクセス可能であることを確認してください。

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。詳細は LICENSE ファイルを参照してください。

Model Context Protocol およびその機能の詳細については、公式 MCP ドキュメントを参照してください。

コントリビューション

git clone xxxxx
cd xxx

uv venv
source .venv/bin/activate
uv sync --frozen --all-extras --dev

venv
.venv/bin/activate

pytest -v

pre-commit install

pre-commit run --all-files

git checkout -b my-branch

git add . && git commit -m "My changes"

git push origin my-branch