Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / 101-course /pr_4 /en /chapter3 /8.html

rtrm

about 1 month ago

download

raw

36.3 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"MCP Servers in Gradio","local":"mcp-servers-in-gradio","sections":[{"title":"Introduction to Gradio MCP Integration","local":"introduction-to-gradio-mcp-integration","sections":[],"depth":2},{"title":"Setting Up the Project","local":"setting-up-the-project","sections":[],"depth":2},{"title":"Creating the Server","local":"creating-the-server","sections":[],"depth":2},{"title":"Understanding the Code","local":"understanding-the-code","sections":[],"depth":2},{"title":"Running the Server","local":"running-the-server","sections":[],"depth":2},{"title":"Testing the Server","local":"testing-the-server","sections":[],"depth":2},{"title":"Troubleshooting Tips","local":"troubleshooting-tips","sections":[],"depth":2},{"title":"Deploying to Hugging Face Spaces","local":"deploying-to-hugging-face-spaces","sections":[],"depth":2},{"title":"Next Steps","local":"next-steps","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/101-course/pr_4/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/entry/start.b6742992.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/scheduler.1d51f4c0.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/singletons.023d1c68.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/index.fa8592cf.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/paths.daa2f795.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/entry/app.8b986792.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/index.fda43871.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/nodes/0.b5fb3b56.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/nodes/25.13b705cc.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/CodeBlock.16130beb.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/getInferenceSnippets.58a43ad0.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"MCP Servers in Gradio","local":"mcp-servers-in-gradio","sections":[{"title":"Introduction to Gradio MCP Integration","local":"introduction-to-gradio-mcp-integration","sections":[],"depth":2},{"title":"Setting Up the Project","local":"setting-up-the-project","sections":[],"depth":2},{"title":"Creating the Server","local":"creating-the-server","sections":[],"depth":2},{"title":"Understanding the Code","local":"understanding-the-code","sections":[],"depth":2},{"title":"Running the Server","local":"running-the-server","sections":[],"depth":2},{"title":"Testing the Server","local":"testing-the-server","sections":[],"depth":2},{"title":"Troubleshooting Tips","local":"troubleshooting-tips","sections":[],"depth":2},{"title":"Deploying to Hugging Face Spaces","local":"deploying-to-hugging-face-spaces","sections":[],"depth":2},{"title":"Next Steps","local":"next-steps","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="mcp-servers-in-gradio" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#mcp-servers-in-gradio"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>MCP Servers in Gradio</span></h1> <p data-svelte-h="svelte-15g2s94">In this section, we’ll create our sentiment analysis MCP server using Gradio. This server will expose a sentiment analysis tool that can be used by both human users through a web interface and AI models through the MCP protocol.</p> <h2 class="relative group"><a id="introduction-to-gradio-mcp-integration" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#introduction-to-gradio-mcp-integration"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Introduction to Gradio MCP Integration</span></h2> <p data-svelte-h="svelte-1yi0ix">Gradio provides a straightforward way to create MCP servers by automatically converting your Python functions into MCP tools. When you set <code>mcp_server=True</code> in <code>launch()</code>, Gradio:</p> <ol data-svelte-h="svelte-g4mq16"><li>Automatically converts your functions into MCP Tools</li> <li>Maps input components to tool argument schemas</li> <li>Determines response formats from output components</li> <li>Sets up JSON-RPC over HTTP+SSE for client-server communication</li> <li>Creates both a web interface and an MCP server endpoint</li></ol> <h2 class="relative group"><a id="setting-up-the-project" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#setting-up-the-project"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Setting Up the Project</span></h2> <p data-svelte-h="svelte-mmri3o">First, let’s create a new directory for our project and set up the required dependencies:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-built_in">mkdir</span> mcp-sentiment
	<span class="hljs-built_in">cd</span> mcp-sentiment
	python -m venv venv
	<span class="hljs-built_in">source</span> venv/bin/activate <span class="hljs-comment"># On Windows: venv\Scripts\activate</span>
	pip install <span class="hljs-string">"gradio[mcp]"</span> textblob<!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="creating-the-server" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#creating-the-server"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Creating the Server</span></h2> <blockquote data-svelte-h="svelte-jocz8i"><p>Hugging face spaces needs an app.py file to build the space. So the name of the python file has to be app.py</p></blockquote> <p data-svelte-h="svelte-viak6g">Create a new file called <code>app.py</code> with the following code:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> json
	<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
	<span class="hljs-keyword">from</span> textblob <span class="hljs-keyword">import</span> TextBlob

	<span class="hljs-keyword">def</span> <span class="hljs-title function_">sentiment_analysis</span>(<span class="hljs-params">text: <span class="hljs-built_in">str</span></span>) -> <span class="hljs-built_in">str</span>:
	<span class="hljs-string">"""
	Analyze the sentiment of the given text.

	Args:
	text (str): The text to analyze

	Returns:
	str: A JSON string containing polarity, subjectivity, and assessment
	"""</span>
	blob = TextBlob(text)
	sentiment = blob.sentiment

	result = {
	<span class="hljs-string">"polarity"</span>: <span class="hljs-built_in">round</span>(sentiment.polarity, <span class="hljs-number">2</span>), <span class="hljs-comment"># -1 (negative) to 1 (positive)</span>
	<span class="hljs-string">"subjectivity"</span>: <span class="hljs-built_in">round</span>(sentiment.subjectivity, <span class="hljs-number">2</span>), <span class="hljs-comment"># 0 (objective) to 1 (subjective)</span>
	<span class="hljs-string">"assessment"</span>: <span class="hljs-string">"positive"</span> <span class="hljs-keyword">if</span> sentiment.polarity > <span class="hljs-number">0</span> <span class="hljs-keyword">else</span> <span class="hljs-string">"negative"</span> <span class="hljs-keyword">if</span> sentiment.polarity < <span class="hljs-number">0</span> <span class="hljs-keyword">else</span> <span class="hljs-string">"neutral"</span>
	}

	<span class="hljs-keyword">return</span> json.dumps(result)

	<span class="hljs-comment"># Create the Gradio interface</span>
	demo = gr.Interface(
	fn=sentiment_analysis,
	inputs=gr.Textbox(placeholder=<span class="hljs-string">"Enter text to analyze..."</span>),
	outputs=gr.Textbox(), <span class="hljs-comment"># Changed from gr.JSON() to gr.Textbox()</span>
	title=<span class="hljs-string">"Text Sentiment Analysis"</span>,
	description=<span class="hljs-string">"Analyze the sentiment of text using TextBlob"</span>
	)

	<span class="hljs-comment"># Launch the interface and MCP server</span>
	<span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">"__main__"</span>:
	demo.launch(mcp_server=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="understanding-the-code" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#understanding-the-code"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Understanding the Code</span></h2> <p data-svelte-h="svelte-ccttqs">Let’s break down the key components:</p> <ol><li data-svelte-h="svelte-1r6ud1j"><p><strong>Function Definition</strong>:</p> <ul><li>The <code>sentiment_analysis</code> function takes a text input and returns a dictionary</li> <li>It uses TextBlob to analyze the sentiment</li> <li>The docstring is crucial as it helps Gradio generate the MCP tool schema</li> <li>Type hints (<code>str</code> and <code>dict</code>) help define the input/output schema</li></ul></li> <li data-svelte-h="svelte-1zxric"><p><strong>Gradio Interface</strong>:</p> <ul><li><code>gr.Interface</code> creates both the web UI and MCP server</li> <li>The function is exposed as an MCP tool automatically</li> <li>Input and output components define the tool’s schema</li> <li>The JSON output component ensures proper serialization</li></ul></li> <li><p data-svelte-h="svelte-9494xm"><strong>MCP Server</strong>:</p> <ul><li data-svelte-h="svelte-1habxzw">Setting <code>mcp_server=True</code> enables the MCP server</li> <li data-svelte-h="svelte-hwrhz1">The server will be available at <code>http://localhost:7860/gradio_api/mcp/sse</code></li> <li>You can also enable it using the environment variable:
	<div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-built_in">export</span> GRADIO_MCP_SERVER=True<!-- HTML_TAG_END --></pre></div></li></ul></li></ol> <h2 class="relative group"><a id="running-the-server" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#running-the-server"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Running the Server</span></h2> <p data-svelte-h="svelte-tq7guq">Start the server by running:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->python app.py<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-16j4roj">You should see output indicating that both the web interface and MCP server are running. The web interface will be available at <code>http://localhost:7860</code>, and the MCP server at <code>http://localhost:7860/gradio_api/mcp/sse</code>.</p> <h2 class="relative group"><a id="testing-the-server" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#testing-the-server"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Testing the Server</span></h2> <p data-svelte-h="svelte-1hexqja">You can test the server in two ways:</p> <ol data-svelte-h="svelte-1prsps9"><li><p><strong>Web Interface</strong>:</p> <ul><li>Open <code>http://localhost:7860</code> in your browser</li> <li>Enter some text and click “Submit”</li> <li>You should see the sentiment analysis results</li></ul></li> <li><p><strong>MCP Schema</strong>:</p> <ul><li>Visit <code>http://localhost:7860/gradio_api/mcp/schema</code></li> <li>This shows the MCP tool schema that clients will use</li> <li>You can also find this in the “View API” link in the footer of your Gradio app</li></ul></li></ol> <h2 class="relative group"><a id="troubleshooting-tips" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#troubleshooting-tips"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Troubleshooting Tips</span></h2> <ol><li data-svelte-h="svelte-1kjwfqe"><p><strong>Type Hints and Docstrings</strong>:</p> <ul><li>Always provide type hints for your function parameters and return values</li> <li>Include a docstring with an “Args:” block for each parameter</li> <li>This helps Gradio generate accurate MCP tool schemas</li></ul></li> <li data-svelte-h="svelte-mxigd7"><p><strong>String Inputs</strong>:</p> <ul><li>When in doubt, accept input arguments as <code>str</code></li> <li>Convert them to the desired type inside the function</li> <li>This provides better compatibility with MCP clients</li></ul></li> <li><p data-svelte-h="svelte-pauept"><strong>SSE Support</strong>:</p> <ul><li data-svelte-h="svelte-18matxo">Some MCP clients don’t support SSE-based MCP Servers</li> <li>In those cases, use <code data-svelte-h="svelte-32a5p1">mcp-remote</code>:
	<div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-punctuation">{</span>
	<span class="hljs-attr">"mcpServers"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
	<span class="hljs-attr">"gradio"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
	<span class="hljs-attr">"command"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"npx"</span><span class="hljs-punctuation">,</span>
	<span class="hljs-attr">"args"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
	<span class="hljs-string">"mcp-remote"</span><span class="hljs-punctuation">,</span>
	<span class="hljs-string">"http://localhost:7860/gradio_api/mcp/sse"</span>
	<span class="hljs-punctuation">]</span>
	<span class="hljs-punctuation">}</span>
	<span class="hljs-punctuation">}</span>
	<span class="hljs-punctuation">}</span><!-- HTML_TAG_END --></pre></div></li></ul></li> <li data-svelte-h="svelte-46q023"><p><strong>Connection Issues</strong>:</p> <ul><li>If you encounter connection problems, try restarting both the client and server</li> <li>Check that the server is running and accessible</li> <li>Verify that the MCP schema is available at the expected URL</li></ul></li></ol> <h2 class="relative group"><a id="deploying-to-hugging-face-spaces" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#deploying-to-hugging-face-spaces"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Deploying to Hugging Face Spaces</span></h2> <p data-svelte-h="svelte-1itkhgv">To make your server available to others, you can deploy it to Hugging Face Spaces:</p> <ol data-svelte-h="svelte-1thxdu2"><li><p>Create a new Space on Hugging Face:</p> <ul><li>Go to huggingface.co/spaces</li> <li>Click “Create new Space”</li> <li>Choose “Gradio” as the SDK</li> <li>Name your space (e.g., “mcp-sentiment”)</li></ul></li> <li><p>Create a <code>requirements.txt</code> file:</p></li></ol> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->gradio[mcp]
	textblob<!-- HTML_TAG_END --></pre></div> <ol start="3" data-svelte-h="svelte-ok99j"><li>Push your code to the Space:</li></ol> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->git init
	git add app.py requirements.txt
	git commit -m <span class="hljs-string">"Initial commit"</span>
	git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/mcp-sentiment
	git push -u origin main<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-rjtj0p">Your MCP server will now be available at:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->https:<span class="hljs-regexp">//</span>YOUR_USERNAME-mcp-sentiment.hf.space<span class="hljs-regexp">/gradio_api/m</span>cp/sse<!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="next-steps" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#next-steps"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Next Steps</span></h2> <p data-svelte-h="svelte-p1bgao">Now that we have our MCP server running, we’ll create clients to interact with it. In the next sections, we’ll:</p> <ol data-svelte-h="svelte-6w66tp"><li>Create a HuggingFace.js-based client inspired by Tiny Agents</li> <li>Implement a SmolAgents-based Python client</li> <li>Test both clients with our deployed server</li></ol> <p data-svelte-h="svelte-19wsvhm">Let’s move on to building our first client!</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/101-course/blob/main/chapters/en/chapter3/8.mdx" target="_blank"><span data-svelte-h="svelte-1kd6by1"><</span> <span data-svelte-h="svelte-x0xyl0">></span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_kib1ob = {
	assets: "/docs/101-course/pr_4/en",
	base: "/docs/101-course/pr_4/en",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/101-course/pr_4/en/_app/immutable/entry/start.b6742992.js"),
	import("/docs/101-course/pr_4/en/_app/immutable/entry/app.8b986792.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 25],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 36.3 kB
Xet hash:: def21d76d93849a13b7f06e90c1bd58b41c665a967b926f00ce8b6776fcd627f

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.