Gradio MCP 整合

我們現在已經探索了 MCP 協議的核心概念以及如何實現 MCP 伺服器和客戶端。在本節中，我們將透過使用 Gradio 建立 MCP 伺服器來簡化操作！

Gradio 簡介

Gradio 允許開發人員僅用幾行 Python 程式碼即可為其模型建立 UI。它特別適用於：

• 建立演示和原型
• 與非技術使用者共享模型
• 測試和除錯模型行為

透過新增 MCP 支援，Gradio 現在提供了一種透過標準化 MCP 協議公開 AI 模型能力的直接方式。

將 Gradio 與 MCP 結合使用，您可以用最少的程式碼建立既適合人類又適合 AI 使用的工具。最重要的是，Gradio 已經被 AI 社群廣泛使用，因此您可以使用它與他人共享您的 MCP 伺服器。

先決條件

要使用支援 MCP 的 Gradio，您需要安裝帶有 MCP 擴充套件的 Gradio：

pip install "gradio[mcp]"

您還需要一個支援使用 MCP 協議進行工具呼叫的 LLM 應用程式，例如 Cursor（被稱為“MCP 主機”）。

使用 Gradio 建立 MCP 伺服器

讓我們來看一個使用 Gradio 建立 MCP 伺服器的基本示例。

import gradio as gr

def letter_counter(word: str, letter: str) -> int:
    """
    Count the number of occurrences of a letter in a word or text.

    Args:
        word (str): The input text to search through
        letter (str): The letter to search for

    Returns:
        int: The number of times the letter appears in the text
    """
    word = word.lower()
    letter = letter.lower()
    count = word.count(letter)
    return count

# Create a standard Gradio interface
demo = gr.Interface(
    fn=letter_counter,
    inputs=["textbox", "textbox"],
    outputs="number",
    title="Letter Counter",
    description="Enter text and a letter to count how many times the letter appears in the text."
)

# Launch both the Gradio web interface and the MCP server
if __name__ == "__main__":
    demo.launch(mcp_server=True)

透過此設定，您的字母計數函式現在可以透過以下方式訪問：

1. 用於直接人機互動的傳統 Gradio Web 介面
2. 可以連線到相容客戶端的 MCP 伺服器

MCP 伺服器將可透過以下地址訪問：

http://your-server:port/gradio_api/mcp/sse

應用程式本身仍可訪問，其外觀如下：

幕後運作原理

當您在 launch() 中設定 mcp_server=True 時，會發生以下幾件事：

1. Gradio 函式自動轉換為 MCP 工具
2. 輸入元件對映到工具引數模式
3. 輸出元件決定響應格式
4. Gradio 伺服器現在也監聽 MCP 協議訊息
5. 透過 HTTP+SSE 設定 JSON-RPC 用於客戶端-伺服器通訊

Gradio <> MCP 整合的關鍵特性

1. 工具轉換：Gradio 應用程式中的每個 API 端點都會自動轉換為 MCP 工具，並具有相應的名稱、描述和輸入模式。要檢視工具和模式，請訪問 http://your-server:port/gradio_api/mcp/schema 或點選 Gradio 應用程式頁尾中的“檢視 API”連結，然後點選“MCP”。

2. 環境變數支援：有兩種方法可以啟用 MCP 伺服器功能

• 在 launch() 中使用 mcp_server 引數
  已複製

  demo.launch(mcp_server=True)

• 使用環境變數
  已複製

  export GRADIO_MCP_SERVER=True

3. 檔案處理：伺服器自動處理檔案資料轉換，包括

   • 將 base64 編碼的字串轉換為檔案資料
   • 處理影像檔案並以正確的格式返回
   • 管理臨時檔案儲存

   強烈建議將輸入影像和檔案作為完整 URL（“http://…”或“https://…”）傳遞，因為 MCP 客戶端並非總是能正確處理本地檔案。

4. 🤗 Spaces 上的託管 MCP 伺服器：您可以在 Hugging Face Spaces 上免費釋出您的 Gradio 應用程式，這將允許您擁有一個免費託管的 MCP 伺服器。這是一個此類 Space 的示例：https://huggingface.co/spaces/abidlabs/mcp-tools

故障排除提示

1. 型別提示和文件字串：確保為您的函式提供型別提示和有效的文件字串。文件字串應包含帶有縮排引數名稱的“Args:”塊。

2. 字串輸入：如有疑問，請將輸入引數接受為 str 並在函式內部將其轉換為所需型別。

3. SSE 支援：某些 MCP 主機不支援基於 SSE 的 MCP 伺服器。在這些情況下，您可以使用 mcp-remote

   已複製

   {
     "mcpServers": {
       "gradio": {
         "command": "npx",
         "args": [
           "mcp-remote",
           "http://your-server:port/gradio_api/mcp/sse"
         ]
       }
     }
   }

4. 重啟：如果遇到連線問題，請嘗試重啟您的 MCP 客戶端和 MCP 伺服器。

分享您的 MCP 伺服器

您可以透過將 Gradio 應用程式釋出到 Hugging Face Spaces 來共享您的 MCP 伺服器。下面的影片展示瞭如何建立 Hugging Face Space。

現在，您可以透過共享您的 Hugging Face Space 來與他人共享您的 MCP 伺服器。

結論

Gradio 與 MCP 的整合提供了進入 MCP 生態系統的便捷入口。透過利用 Gradio 的簡潔性並新增 MCP 的標準化，開發人員可以用最少的程式碼快速建立既適合人類又適合 AI 使用的工具。

隨著本課程的深入，我們將探索更復雜的 MCP 實現，但 Gradio 為理解和試驗該協議提供了一個很好的起點。

在下一單元中，我們將深入研究 MCP 應用程式的構建，重點關注開發環境設定、SDK 探索以及更高階的 MCP 伺服器和客戶端的實現。