Gradio as an MCP Client

In the previous section, we explored how to create an MCP Server using Gradio and connect to it using an MCP Client. In this section, we're going to explore how to use Gradio as an MCP Client to connect to an MCP Server.

上一节我们探讨了如何用 Gradio 创建 MCP Server，并用 MCP Client 连接它。本节我们来看如何把 Gradio 当作 MCP Client 去连接 MCP Server。

TIP

Gradio is best suited to the creation of UI clients and MCP servers, but it is also possible to use it as an MCP Client and expose that as a UI.

Gradio 最适合用来搭建界面类客户端和 MCP 服务端，不过也可以用它充当 MCP 客户端，并把该客户端以界面形式暴露出来。

We'll connect to an MCP server similar to the one we created in the previous section but with additional features, and use it to answer questions.

我们要连接一个与上一节类似、但功能更多的 MCP 服务端，并用它来回答问题。

MCP Client in Gradio

Connect to an example MCP Server

Let's connect to an example MCP Server that is already running on Hugging Face. We'll use this one for this example. It's a space that contains a collection of MCP tools.

我们先连接一个已经在 Hugging Face 上运行的示例 MCP Server。本例使用这一个（https://huggingface.co/spaces/abidlabs/mcp-tool-http），它是一个包含一组 MCP 工具的 Space。

from smolagents.mcp_client import MCPClient

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

Output

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.

Connect to the MCP Server from Gradio

Great, now that you've connected to an example MCP Server. Now, you need to use it in an example application.

很好，你已经连上了一个示例 MCP Server。接下来需要在示例应用里使用它。

First, we need to install the smolagents, Gradio and mcp-client libraries, if we haven't already:

首先安装 smolagents、Gradio 和 mcp-client 这几个库（如果还没装）：

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

Now, we can import the necessary libraries and create a simple Gradio interface that uses the MCP Client to connect to the MCP Server.

现在可以导入所需的库，并创建一个简单的 Gradio 界面，用 MCP Client 连接 MCP Server。

import gradio as gr
import os

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

Next, we'll connect to the MCP Server and get the tools that we can use to answer questions.

接下来我们连接 MCP Server，并取得可以用来回答问题的工具。

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

Now that we have the tools, we can create a simple agent that uses them to answer questions. We'll just use a simple InferenceClientModel and the default model from smolagents for now.

有了工具之后，就可以创建一个简单的智能体来用它们回答问题。这里我们先用一个简单的 InferenceClientModel，以及 smolagents 的默认模型。

It is important to pass your api_key to the InferenceClientModel. You can access the token from your huggingface account. check here., and set the access token with the environment variable HF_TOKEN.

把 api_key 传给 InferenceClientModel 很重要。你可以在自己的 Hugging Face 账号中获取 token（参见 https://huggingface.co/docs/hub/en/security-tokens），并通过环境变量 HF_TOKEN 设置访问令牌。

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

Now, we can create a simple Gradio interface that uses the agent to answer questions.

现在可以创建一个简单的 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()

And that's it! We've created a simple Gradio interface that uses the MCP Client to connect to the MCP Server and answer questions.

就这样！我们创建了一个简单的 Gradio 界面，用 MCP Client 连接 MCP Server 并回答问题。

Complete Example

Here's the complete example of the usage of an MCP Client in Gradio:

下面是 Gradio 中使用 MCP Client 的完整示例：

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", "transport": "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()

You'll notice that we're closing the MCP Client in the finally block. This is important because the MCP Client is a long-lived object that needs to be closed when the program exits.

你会注意到我们在 finally 块里关闭了 MCP Client。这很重要，因为 MCP Client 是长生命周期对象，需要在程序退出时关闭。

Deploying to Hugging Face Spaces

To make your server available to others, you can deploy it to Hugging Face Spaces, just like we did in the previous section. To deploy your Gradio MCP client to Hugging Face Spaces:

若要让别人也能访问，你可以像上一节那样把它部署到 Hugging Face Spaces。要把 Gradio MCP 客户端部署到 Hugging Face Spaces：

1. Create a new Space on Hugging Face:
   • Go to huggingface.co/spaces
   • Click "Create new Space"
   • Choose "Gradio" as the SDK
   • Name your space (e.g., "mcp-client")

1. 在 Hugging Face 上创建一个新的 Space：进入 huggingface.co/spaces；点击「Create new Space」；SDK 选择「Gradio」；给 Space 起个名字（例如「mcp-client」）。

2. Update MCP Server URL in the code:

2. 在代码中更新 MCP 服务端的地址：

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

3. Create a requirements.txt file:

3. 创建 requirements.txt 文件：

gradio[mcp]
smolagents[mcp]

4. Push your code to the Space:

4. 把代码推送到该 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

Note: While adding remote origin, Refer to password-git-deprecation for adding with AccessToken.

注意：添加 remote origin 时，添加 AccessToken 的方式请参考 password-git-deprecation（https://huggingface.co/blog/password-git-deprecation）。

Conclusion

In this section, we've explored how to use Gradio as an MCP Client to connect to an MCP Server. We've also seen how to deploy the MCP Client in Hugging Face Spaces.

本节我们探讨了如何把 Gradio 当作 MCP Client 连接 MCP Server，也看到了如何在 Hugging Face Spaces 中部署这个 MCP 客户端。