构建 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 使用您的情感分析工具来分析代码注释、用户反馈或拉取请求描述等任务。