Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / mcp-course /pr_221 /en /unit2 /introduction.html

HuggingFaceDocBuilder

2 months ago

download

raw

18.5 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Building an End-to-End MCP Application","local":"building-an-end-to-end-mcp-application","sections":[{"title":"What You’ll Learn","local":"what-youll-learn","sections":[],"depth":2},{"title":"Prerequisites","local":"prerequisites","sections":[],"depth":2},{"title":"Our End-to-End Project","local":"our-end-to-end-project","sections":[{"title":"Server Side","local":"server-side","sections":[],"depth":3},{"title":"Client Side","local":"client-side","sections":[],"depth":3},{"title":"Deployment","local":"deployment","sections":[],"depth":3}],"depth":2},{"title":"Let’s Get Started!","local":"lets-get-started","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/mcp-course/pr_221/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/entry/start.dc55593b.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/scheduler.4048030c.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/singletons.213fc73e.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/index.dd3f5310.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/paths.e68d3b81.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/entry/app.f1430c51.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/preload-helper.ccf7f2fe.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/index.f47d7c49.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/nodes/0.654a0b07.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/nodes/20.0599a4ca.js">
	<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.000481a1.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Building an End-to-End MCP Application","local":"building-an-end-to-end-mcp-application","sections":[{"title":"What You’ll Learn","local":"what-youll-learn","sections":[],"depth":2},{"title":"Prerequisites","local":"prerequisites","sections":[],"depth":2},{"title":"Our End-to-End Project","local":"our-end-to-end-project","sections":[{"title":"Server Side","local":"server-side","sections":[],"depth":3},{"title":"Client Side","local":"client-side","sections":[],"depth":3},{"title":"Deployment","local":"deployment","sections":[],"depth":3}],"depth":2},{"title":"Let’s Get Started!","local":"lets-get-started","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" 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></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <h1 class="relative group"><a id="building-an-end-to-end-mcp-application" 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="#building-an-end-to-end-mcp-application"><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>Building an End-to-End MCP Application</span></h1> <p data-svelte-h="svelte-fl8jwt">Welcome to Unit 2 of the MCP Course!</p> <p data-svelte-h="svelte-eimw7d">In this unit, we’ll build a complete MCP application from scratch, focusing on creating a server with Gradio and connecting it with multiple clients. This hands-on approach will give you practical experience with the entire MCP ecosystem.</p> <blockquote class="tip" data-svelte-h="svelte-1ge8kny"><p>In this unit, we’re going to build a simple MCP server and client using Gradio and the HuggingFace hub. In the next unit, we’ll build a more complex server that tackles a real-world use case.</p></blockquote> <h2 class="relative group"><a id="what-youll-learn" 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="#what-youll-learn"><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>What You’ll Learn</span></h2> <p data-svelte-h="svelte-1jpq92a">In this unit, you will:</p> <ul data-svelte-h="svelte-19t3fpk"><li>Create an MCP Server using Gradio’s built-in MCP support</li> <li>Build a sentiment analysis tool that can be used by AI models</li> <li>Connect to the server using different client implementations:
	<ul><li>A HuggingFace.js-based client</li> <li>A SmolAgents-based client for Python</li></ul></li> <li>Deploy your MCP Server to Hugging Face Spaces</li> <li>Test and debug the complete system</li></ul> <p data-svelte-h="svelte-3rihbc">By the end of this unit, you’ll have a working MCP application that demonstrates the power and flexibility of the protocol.</p> <h2 class="relative group"><a id="prerequisites" 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="#prerequisites"><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>Prerequisites</span></h2> <p data-svelte-h="svelte-1skzfnf">Before proceeding with this unit, make sure you:</p> <ul data-svelte-h="svelte-1ogr223"><li>Have completed Unit 1 or have a basic understanding of MCP concepts</li> <li>Are comfortable with both Python and JavaScript/TypeScript</li> <li>Have a basic understanding of APIs and client-server architecture</li> <li>Have a development environment with:
	<ul><li>Python 3.10+</li> <li>Node.js 18+</li> <li>A Hugging Face account (for deployment)</li></ul></li></ul> <h2 class="relative group"><a id="our-end-to-end-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="#our-end-to-end-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>Our End-to-End Project</span></h2> <p data-svelte-h="svelte-1iztjl7">We’ll build a sentiment analysis application that consists of three main parts: the server, the client, and the deployment.</p> <p data-svelte-h="svelte-19ce6kt"><img src="https://huggingface.co/datasets/mcp-course/images/resolve/main/unit2/1.png" alt="sentiment analysis application"></p> <h3 class="relative group"><a id="server-side" 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="#server-side"><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>Server Side</span></h3> <ul data-svelte-h="svelte-19zp51p"><li>Uses Gradio to create a web interface and MCP server via <code>gr.Interface</code></li> <li>Implements a sentiment analysis tool using TextBlob</li> <li>Exposes the tool through both HTTP and MCP protocols</li></ul> <h3 class="relative group"><a id="client-side" 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="#client-side"><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>Client Side</span></h3> <ul data-svelte-h="svelte-pcs8tp"><li>Implements a HuggingFace.js client</li> <li>Or, creates a smolagents Python client</li> <li>Demonstrates how to use the same server with different client implementations</li></ul> <h3 class="relative group"><a id="deployment" 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="#deployment"><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>Deployment</span></h3> <ul data-svelte-h="svelte-3bfj4k"><li>Deploys the server to Hugging Face Spaces</li> <li>Configures the clients to work with the deployed server</li></ul> <h2 class="relative group"><a id="lets-get-started" 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="#lets-get-started"><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>Let’s Get Started!</span></h2> <p data-svelte-h="svelte-t1gvgw">Are you ready to build your first end-to-end MCP application? Let’s begin by setting up the development environment and creating our Gradio MCP server.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/mcp-course/blob/main/units/en/unit2/introduction.mdx" target="_blank"><svg class="mr-1" 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="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_1xfzitx = {
	assets: "/docs/mcp-course/pr_221/en",
	base: "/docs/mcp-course/pr_221/en",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/mcp-course/pr_221/en/_app/immutable/entry/start.dc55593b.js"),
	import("/docs/mcp-course/pr_221/en/_app/immutable/entry/app.f1430c51.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 20],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 18.5 kB
Xet hash:: 1e9726bec303ea62980ec6a643a1689b62e08c7580780ec2921541188807f9ef

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