README.md

metadata

title: Demo MCP Server with Gradio
emoji: 😻
colorFrom: blue
colorTo: red
sdk: gradio
sdk_version: 5.40.0
app_file: app.py
pinned: false
short_description: Building a simple MCP Server with Gradio

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

Gradio MCP Demo

Notice that we have:

1. included a detailed docstring for our function, and
2. set mcp_server=True in .launch(). This is all that's needed for your Gradio app to serve as an MCP server!

Now, when you run this app, it will:

1. Start the regular Gradio web interface
2. Start the MCP server
3. Print the MCP server URL in the console

The MCP server will be accessible at: http://your-server:port/gradio_api/mcp/sse

Gradio automatically converts the letter_counter function into an MCP tool that can be used by LLMs. The docstring of the function and the type hints of arguments will be used to generate the description of the tool and its parameters. The name of the function will be used as the name of your tool.

Now, all you need to do is add this URL endpoint to your MCP Client (e.g. Claude Desktop, Cursor, or Cline), which typically means pasting this config in the settings:

{
  "mcpServers": {
    "gradio": {
      "url": "http://your-server:port/gradio_api/mcp/sse"
    }
  }
}

By the way, you can find the exact config to copy-paste by going to the "View API" link in the footer of your Gradio app, and then clicking on "MCP"

References

• Building an MCP Server with Gradio
  • MCP Tools for Gradio UI
  • MCP only Tools that aren't UI evented.
  • Gradio with FastMCP
• The MCP protocol is still in its infancy and you might see issues connecting to an MCP Server that you've built. We generally recommend using the MCP Inspector Tool to try connecting and debugging your MCP Server.
• Spaces As MCP Servers
• Docker Spaces