Hugging Face 的 LOGO

MCP 课程文档

Gradio MCP 集成

Hugging Face's logo
加入 Hugging Face 社区

并获得增强的文档体验

开始使用

Gradio MCP 集成

我们现在已经探索了 MCP 协议的核心概念以及如何实现 MCP 服务器和客户端。在本节中，我们将通过使用 Gradio 创建 MCP 服务器来简化操作！

Gradio 是一个流行的 Python 库，用于快速为机器学习模型创建可定制的 Web 界面。

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

应用程序本身仍可访问，其外观如下：

Gradio MCP Server

幕后运作原理

当您在 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

  1. 文件处理：服务器自动处理文件数据转换，包括

    • 将 base64 编码的字符串转换为文件数据
    • 处理图像文件并以正确的格式返回
    • 管理临时文件存储

    强烈建议将输入图像和文件作为完整 URL（“http://…”或“https://…”）传递，因为 MCP 客户端并非总是能正确处理本地文件。

  2. 🤗 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 服务器和客户端的实现。

< > 在 GitHub 上更新

←MCP 客户端 单元 1 回顾→