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.

We’ll connect to the MCP server we created in the previous section and use it to answer questions.

MCP Client in Gradio

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

pip install smolagents[mcp] gradio[mcp] mcp

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

import gradio as gr

from mcp.client.stdio import StdioServerParameters
from smolagents import ToolCollection, CodeAgent
from smolagents import CodeAgent, InferenceClientModel
from smolagents.mcp_client import MCPClient

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

mcp_client = MCPClient(
    {"url": "http://localhost:7860/gradio_api/mcp/sse"}
)
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.

model = InferenceClientModel()
agent = CodeAgent(tools=[*tools], model=model)

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

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.",
    messages=[],
)

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.

Complete Example

Here’s the complete example of the MCP Client in Gradio:

import gradio as gr

from mcp.client.stdio import StdioServerParameters
from smolagents import ToolCollection, CodeAgent
from smolagents import CodeAgent, InferenceClientModel
from smolagents.mcp_client import MCPClient


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

    model = InferenceClientModel()
    agent = CodeAgent(tools=[*tools], model=model)

    def call_agent(message, history):
        return str(agent.run(message))


    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.",
        messages=[],
    )

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

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.

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:

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”)

2. Create a requirements.txt file:

gradio[mcp]
smolagents[mcp]

3. Push your code to the Space:

git init
git add server.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

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.