[備忘録] Gradio DocsのMCPサーバーを試してみた

こんにちは！前回の記事では、Gradioの`mcp_server=True`機能とdocstringの重要性について書きました。今回は、Gradio公式が提供している**Gradio Docs MCPサーバー**の使い方について共有します。これを使えば、GradioのドキュメントにLLMが直接アクセスできるようになります。

![gradio-mcp-diagram-simplified.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/d256c3b7-5380-4d2c-8158-c6bef9c2e231.png)


## 引用元の情報

https://www.gradio.app/main/guides/using-docs-mcp


## はじめに：Gradio Docs MCPサーバーとは？

Gradio Docs MCPサーバーは、GradioのドキュメントをLLM（大規模言語モデル）が直接参照できるようにするサービスです。これにより、MCPクライアント (cursorなど) が、GradioのAPIや使い方について正確な情報を持って回答できるようになります。

## 必要なもの

MCPプロトコルを使ったツール呼び出しをサポートするLLMアプリケーションが必要です。例えば：

- Claude Desktop
- Cursor
- Github Copilot
など

これらは「MCPクライアント」と呼ばれています。

## なぜMCPサーバーが必要なのか？

LLMを開発ワークフローで使用している場合、このサーバーを追加することで、Gradioに関する適切なコンテキストを与えることができます。これにより、より速く、スムーズな開発体験が可能になります。

このサーバーはHugging Face Spacesで稼働しているものを参照します。

## クライアントへのインストール

### SSEをサポートするクライアント（GithHub Copilotでためしました）

MCPの設定に以下の構成を追加するだけです：

```json
{
  "mcpServers": {
        "gradio-docs": {
             "type": "sse",
             "url": "https://gradio-docs-mcp.hf.space/gradio_api/mcp/sse"
        }
  }
}
```

### GitHub Copilot

以下のように自分の場合はvscodeの設定のmcpの設定 (gradio01の項目) を追記して、サーバーを起動して試してみました。

```json
{
  "mcpServers": {
    "gradio-docs": {
      "url": "https://gradio-docs-mcp.hf.space/gradio_api/mcp/sse"
    }
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/5cb8908b-c13e-470a-b1a4-b1547f7cf084.png)
設定の再生ボタンから起動すると、起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/c74ec166-4e43-4dc4-8a9f-ff3dbcdcb510.png)

GitHub Copilotのチャットの画面を起動して、エージェントモードを選択します。
ツールのアイコンをクリックすると、どのmcpサーバと連携するか一覧がでてくるので、対象のmcpサーバを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/74f7bd38-8a35-404b-a6d2-f77dfbe3f958.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/2981dd57-262b-48ca-a69e-ad74bc17addc.png)



## 使用可能なツール

現在、サーバーには2つのツールのみが提供されています：

1. `gradio_docs_mcp_load_gradio_docs`
   - 引数なし
   - Gradioの最新かつ完全なドキュメントの要約を/llms.txt形式で読み込みます
   - LLMが質問に答えたりコードを生成したりする前に解析できる非常に有用なコンテキストを提供します

2. `gradio_docs_mcp_search_gradio_docs`
   - 引数としてクエリを受け取ります
   - Gradioのドキュメント、ガイド、デモに対する埋め込み検索を実行し、LLMが解析するための最も有用なコンテキストを返します

## 実際に試してみた

Github CoppilotのChatからGradio Docsについて質問してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/45af6eef-ff65-43fe-99e6-fc02a78262ec.png)

続行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/d9b95742-07b9-4678-ae35-d4cd57c3977f.png)

上記で説明したtoolがよばれて、情報をチャットから取得できます。

## 感想

情報の取り扱いには十分に注意する必要がありますが、その点に気をつければ、自分のプロジェクト用のMCPサーバーは非常に有用なツールになるでしょう。特に機密性の高いデータや社内情報を扱う場合は、適切なアクセス制限やセキュリティ対策が必要だとはおもいますが・・・。個人的活動や生活の助けになるようなところから、やってみるかな・・・。

## 参考リンク

https://www.gradio.app/docs

https://www.gradio.app/main/guides/using-docs-mcp

## 免責事項

- 本記事の作成にあたり、文章および図解の一部に生成AIを活用しています。最終的な編集および内容の確認は筆者が責任を持って行っています。  
- 本記事は2025年5月初旬時点の情報に基づいて記載しています。仕様や実装内容は将来的に変更される可能性があるため、最新の情報は必ず公式サイト等でご確認ください。

![マインドマップ (44).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/9bc2f007-33ce-4bdb-a1c7-2ba570a9bf65.png)