Gradio MCP as a Language (gMaL): 自然言語からMCPサーバーを生成する新手法

## はじめに

Model Context Protocol (MCP)は、大規模言語モデル(LLM)にコンテキストやツールを提供するためのオープンプロトコルとして急速に普及しています。本記事では、MCPの開発に新しいアプローチ「Gradio MCP as a Language (gMaL)」を提案します。これは「MCP as a Language (MaaL)」の概念をGradioフレームワークに特化させ、より効率的なMCPサーバー開発を可能にします。

## デモ動画

https://x.com/hAru_mAki_ch/status/1920115633267871897

## MCPとは

MCPは「AIアプリケーション用のUSB-Cポート」と例えられます。USB-Cがデバイスと周辺機器を標準化された方法で接続するように、MCPはAIモデルと様々なデータソースやツールを標準化された方法で接続します。

MCPによって、LLMはファイル操作、画像生成、計算、データ分析など、本来持っていない機能を外部ツールを通じて実行できるようになります。

## gMaLの概念

### 定義

gMaL (Gradio MCP as a Language)は、自然言語による指示書からGradioベースのMCPサーバーを自動実装する開発手法です。開発者は自然言語で記述した要件から、機能的なMCPサーバーを直接生成できます。

### Gradioとの統合

Gradioとの統合により、各APIエンドポイントは自動的にMCPツールに変換され、対応する名前、説明、入力スキーマを持ちます。ツールとスキーマは`http://your-server:port/gradio_api/mcp/schema`で確認できます。

最もシンプルな例として、`mcp_server=True`を`.launch()`に追加するだけでMCPサーバー機能が有効になります：

```python
demo.launch(mcp_server=True)
```

### 主要な特徴

1. **指令書ベースの開発**
   - 自然言語による開発要件の記述
   - DocstringベースのAPI定義

2. **自動化されたGradio MCPサーバー生成**
   - Pythonコードの自動生成
   - APIクライアントの実装
   - Web UIとMCP SSEエンドポイントの両方を一度に提供

3. **デバッグの容易さ**
   - GradioのWeb UIでリアルタイムテスト可能
   - MCP SSEエンドポイントもインタラクティブにテスト可能

## gMaLベースプロンプト

gMaLの実装に使用できるベースプロンプトは[こちら](https://huggingface.co/spaces/MakiAi/gradio-mcp-codex-template/blob/main/gMaL.md)で公開されています。このプロンプトを参考にしてコーディングエージェントにGradioのMCPサーバーを書かせることができます。プロンプトには、リポジトリ情報、ファイル構成、コードサンプルなどが含まれており、LLMがGradio MCPアプリケーションを適切に生成するための十分な情報が提供されています。

## gMaL開発フロー

1. **指令書の作成**
   - 要件の定義（例：「文字カウンターアプリを作成して」）
   - 必要な機能の記述
   - 入出力の仕様

2. **自動実装**
   - 要件からのPythonコード生成
   - Gradio UI + MCP SSEエンドポイントの生成
   - ドキュメント付きの適切な関数定義

3. **デプロイと共有**
   - ローカル実行：`python app.py`
   - Hugging Face Spacesへのデプロイ（無料でMCPサーバーをホスト可能）

## 簡単なコード例：文字カウンター

以下は、最小限のGradio MCPサーバーの例です：

```python
import gradio as gr

def letter_counter(text: str, letter: str) -> int:
    """
    Count the number of occurrences of a letter in a given text.
    Args:
        text (str): Text to search through.
        letter (str): Letter to count.
    Returns:
        int: How many times `letter` appears in `text`.
    """
    return text.lower().count(letter.lower())

# --- Components -----------------------------------------------------------
text_input = gr.Textbox(
    label="text",
    placeholder="Enter text here"
)
letter_input = gr.Textbox(
    label="letter",
    placeholder="Enter a single letter",
    max_lines=1
)
count_output = gr.Number(label="count")

# --- Interface ------------------------------------------------------------
demo = gr.Interface(
    fn=letter_counter,
    inputs=[text_input, letter_input],
    outputs=count_output,
    title="Letter Counter (MCP demo)",
    description="Enter text & a letter – count occurrences.",
    api_name="letter_counter"
)

if __name__ == "__main__":
    # mcp_server=True starts the SSE endpoint at /gradio_api/mcp/sse
    demo.launch(mcp_server=True)
```

このシンプルなコードでウェブUIとMCPエンドポイントの両方が有効になり、Claude DesktopやCursorなどのMCPクライアントからアクセスできます。

## MCP クライアント設定例

MCP クライアント（Claude Desktop / Cline など）での設定例：

```jsonc
{
  "mcpServers": {
    "gradio-local": {
      "url": "http://127.0.0.1:7860/gradio_api/mcp/sse"
    }
  }
}
```

Claude DesktopやClineの設定ファイルに上記のコードを追加するだけで、LLMからGradioアプリの機能が利用可能になります。

## gMaLの利点

1. **開発の効率化**
   - 自然言語による要件の明確化
   - コードの自動生成
   - デバッグの容易さ（Web UIでリアルタイム確認）

2. **標準化**
   - 一貫した実装パターン
   - 再利用可能なテンプレート
   - ドキュメントの自動生成

3. **アクセシビリティ**
   - AI開発の敷居を下げる
   - 速いプロトタイピング
   - 無料でホスト可能

4. **デュアルインターフェース**
   - 同じコードでWeb UIとMCP APIの両方を提供
   - 人間とAIの両方がアクセス可能
   - エンドユーザーとAIエージェントの両方に対応

## Hugging Face Spacesでの無料ホスティング

ファイル一式をHugging Face Spaces（Gradioテンプレート）にプッシュすることで、無料の公開MCPサーバーが手に入ります：

```
https://<your-space>.hf.space/gradio_api/mcp/sse
```

例：`https://makiai-gradio-mcp-minimal.hf.space/gradio_api/mcp/sse`

## まとめ

gMaLは、MCPサーバーの開発を大幅に効率化する新しいアプローチを提供します。自然言語による指示からGradioベースのMCPサーバーを直接生成することで、開発者はより速く、より簡単にAIツールを作成できるようになります。

## 参考資料

- MCP as a Language：新しいMCP開発手法の提案
- [MakiAi/gradio-mcp-minimal](https://huggingface.co/spaces/MakiAi/gradio-mcp-minimal)
- [Gradio MCP Documentation](https://www.gradio.app/guides/building-an-mcp-server-with-gradio)
- [Gradio MCP Template](https://huggingface.co/spaces/MakiAi/gradio-mcp-codex-template)
- [gMaLのベースプロンプト](https://huggingface.co/spaces/MakiAi/gradio-mcp-codex-template/blob/main/gMaL.md)