Simple app v1

README.md

@@ -1,5 +1,5 @@
 ---
-title: Gradio Mcp Demo
+title: Gradio MCP Demo
 emoji: 😻
 colorFrom: blue
 colorTo: red
@@ -11,3 +11,45 @@ short_description: Building an 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:
+
+```json
+{
+  "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"
+![Image: View API MCP link](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/view-api-mcp.png)
+
+## References
+
+- [Building an MCP Server with Gradio](https://www.gradio.app/guides/building-mcp-server-with-gradio)
+  - MCP Tools for Gradio UI
+  - [MCP only Tools](https://www.gradio.app/guides/building-mcp-server-with-gradio#adding-mcp-only-tools) that aren't UI evented.
+  - [Gradio with FastMCP](https://www.gradio.app/guides/building-mcp-server-with-gradio#gradio-with-fast-mcp)
+- 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](https://github.com/modelcontextprotocol/inspector) to try connecting and debugging your MCP Server.
+- [Spaces As MCP Servers](https://huggingface.co/docs/hub/spaces-mcp-servers)
+- [Docker Spaces](https://huggingface.co/docs/hub/spaces-sdks-docker)

app.py

@@ -0,0 +1,28 @@
+import gradio as gr
+
+def letter_counter(word, letter):
+    """
+    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:
+        str: A message indicating how many times the letter appears
+    """
+    word = word.lower()
+    letter = letter.lower()
+    count = word.count(letter)
+    return count
+
+demo = gr.Interface(
+    fn=letter_counter,
+    inputs=[gr.Textbox("strawberry"), gr.Textbox("r")],
+    outputs=[gr.Number()],
+    title="Letter Counter",
+    description="Enter text and a letter to count how many times the letter appears in the text."
+)
+
+if __name__ == "__main__":
+    demo.launch(mcp_server=True)

requirements.txt

@@ -0,0 +1 @@
+gradio[mcp]=5.40.0