構建 MCP 客戶端

在本節中，我們將建立可以使用不同程式語言與 MCP 伺服器互動的客戶端。我們將實現一個使用 HuggingFace.js 的 JavaScript 客戶端和一個使用 smolagents 的 Python 客戶端。

配置 MCP 客戶端

有效部署 MCP 伺服器和客戶端需要適當的配置。MCP 規範仍在不斷發展，因此配置方法也會隨之演變。我們將重點介紹當前的配置最佳實踐。

MCP 配置檔案

MCP 主機使用配置檔案來管理伺服器連線。這些檔案定義了哪些伺服器可用以及如何連線到它們。

這些配置檔案非常簡單，易於理解，並且在主要的 MCP 主機上保持一致。

mcp.json 結構

MCP 的標準配置檔名為 mcp.json。以下是基本結構

{
  "servers": [
    {
      "name": "MCP Server",
      "transport": {
        "type": "sse",
        "url": "https://:7860/gradio_api/mcp/sse"
      }
    }
  ]
}

在此示例中，我們配置了一個伺服器，它使用 SSE 傳輸，連線到在埠 7860 上執行的本地 Gradio 伺服器。

HTTP+SSE 傳輸配置

對於使用 HTTP+SSE 傳輸的遠端伺服器，配置包括伺服器 URL

{
  "servers": [
    {
      "name": "Remote MCP Server",
      "transport": {
        "type": "sse",
        "url": "https://example.com/gradio_api/mcp/sse"
      }
    }
  ]
}

此配置允許您的 UI 客戶端使用 MCP 協議與 Gradio MCP 伺服器通訊，從而實現前端和 MCP 服務之間的無縫整合。

配置 UI MCP 客戶端

在使用 Gradio MCP 伺服器時，您可以配置 UI 客戶端以使用 MCP 協議連線到伺服器。以下是設定方法

基本配置

建立一個名為 config.json 的新檔案，其中包含以下配置

{
  "mcpServers": {
    "mcp": {
      "url": "https://:7860/gradio_api/mcp/sse"
    }
  }
}

此配置允許您的 UI 客戶端使用 MCP 協議與 Gradio MCP 伺服器通訊，從而實現前端和 MCP 服務之間的無縫整合。

在 Cursor IDE 中配置 MCP 客戶端

Cursor 提供內建的 MCP 支援，允許您將已部署的 MCP 伺服器直接連線到您的開發環境。

配置

開啟 Cursor 設定 (Ctrl + Shift + J / Cmd + Shift + J) → MCP 選項卡 → 新增新的全域性 MCP 伺服器

macOS

{
  "mcpServers": {
    "sentiment-analysis": {
      "command": "npx",
      "args": [
        "-y", 
        "mcp-remote", 
        "https://YOURUSENAME-mcp-sentiment.hf.space/gradio_api/mcp/sse", 
        "--transport", 
        "sse-only"
      ]
    }
  }
}

Windows

{
  "mcpServers": {
    "sentiment-analysis": {
      "command": "cmd",
      "args": [
        "/c", 
        "npx", 
        "-y", 
        "mcp-remote", 
        "https://YOURUSENAME-mcp-sentiment.hf.space/gradio_api/mcp/sse", 
        "--transport", 
        "sse-only"
      ]
    }
  }
}

為什麼我們使用 mcp-remote

大多數 MCP 客戶端，包括 Cursor，目前只支援透過 stdio 傳輸的本地伺服器，尚不支援帶 OAuth 認證的遠端伺服器。mcp-remote 工具充當了一個橋接解決方案，它

• 在您的機器上本地執行
• 將來自 Cursor 的請求轉發到遠端 MCP 伺服器
• 使用熟悉的配置檔案格式

配置完成後，您可以要求 Cursor 使用您的情感分析工具來分析程式碼註釋、使用者反饋或拉取請求描述等任務。