Gradio 作为 MCP 客户端

在上一节中，我们探讨了如何使用 Gradio 创建 MCP 服务器并使用 MCP 客户端连接到它。在本节中，我们将探讨如何使用 Gradio 作为 MCP 客户端连接到 MCP 服务器。

Gradio 最适合创建 UI 客户端和 MCP 服务器，但它也可以用作 MCP 客户端并将其暴露为 UI。

我们将连接到一个类似于我们在上一节中创建的 MCP 服务器，但它具有额外的功能，并使用它来回答问题。

Gradio 中的 MCP 客户端

连接到示例 MCP 服务器

让我们连接到 Hugging Face 上已运行的示例 MCP 服务器。我们将使用这个作为示例。它是一个包含 MCP 工具集合的 Space。

from smolagents.mcp_client import MCPClient

with MCPClient(
    {"url": "https://abidlabs-mcp-tool-http.hf.space/gradio_api/mcp/sse"}
) as tools:
    # Tools from the remote server are available
    print("\n".join(f"{t.name}: {t.description}" for t in tools))

输出


prime_factors: Compute the prime factorization of a positive integer.
generate_cheetah_image: Generate a cheetah image.
image_orientation: Returns whether image is portrait or landscape.
sepia: Apply a sepia filter to the input image.

从 Gradio 连接到 MCP 服务器

很好，您已经连接到示例 MCP 服务器。现在，您需要在示例应用程序中使用它。

首先，我们需要安装 smolagents、Gradio 和 mcp-client 库（如果尚未安装）

pip install "smolagents[mcp]" "gradio[mcp]" mcp fastmcp

现在，我们可以导入必要的库并创建一个简单的 Gradio 界面，该界面使用 MCP 客户端连接到 MCP 服务器。

import gradio as gr
import os

from mcp import StdioServerParameters
from smolagents import InferenceClientModel, CodeAgent, ToolCollection, MCPClient

接下来，我们将连接到 MCP 服务器并获取可用于回答问题的工具。

mcp_client = MCPClient(
    {"url": "https://abidlabs-mcp-tool-http.hf.space/gradio_api/mcp/sse"} # This is the MCP Client we created in the previous section
)
tools = mcp_client.get_tools()

现在我们有了工具，我们可以创建一个简单的智能体，它使用这些工具来回答问题。我们暂时只使用一个简单的 InferenceClientModel 和 smolagents 中的默认模型。

将您的 api_key 传递给 InferenceClientModel 非常重要。您可以从您的 huggingface 帐户访问该令牌。请在此处查看。并使用环境变量 HF_TOKEN 设置访问令牌。

model = InferenceClientModel(token=os.getenv("HF_TOKEN"))
agent = CodeAgent(tools=[*tools], model=model)

现在，我们可以创建一个简单的 Gradio 界面，该界面使用该智能体来回答问题。

demo = gr.ChatInterface(
    fn=lambda message, history: str(agent.run(message)),
    type="messages",
    examples=["Prime factorization of 68"],
    title="Agent with MCP Tools",
    description="This is a simple agent that uses MCP tools to answer questions."
)

demo.launch()

就这样！我们创建了一个简单的 Gradio 界面，该界面使用 MCP 客户端连接到 MCP 服务器并回答问题。

完整示例

这是在 Gradio 中使用 MCP 客户端的完整示例

import gradio as gr
import os

from smolagents import InferenceClientModel, CodeAgent, MCPClient


try:
    mcp_client = MCPClient(
        {"url": "https://abidlabs-mcp-tool-http.hf.space/gradio_api/mcp/sse"}
    )
    tools = mcp_client.get_tools()

    model = InferenceClientModel(token=os.getenv("HUGGINGFACE_API_TOKEN"))
    agent = CodeAgent(tools=[*tools], model=model, additional_authorized_imports=["json", "ast", "urllib", "base64"])

    demo = gr.ChatInterface(
        fn=lambda message, history: str(agent.run(message)),
        type="messages",
        examples=["Analyze the sentiment of the following text 'This is awesome'"],
        title="Agent with MCP Tools",
        description="This is a simple agent that uses MCP tools to answer questions.",
    )

    demo.launch()
finally:
    mcp_client.disconnect()

您会注意到我们正在 finally 块中关闭 MCP 客户端。这很重要，因为 MCP 客户端是一个长期存在的对象，当程序退出时需要关闭它。

部署到 Hugging Face Spaces

要让您的服务器可供他人使用，您可以将其部署到 Hugging Face Spaces，就像我们在上一节中做的那样。要将您的 Gradio MCP 客户端部署到 Hugging Face Spaces，请执行以下操作：

在 Hugging Face 上创建一个新 Space
- 前往 huggingface.co/spaces
- 点击“Create new Space”（创建新 Space）
- 选择“Gradio”作为 SDK
- 命名您的 Space（例如，“mcp-client”）
更新代码中的 MCP 服务器 URL

mcp_client = MCPClient(
    {"url": "https://abidlabs-mcp-tool-http.hf.space/gradio_api/mcp/sse"}
)

创建 requirements.txt 文件

gradio[mcp]
smolagents[mcp]

将您的代码推送到 Space

git init
git add app.py requirements.txt
git commit -m "Initial commit"
git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/mcp-client
git push -u origin main

注意：添加远程源时，请参阅password-git-deprecation以了解如何使用 AccessToken 进行添加。

结论

在本节中，我们探讨了如何使用 Gradio 作为 MCP 客户端连接到 MCP 服务器。我们还了解了如何将 MCP 客户端部署到 Hugging Face Spaces。

< > 在 GitHub 上更新