import{s as xn,o as Bn,n as Es}from"../chunks/scheduler.008aaf19.js";import{S as En,i as kn,e as o,s as l,c as y,h as Qn,a as u,d as s,b as a,f as bn,g as f,j as c,k as ue,l as Pn,m as n,n as T,t as m,o as C,p as w}from"../chunks/index.7c7f75b2.js";import{C as x}from"../chunks/CodeBlock.027569b9.js";import{H as I,E as Hn}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.4f0ca956.js";import{H as qn,a as Bs}from"../chunks/HfOption.b44a1114.js";function Sn(B){let M,$="In Python, we use the <code>os</code> module to access environment variables:",h,J,i;return J=new x({props:{code:"aW1wb3J0JTIwb3MlMEElMEElMjMlMjBBY2Nlc3MlMjBlbnZpcm9ubWVudCUyMHZhcmlhYmxlcyUwQWdpdGh1Yl90b2tlbiUyMCUzRCUyMG9zLmVudmlyb24uZ2V0KCUyMkdJVEhVQl9UT0tFTiUyMiklMEFpZiUyMG5vdCUyMGdpdGh1Yl90b2tlbiUzQSUwQSUyMCUyMCUyMCUyMHJhaXNlJTIwVmFsdWVFcnJvciglMjJHSVRIVUJfVE9LRU4lMjBlbnZpcm9ubWVudCUyMHZhcmlhYmxlJTIwaXMlMjByZXF1aXJlZCUyMiklMEElMEElMjMlMjBVc2UlMjB0aGUlMjB0b2tlbiUyMGluJTIweW91ciUyMHNlcnZlciUyMGNvZGUlMEFkZWYlMjBtYWtlX2dpdGh1Yl9yZXF1ZXN0KCklM0ElMEElMjAlMjAlMjAlMjBoZWFkZXJzJTIwJTNEJTIwJTdCJTIyQXV0aG9yaXphdGlvbiUyMiUzQSUyMGYlMjJCZWFyZXIlMjAlN0JnaXRodWJfdG9rZW4lN0QlMjIlN0QlMEElMjAlMjAlMjAlMjAlMjMlMjAuLi4lMjByZXN0JTIwb2YlMjB5b3VyJTIwY29kZQ==",highlighted:`<span class="hljs-keyword">import</span> os

<span class="hljs-comment"># Access environment variables</span>
github_token = os.environ.get(<span class="hljs-string">&quot;GITHUB_TOKEN&quot;</span>)
<span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> github_token:
    <span class="hljs-keyword">raise</span> ValueError(<span class="hljs-string">&quot;GITHUB_TOKEN environment variable is required&quot;</span>)

<span class="hljs-comment"># Use the token in your server code</span>
<span class="hljs-keyword">def</span> <span class="hljs-title function_">make_github_request</span>():
    headers = {<span class="hljs-string">&quot;Authorization&quot;</span>: <span class="hljs-string">f&quot;Bearer <span class="hljs-subst">{github_token}</span>&quot;</span>}
    <span class="hljs-comment"># ... rest of your code</span>`,wrap:!1}}),{c(){M=o("p"),M.innerHTML=$,h=l(),y(J.$$.fragment)},l(p){M=u(p,"P",{"data-svelte-h":!0}),c(M)!=="svelte-8jwuh1"&&(M.innerHTML=$),h=a(p),f(J.$$.fragment,p)},m(p,U){n(p,M,U),n(p,h,U),T(J,p,U),i=!0},p:Es,i(p){i||(m(J.$$.fragment,p),i=!0)},o(p){C(J.$$.fragment,p),i=!1},d(p){p&&(s(M),s(h)),w(J,p)}}}function _n(B){let M,$="In JavaScript, we use the <code>process.env</code> object to access environment variables:",h,J,i;return J=new x({props:{code:"JTJGJTJGJTIwQWNjZXNzJTIwZW52aXJvbm1lbnQlMjB2YXJpYWJsZXMlMEFjb25zdCUyMGdpdGh1YlRva2VuJTIwJTNEJTIwcHJvY2Vzcy5lbnYuR0lUSFVCX1RPS0VOJTNCJTBBaWYlMjAoIWdpdGh1YlRva2VuKSUyMCU3QiUwQSUyMCUyMCUyMCUyMHRocm93JTIwbmV3JTIwRXJyb3IoJTIyR0lUSFVCX1RPS0VOJTIwZW52aXJvbm1lbnQlMjB2YXJpYWJsZSUyMGlzJTIwcmVxdWlyZWQlMjIpJTNCJTBBJTdEJTBBJTBBJTJGJTJGJTIwVXNlJTIwdGhlJTIwdG9rZW4lMjBpbiUyMHlvdXIlMjBzZXJ2ZXIlMjBjb2RlJTBBZnVuY3Rpb24lMjBtYWtlR2l0aHViUmVxdWVzdCgpJTIwJTdCJTBBJTIwJTIwJTIwJTIwY29uc3QlMjBoZWFkZXJzJTIwJTNEJTIwJTdCJTIwJTIyQXV0aG9yaXphdGlvbiUyMiUzQSUyMCU2MEJlYXJlciUyMCUyNCU3QmdpdGh1YlRva2VuJTdEJTYwJTIwJTdEJTNCJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwLi4uJTIwcmVzdCUyMG9mJTIweW91ciUyMGNvZGUlMEElN0Q=",highlighted:`<span class="hljs-comment">// Access environment variables</span>
<span class="hljs-keyword">const</span> githubToken = process.<span class="hljs-property">env</span>.<span class="hljs-property">GITHUB_TOKEN</span>;
<span class="hljs-keyword">if</span> (!githubToken) {
    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&quot;GITHUB_TOKEN environment variable is required&quot;</span>);
}

<span class="hljs-comment">// Use the token in your server code</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">makeGithubRequest</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">const</span> headers = { <span class="hljs-string">&quot;Authorization&quot;</span>: <span class="hljs-string">\`Bearer <span class="hljs-subst">\${githubToken}</span>\`</span> };
    <span class="hljs-comment">// ... rest of your code</span>
}`,wrap:!1}}),{c(){M=o("p"),M.innerHTML=$,h=l(),y(J.$$.fragment)},l(p){M=u(p,"P",{"data-svelte-h":!0}),c(M)!=="svelte-1554qq7"&&(M.innerHTML=$),h=a(p),f(J.$$.fragment,p)},m(p,U){n(p,M,U),n(p,h,U),T(J,p,U),i=!0},p:Es,i(p){i||(m(J.$$.fragment,p),i=!0)},o(p){C(J.$$.fragment,p),i=!1},d(p){p&&(s(M),s(h)),w(J,p)}}}function Gn(B){let M,$,h,J;return M=new Bs({props:{id:"env-variables",option:"python",$$slots:{default:[Sn]},$$scope:{ctx:B}}}),h=new Bs({props:{id:"env-variables",option:"javascript",$$slots:{default:[_n]},$$scope:{ctx:B}}}),{c(){y(M.$$.fragment),$=l(),y(h.$$.fragment)},l(i){f(M.$$.fragment,i),$=a(i),f(h.$$.fragment,i)},m(i,p){T(M,i,p),n(i,$,p),T(h,i,p),J=!0},p(i,p){const U={};p&2&&(U.$$scope={dirty:p,ctx:i}),M.$set(U);const d={};p&2&&(d.$$scope={dirty:p,ctx:i}),h.$set(d)},i(i){J||(m(M.$$.fragment,i),m(h.$$.fragment,i),J=!0)},o(i){C(M.$$.fragment,i),C(h.$$.fragment,i),J=!1},d(i){i&&s($),w(M,i),w(h,i)}}}function Zn(B){let M,$,h,J="Now, let’s create an agent configuration file <code>agent.json</code>.",i,p,U,d,G="In this configuration, we are using the <code>@playwright/mcp</code> MCP server. This is an MCP server that can control a browser with Playwright.",q,b,Q="Now you can run the agent:",v,k,E;return M=new I({props:{title:"Connecting to MCP Servers",local:"connecting-to-mcp-servers",headingTag:"h3"}}),p=new x({props:{code:"JTdCJTBBJTIwJTIwJTIwJTIwJTIybmFtZSUyMiUzQSUyMCUyMnBsYXl3cmlnaHQtYWdlbnQlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjJkZXNjcmlwdGlvbiUyMiUzQSUyMCUyMkFnZW50JTIwd2l0aCUyMFBsYXl3cmlnaHQlMjBNQ1AlMjBzZXJ2ZXIlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjJtb2RlbCUyMiUzQSUyMCUyMlF3ZW4lMkZRd2VuMi41LTcyQi1JbnN0cnVjdCUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMnByb3ZpZGVyJTIyJTNBJTIwJTIybmViaXVzJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIyc2VydmVycyUyMiUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMnR5cGUlMjIlM0ElMjAlMjJzdGRpbyUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMmNvbW1hbmQlMjIlM0ElMjAlMjJucHglMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJhcmdzJTIyJTNBJTIwJTVCJTIyJTQwcGxheXdyaWdodCUyRm1jcCU0MGxhdGVzdCUyMiU1RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCU1RCUwQSU3RA==",highlighted:`<span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;playwright-agent&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;description&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Agent with Playwright MCP server&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;model&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Qwen/Qwen2.5-72B-Instruct&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;provider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;nebius&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
        <span class="hljs-punctuation">{</span>
            <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;stdio&quot;</span><span class="hljs-punctuation">,</span>
            <span class="hljs-attr">&quot;command&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;npx&quot;</span><span class="hljs-punctuation">,</span>
            <span class="hljs-attr">&quot;args&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;@playwright/mcp@latest&quot;</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),k=new x({props:{code:"dGlueS1hZ2VudHMlMjBydW4lMjBhZ2VudC5qc29u",highlighted:"tiny-agents run agent.json",wrap:!1}}),{c(){y(M.$$.fragment),$=l(),h=o("p"),h.innerHTML=J,i=l(),y(p.$$.fragment),U=l(),d=o("p"),d.innerHTML=G,q=l(),b=o("p"),b.textContent=Q,v=l(),y(k.$$.fragment)},l(j){f(M.$$.fragment,j),$=a(j),h=u(j,"P",{"data-svelte-h":!0}),c(h)!=="svelte-1chp0yb"&&(h.innerHTML=J),i=a(j),f(p.$$.fragment,j),U=a(j),d=u(j,"P",{"data-svelte-h":!0}),c(d)!=="svelte-xndd4g"&&(d.innerHTML=G),q=a(j),b=u(j,"P",{"data-svelte-h":!0}),c(b)!=="svelte-djbew8"&&(b.textContent=Q),v=a(j),f(k.$$.fragment,j)},m(j,A){T(M,j,A),n(j,$,A),n(j,h,A),n(j,i,A),T(p,j,A),n(j,U,A),n(j,d,A),n(j,q,A),n(j,b,A),n(j,v,A),T(k,j,A),E=!0},p:Es,i(j){E||(m(M.$$.fragment,j),m(p.$$.fragment,j),m(k.$$.fragment,j),E=!0)},o(j){C(M.$$.fragment,j),C(p.$$.fragment,j),C(k.$$.fragment,j),E=!1},d(j){j&&(s($),s(h),s(i),s(U),s(d),s(q),s(b),s(v)),w(M,j),w(p,j),w(k,j)}}}function Vn(B){let M,$='First, install the tiny agents package with <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" rel="nofollow">npm</a>.',h,J,i,p,U,d,G="Make an agent project directory and create an <code>agent.json</code> file.",q,b,Q,v,k="Create an agent configuration file at <code>my-agent/agent.json</code>:",E,j,A,P,_="Now you can run the agent:",X,H,S;return J=new x({props:{code:"bnBtJTIwaW5zdGFsbCUyMCU0MGh1Z2dpbmdmYWNlJTJGdGlueS1hZ2VudHM=",highlighted:"npm install @huggingface/tiny-agents",wrap:!1}}),p=new I({props:{title:"Connecting to MCP Servers",local:"connecting-to-mcp-servers",headingTag:"h3"}}),b=new x({props:{code:"bWtkaXIlMjBteS1hZ2VudCUwQXRvdWNoJTIwbXktYWdlbnQlMkZhZ2VudC5qc29u",highlighted:`<span class="hljs-built_in">mkdir</span> my-agent
<span class="hljs-built_in">touch</span> my-agent/agent.json`,wrap:!1}}),j=new x({props:{code:"JTdCJTBBJTIwJTIwJTIwJTIwJTIybW9kZWwlMjIlM0ElMjAlMjJRd2VuJTJGUXdlbjIuNS03MkItSW5zdHJ1Y3QlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjJwcm92aWRlciUyMiUzQSUyMCUyMm5lYml1cyUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMnNlcnZlcnMlMjIlM0ElMjAlNUIlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJ0eXBlJTIyJTNBJTIwJTIyc3RkaW8lMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJjb21tYW5kJTIyJTNBJTIwJTIybnB4JTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyYXJncyUyMiUzQSUyMCU1QiUyMiU0MHBsYXl3cmlnaHQlMkZtY3AlNDBsYXRlc3QlMjIlNUQlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlNUQlMEElN0Q=",highlighted:`<span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;model&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Qwen/Qwen2.5-72B-Instruct&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;provider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;nebius&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
        <span class="hljs-punctuation">{</span>
            <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;stdio&quot;</span><span class="hljs-punctuation">,</span>
            <span class="hljs-attr">&quot;command&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;npx&quot;</span><span class="hljs-punctuation">,</span>
            <span class="hljs-attr">&quot;args&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;@playwright/mcp@latest&quot;</span><span class="hljs-punctuation">]</span>
        <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),H=new x({props:{code:"bnB4JTIwJTQwaHVnZ2luZ2ZhY2UlMkZ0aW55LWFnZW50cyUyMHJ1biUyMC4lMkZteS1hZ2VudA==",highlighted:"npx @huggingface/tiny-agents run ./my-agent",wrap:!1}}),{c(){M=o("p"),M.innerHTML=$,h=l(),y(J.$$.fragment),i=l(),y(p.$$.fragment),U=l(),d=o("p"),d.innerHTML=G,q=l(),y(b.$$.fragment),Q=l(),v=o("p"),v.innerHTML=k,E=l(),y(j.$$.fragment),A=l(),P=o("p"),P.textContent=_,X=l(),y(H.$$.fragment)},l(r){M=u(r,"P",{"data-svelte-h":!0}),c(M)!=="svelte-12y2k8v"&&(M.innerHTML=$),h=a(r),f(J.$$.fragment,r),i=a(r),f(p.$$.fragment,r),U=a(r),d=u(r,"P",{"data-svelte-h":!0}),c(d)!=="svelte-xxekw8"&&(d.innerHTML=G),q=a(r),f(b.$$.fragment,r),Q=a(r),v=u(r,"P",{"data-svelte-h":!0}),c(v)!=="svelte-1cg7l8c"&&(v.innerHTML=k),E=a(r),f(j.$$.fragment,r),A=a(r),P=u(r,"P",{"data-svelte-h":!0}),c(P)!=="svelte-djbew8"&&(P.textContent=_),X=a(r),f(H.$$.fragment,r)},m(r,g){n(r,M,g),n(r,h,g),T(J,r,g),n(r,i,g),T(p,r,g),n(r,U,g),n(r,d,g),n(r,q,g),T(b,r,g),n(r,Q,g),n(r,v,g),n(r,E,g),T(j,r,g),n(r,A,g),n(r,P,g),n(r,X,g),T(H,r,g),S=!0},p:Es,i(r){S||(m(J.$$.fragment,r),m(p.$$.fragment,r),m(b.$$.fragment,r),m(j.$$.fragment,r),m(H.$$.fragment,r),S=!0)},o(r){C(J.$$.fragment,r),C(p.$$.fragment,r),C(b.$$.fragment,r),C(j.$$.fragment,r),C(H.$$.fragment,r),S=!1},d(r){r&&(s(M),s(h),s(i),s(U),s(d),s(q),s(Q),s(v),s(E),s(A),s(P),s(X)),w(J,r),w(p,r),w(b,r),w(j,r),w(H,r)}}}function Nn(B){let M,$,h,J;return M=new Bs({props:{id:"language",option:"python",$$slots:{default:[Zn]},$$scope:{ctx:B}}}),h=new Bs({props:{id:"language",option:"javascript",$$slots:{default:[Vn]},$$scope:{ctx:B}}}),{c(){y(M.$$.fragment),$=l(),y(h.$$.fragment)},l(i){f(M.$$.fragment,i),$=a(i),f(h.$$.fragment,i)},m(i,p){T(M,i,p),n(i,$,p),T(h,i,p),J=!0},p(i,p){const U={};p&2&&(U.$$scope={dirty:p,ctx:i}),M.$set(U);const d={};p&2&&(d.$$scope={dirty:p,ctx:i}),h.$set(d)},i(i){J||(m(M.$$.fragment,i),m(h.$$.fragment,i),J=!0)},o(i){C(M.$$.fragment,i),C(h.$$.fragment,i),J=!1},d(i){i&&s($),w(M,i),w(h,i)}}}function Ln(B){let M,$,h,J,i,p,U,d="Now that we have a basic understanding of the Model Context Protocol, we can explore the essential role of MCP Clients in the Model Context Protocol ecosystem.",G,q,b="In this part of Unit 1, we’ll explore the essential role of MCP Clients in the Model Context Protocol ecosystem.",Q,v,k="In this section, you will:",E,j,A="<li>Understand what MCP Clients are and their role in the MCP architecture</li> <li>Learn about the key responsibilities of MCP Clients</li> <li>Explore the major MCP Client implementations</li> <li>Discover how to connect to the Hugging Face MCP Server and built-in tools</li> <li>See practical examples of MCP Client usage</li>",P,_,X="<p>In this page we’re going to show examples of how to set up MCP Clients in a few different ways using the JSON notation. For now, we will use <em>examples</em> like <code>path/to/server.py</code> to represent the path to the MCP Server. In the next unit, we’ll implement this with real MCP Servers.</p> <p>For now, focus on understanding the MCP Client notation. We’ll implement the MCP Servers in the next unit.</p>",H,S,r,g,ks="MCP Clients are crucial components that act as the bridge between AI applications (Hosts) and external capabilities provided by MCP Servers. Think of the Host as your main application (like an AI assistant or IDE) and the Client as a specialized module within that Host responsible for handling MCP communications.",ce,z,Me,Y,Qs="Let’s start by exploring the user interface clients that are available for the MCP.",re,R,je,F,Ps="<li>Claude Desktop (Anthropic)</li>",he,D,ye,O,Hs="<li>VS Code extensions with MCP (e.g., Continue)</li> <li>Cursor IDE (built-in MCP client)</li> <li>Zed editor</li>",fe,K,Ss="These clients support connecting to multiple MCP servers and real-time tool invocation.",Te,tt,me,et,_s="Hugging Face provides a hosted MCP server with built-in tools for exploring models, datasets, Spaces, and papers.",Ce,st,Gs='<li>Visit <a href="https://huggingface.co/settings/mcp" rel="nofollow">https://huggingface.co/settings/mcp</a> while logged in.</li> <li>Select your MCP-compatible client (e.g., VS Code, Cursor, Zed, Claude Desktop).</li> <li>Copy the generated configuration snippet into your client’s MCP config.</li> <li>Restart or reload your client. You should see “Hugging Face” connected.</li>',we,nt,Zs="Tip: Prefer the generated snippet over hand-written config; it’s tailored per client.",Je,lt,Ue,at,Vs="Now that we’ve covered the core of the MCP protocol, let’s look at how to configure your MCP servers and clients.",$e,it,Ns="Effective deployment of MCP servers and clients requires proper configuration.",ge,V,Ls="<p>The MCP specification is still evolving, so the configuration methods are subject to evolution. We’ll focus on the current best practices for configuration.</p>",de,pt,Ie,ot,Ws="MCP hosts use configuration files to manage server connections. These files define which servers are available and how to connect to them.",ve,ut,Xs="Fortunately, the configuration files are very simple, easy to understand, and consistent across major MCP hosts.",Ae,ct,be,Mt,zs="The standard configuration file for MCP is named <code>mcp.json</code>. Here’s the basic structure:",qe,rt,Ys="This is the basic structure of the <code>mcp.json</code> can be passed to applications like Claude Desktop, Cursor, or VS Code.",xe,jt,Be,ht,Rs="In this example, we have a single server with a name and a transport type. The transport type is either <code>stdio</code> or <code>sse</code>.",Ee,yt,ke,ft,Fs="For local servers using stdio transport, the configuration includes the command and arguments to launch the server process:",Qe,Tt,Pe,mt,Ds="Here, we have a server called “File Explorer” that is a local script.",He,Ct,Se,wt,Os="For remote servers using HTTP+SSE transport, the configuration includes the server URL:",_e,Jt,Ge,Ut,Ze,$t,Ks="Environment variables can be passed to server processes using the <code>env</code> field. Here’s how to access them in your server code:",Ve,N,Ne,gt,tn="The corresponding configuration in <code>mcp.json</code> would look like this:",Le,dt,We,It,Xe,vt,en="Let’s look at some real-world configuration scenarios:",ze,At,Ye,bt,sn="In this scenario, we have a local server that is a Python script which could be a file explorer or a code editor.",Re,qt,Fe,xt,De,Bt,nn="In this scenario, we have a remote server that is a weather API.",Oe,Et,Ke,kt,ln="Proper configuration is essential for successfully deploying MCP integrations. By understanding these aspects, you can create robust and reliable connections between AI applications and external capabilities.",ts,Qt,an="In the next section, we’ll explore the ecosystem of MCP servers available on Hugging Face Hub and how to publish your own servers there.",es,Pt,ss,Ht,pn="Now, let’s explore how to use MCP Clients within code.",ns,St,on="You can also use tiny agents as MCP Clients to connect directly to MCP servers from your code. Tiny agents provide a simple way to create AI agents that can use tools from MCP servers.",ls,_t,un="Tiny Agent can run MCP servers with a command line environment. To do this, we will need to install <code>npm</code> and run the server with <code>npx</code>. <strong>We’ll need these for both Python and JavaScript.</strong>",as,Gt,cn='Let’s install <code>npx</code> with <code>npm</code>. If you don’t have <code>npm</code> installed, check out the <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" rel="nofollow">npm documentation</a>.',is,Zt,ps,Vt,Mn="First, we will need to install <code>npx</code> if you don’t have it installed. You can do this with the following command:",os,Nt,us,Lt,rn="Then, we will need to install the huggingface_hub package with the MCP support. This will allow us to run MCP servers and clients.",cs,Wt,Ms,Xt,jn='Then, we will need to log in to the Hugging Face Hub to access the MCP servers. You can do this with the <code>huggingface-cli</code> command line tool. You will need a <a href="https://huggingface.co/docs/huggingface_hub/v0.32.3/en/quick-start#authentication" rel="nofollow">login token</a> to do this.',rs,zt,js,Yt,hs,Rt,hn="After creating your Hugging Face access token and logging in, you need to ensure your token has the proper permissions to work with inference providers.",ys,L,yn="<p><strong>Important:</strong> If you skip this step, you may encounter authentication errors when running tiny agents with hosted models.</p>",fs,Ft,fn='<li>Go to your <a href="https://huggingface.co/settings/tokens" rel="nofollow">Hugging Face Access Tokens page</a></li> <li>Find your MCP token and click the three dots (⋮) next to it</li> <li>Select <strong>“Edit permissions”</strong></li> <li>Under the <strong>Inference</strong> section, check the box for:<ul><li><strong>“Make calls to Inference Providers”</strong></li></ul></li> <li>Save your changes</li>',Ts,Dt,Tn="This permission is required because tiny agents need to make API calls to hosted models like <code>Qwen/Qwen2.5-72B-Instruct</code> through providers like Nebius.",ms,W,Cs,Ot,mn="In the video below, we run the agent and ask it to open a new tab in the browser.",ws,Kt,Cn='The following example shows a web-browsing agent configured to use the <a href="https://huggingface.co/Qwen/Qwen2.5-72B-Instruct" rel="nofollow">Qwen/Qwen2.5-72B-Instruct</a> model via Nebius inference provider, and it comes equipped with a playwright MCP server, which lets it use a web browser! The agent config is loaded specifying <a href="https://huggingface.co/datasets/tiny-agents/tiny-agents/tree/main/celinah/web-browser" rel="nofollow">its path in the <code>tiny-agents/tiny-agents</code></a> Hugging Face dataset.',Js,Z,wn='<source src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/blog/python-tiny-agents/web_browser_agent.mp4" type="video/mp4"/>',Us,te,Jn="When you run the agent, you’ll see it load, listing the tools it has discovered from its connected MCP servers. Then, it’s ready for your prompts!",$s,ee,Un="Prompt used in this demo:",gs,se,$n="<p>do a Web Search for HF inference providers on Brave Search and open the first result and then give me the list of the inference providers supported on Hugging Face</p>",ds,ne,Is,le,gn="Now that you understand MCP Clients, you’re ready to:",vs,ae,dn="<li>Explore specific MCP Server implementations</li> <li>Learn about creating custom MCP Clients</li> <li>Dive into advanced MCP integration patterns</li>",As,ie,In="Let’s continue our journey into the world of Model Context Protocol!",bs,pe,qs,oe,xs;return i=new I({props:{title:"MCP Clients",local:"mcp-clients",headingTag:"h1"}}),S=new I({props:{title:"Understanding MCP Clients",local:"understanding-mcp-clients",headingTag:"h2"}}),z=new I({props:{title:"User Interface Client",local:"user-interface-client",headingTag:"h2"}}),R=new I({props:{title:"Chat Interface Clients",local:"chat-interface-clients",headingTag:"h3"}}),D=new I({props:{title:"Interactive Development Clients",local:"interactive-development-clients",headingTag:"h3"}}),tt=new I({props:{title:"Quick connect to Hugging Face MCP Server",local:"quick-connect-to-hugging-face-mcp-server",headingTag:"h2"}}),lt=new I({props:{title:"Configuring MCP Clients",local:"configuring-mcp-clients",headingTag:"h2"}}),pt=new I({props:{title:"MCP Configuration Files",local:"mcp-configuration-files",headingTag:"h3"}}),ct=new I({props:{title:"mcp.json Structure",local:"mcpjson-structure",headingTag:"h4"}}),jt=new x({props:{code:"JTdCJTBBJTIwJTIwJTIyc2VydmVycyUyMiUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMm5hbWUlMjIlM0ElMjAlMjJTZXJ2ZXIlMjBOYW1lJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIydHJhbnNwb3J0JTIyJTNBJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIydHlwZSUyMiUzQSUyMCUyMnN0ZGlvJTdDc3NlJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTJGJTIwVHJhbnNwb3J0LXNwZWNpZmljJTIwY29uZmlndXJhdGlvbiUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCU1RCUwQSU3RA==",highlighted:`<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Server Name&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;transport&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;stdio|sse&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-comment">// Transport-specific configuration</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),yt=new I({props:{title:"Configuration for stdio Transport",local:"configuration-for-stdio-transport",headingTag:"h4"}}),Tt=new x({props:{code:"JTdCJTBBJTIwJTIwJTIyc2VydmVycyUyMiUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMm5hbWUlMjIlM0ElMjAlMjJGaWxlJTIwRXhwbG9yZXIlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjJ0cmFuc3BvcnQlMjIlM0ElMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJ0eXBlJTIyJTNBJTIwJTIyc3RkaW8lMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJjb21tYW5kJTIyJTNBJTIwJTIycHl0aG9uJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyYXJncyUyMiUzQSUyMCU1QiUyMiUyRnBhdGglMkZ0byUyRmZpbGVfZXhwbG9yZXJfc2VydmVyLnB5JTIyJTVEJTIwJTJGJTJGJTIwVGhpcyUyMGlzJTIwYW4lMjBleGFtcGxlJTJDJTIwd2UnbGwlMjB1c2UlMjBhJTIwcmVhbCUyMHNlcnZlciUyMGluJTIwdGhlJTIwbmV4dCUyMHVuaXQlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlNUQlMEElN0Q=",highlighted:`<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;File Explorer&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;transport&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;stdio&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;command&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;python&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;args&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;/path/to/file_explorer_server.py&quot;</span><span class="hljs-punctuation">]</span> <span class="hljs-comment">// This is an example, we&#x27;ll use a real server in the next unit</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),Ct=new I({props:{title:"Configuration for HTTP+SSE Transport",local:"configuration-for-httpsse-transport",headingTag:"h4"}}),Jt=new x({props:{code:"JTdCJTBBJTIwJTIwJTIyc2VydmVycyUyMiUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMm5hbWUlMjIlM0ElMjAlMjJSZW1vdGUlMjBBUEklMjBTZXJ2ZXIlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjJ0cmFuc3BvcnQlMjIlM0ElMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJ0eXBlJTIyJTNBJTIwJTIyc3NlJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIydXJsJTIyJTNBJTIwJTIyaHR0cHMlM0ElMkYlMkZleGFtcGxlLmNvbSUyRm1jcC1zZXJ2ZXIlMjIlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlNUQlMEElN0Q=",highlighted:`<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Remote API Server&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;transport&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;sse&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;url&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;https://example.com/mcp-server&quot;</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),Ut=new I({props:{title:"Environment Variables in Configuration",local:"environment-variables-in-configuration",headingTag:"h4"}}),N=new qn({props:{id:"env-variables",options:["python","javascript"],$$slots:{default:[Gn]},$$scope:{ctx:B}}}),dt=new x({props:{code:"JTdCJTBBJTIwJTIwJTIyc2VydmVycyUyMiUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMm5hbWUlMjIlM0ElMjAlMjJHaXRIdWIlMjBBUEklMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjJ0cmFuc3BvcnQlMjIlM0ElMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJ0eXBlJTIyJTNBJTIwJTIyc3RkaW8lMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJjb21tYW5kJTIyJTNBJTIwJTIycHl0aG9uJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyYXJncyUyMiUzQSUyMCU1QiUyMiUyRnBhdGglMkZ0byUyRmdpdGh1Yl9zZXJ2ZXIucHklMjIlNUQlMkMlMjAlMkYlMkYlMjBUaGlzJTIwaXMlMjBhbiUyMGV4YW1wbGUlMkMlMjB3ZSdsbCUyMHVzZSUyMGElMjByZWFsJTIwc2VydmVyJTIwaW4lMjB0aGUlMjBuZXh0JTIwdW5pdCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMmVudiUyMiUzQSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMkdJVEhVQl9UT0tFTiUyMiUzQSUyMCUyMnlvdXJfZ2l0aHViX3Rva2VuJTIyJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTVEJTBBJTdE",highlighted:`<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;GitHub API&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;transport&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;stdio&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;command&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;python&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;args&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;/path/to/github_server.py&quot;</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">// This is an example, we&#x27;ll use a real server in the next unit</span>
        <span class="hljs-attr">&quot;env&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
          <span class="hljs-attr">&quot;GITHUB_TOKEN&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;your_github_token&quot;</span>
        <span class="hljs-punctuation">}</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),It=new I({props:{title:"Configuration Examples",local:"configuration-examples",headingTag:"h3"}}),At=new I({props:{title:"Scenario 1: Local Server Configuration",local:"scenario-1-local-server-configuration",headingTag:"h4"}}),qt=new x({props:{code:"JTdCJTBBJTIwJTIwJTIyc2VydmVycyUyMiUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMm5hbWUlMjIlM0ElMjAlMjJGaWxlJTIwRXhwbG9yZXIlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjJ0cmFuc3BvcnQlMjIlM0ElMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJ0eXBlJTIyJTNBJTIwJTIyc3RkaW8lMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJjb21tYW5kJTIyJTNBJTIwJTIycHl0aG9uJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyYXJncyUyMiUzQSUyMCU1QiUyMiUyRnBhdGglMkZ0byUyRmZpbGVfZXhwbG9yZXJfc2VydmVyLnB5JTIyJTVEJTIwJTJGJTJGJTIwVGhpcyUyMGlzJTIwYW4lMjBleGFtcGxlJTJDJTIwd2UnbGwlMjB1c2UlMjBhJTIwcmVhbCUyMHNlcnZlciUyMGluJTIwdGhlJTIwbmV4dCUyMHVuaXQlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlNUQlMEElN0Q=",highlighted:`<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;File Explorer&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;transport&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;stdio&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;command&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;python&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;args&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;/path/to/file_explorer_server.py&quot;</span><span class="hljs-punctuation">]</span> <span class="hljs-comment">// This is an example, we&#x27;ll use a real server in the next unit</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),xt=new I({props:{title:"Scenario 2: Remote Server Configuration",local:"scenario-2-remote-server-configuration",headingTag:"h4"}}),Et=new x({props:{code:"JTdCJTBBJTIwJTIwJTIyc2VydmVycyUyMiUzQSUyMCU1QiUwQSUyMCUyMCUyMCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMm5hbWUlMjIlM0ElMjAlMjJXZWF0aGVyJTIwQVBJJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIydHJhbnNwb3J0JTIyJTNBJTIwJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIydHlwZSUyMiUzQSUyMCUyMnNzZSUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMnVybCUyMiUzQSUyMCUyMmh0dHBzJTNBJTJGJTJGZXhhbXBsZS5jb20lMkZtY3Atc2VydmVyJTIyJTIwJTJGJTJGJTIwVGhpcyUyMGlzJTIwYW4lMjBleGFtcGxlJTJDJTIwd2UnbGwlMjB1c2UlMjBhJTIwcmVhbCUyMHNlcnZlciUyMGluJTIwdGhlJTIwbmV4dCUyMHVuaXQlMEElMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlNUQlMEElN0Q=",highlighted:`<span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;servers&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Weather API&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;transport&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;sse&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;url&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;https://example.com/mcp-server&quot;</span> <span class="hljs-comment">// This is an example, we&#x27;ll use a real server in the next unit</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>`,wrap:!1}}),Pt=new I({props:{title:"Tiny Agents Clients",local:"tiny-agents-clients",headingTag:"h2"}}),Zt=new I({props:{title:"Setup",local:"setup",headingTag:"h3"}}),Nt=new x({props:{code:"JTIzJTIwaW5zdGFsbCUyMG5weCUwQW5wbSUyMGluc3RhbGwlMjAtZyUyMG5weA==",highlighted:`<span class="hljs-comment"># install npx</span>
npm install -g npx`,wrap:!1}}),Wt=new x({props:{code:"cGlwJTIwaW5zdGFsbCUyMCUyMmh1Z2dpbmdmYWNlX2h1YiU1Qm1jcCU1RCUzRSUzRDAuMzIuMCUyMg==",highlighted:'pip install <span class="hljs-string">&quot;huggingface_hub[mcp]&gt;=0.32.0&quot;</span>',wrap:!1}}),zt=new x({props:{code:"aHVnZ2luZ2ZhY2UtY2xpJTIwbG9naW4=",highlighted:"huggingface-cli login",wrap:!1}}),Yt=new I({props:{title:"Configure Access Token Permissions",local:"configure-access-token-permissions",headingTag:"h3"}}),W=new qn({props:{id:"language",options:["python","javascript"],$$slots:{default:[Nn]},$$scope:{ctx:B}}}),ne=new I({props:{title:"Next Steps",local:"next-steps",headingTag:"h2"}}),pe=new Hn({props:{source:"https://github.com/huggingface/mcp-course/blob/main/units/en/unit1/mcp-clients.mdx"}}),{c(){M=o("meta"),$=l(),h=o("p"),J=l(),y(i.$$.fragment),p=l(),U=o("p"),U.textContent=d,G=l(),q=o("p"),q.textContent=b,Q=l(),v=o("p"),v.textContent=k,E=l(),j=o("ul"),j.innerHTML=A,P=l(),_=o("blockquote"),_.innerHTML=X,H=l(),y(S.$$.fragment),r=l(),g=o("p"),g.textContent=ks,ce=l(),y(z.$$.fragment),Me=l(),Y=o("p"),Y.textContent=Qs,re=l(),y(R.$$.fragment),je=l(),F=o("ul"),F.innerHTML=Ps,he=l(),y(D.$$.fragment),ye=l(),O=o("ul"),O.innerHTML=Hs,fe=l(),K=o("p"),K.textContent=Ss,Te=l(),y(tt.$$.fragment),me=l(),et=o("p"),et.textContent=_s,Ce=l(),st=o("ol"),st.innerHTML=Gs,we=l(),nt=o("p"),nt.textContent=Zs,Je=l(),y(lt.$$.fragment),Ue=l(),at=o("p"),at.textContent=Vs,$e=l(),it=o("p"),it.textContent=Ns,ge=l(),V=o("blockquote"),V.innerHTML=Ls,de=l(),y(pt.$$.fragment),Ie=l(),ot=o("p"),ot.textContent=Ws,ve=l(),ut=o("p"),ut.textContent=Xs,Ae=l(),y(ct.$$.fragment),be=l(),Mt=o("p"),Mt.innerHTML=zs,qe=l(),rt=o("p"),rt.innerHTML=Ys,xe=l(),y(jt.$$.fragment),Be=l(),ht=o("p"),ht.innerHTML=Rs,Ee=l(),y(yt.$$.fragment),ke=l(),ft=o("p"),ft.textContent=Fs,Qe=l(),y(Tt.$$.fragment),Pe=l(),mt=o("p"),mt.textContent=Ds,He=l(),y(Ct.$$.fragment),Se=l(),wt=o("p"),wt.textContent=Os,_e=l(),y(Jt.$$.fragment),Ge=l(),y(Ut.$$.fragment),Ze=l(),$t=o("p"),$t.innerHTML=Ks,Ve=l(),y(N.$$.fragment),Ne=l(),gt=o("p"),gt.innerHTML=tn,Le=l(),y(dt.$$.fragment),We=l(),y(It.$$.fragment),Xe=l(),vt=o("p"),vt.textContent=en,ze=l(),y(At.$$.fragment),Ye=l(),bt=o("p"),bt.textContent=sn,Re=l(),y(qt.$$.fragment),Fe=l(),y(xt.$$.fragment),De=l(),Bt=o("p"),Bt.textContent=nn,Oe=l(),y(Et.$$.fragment),Ke=l(),kt=o("p"),kt.textContent=ln,ts=l(),Qt=o("p"),Qt.textContent=an,es=l(),y(Pt.$$.fragment),ss=l(),Ht=o("p"),Ht.textContent=pn,ns=l(),St=o("p"),St.textContent=on,ls=l(),_t=o("p"),_t.innerHTML=un,as=l(),Gt=o("p"),Gt.innerHTML=cn,is=l(),y(Zt.$$.fragment),ps=l(),Vt=o("p"),Vt.innerHTML=Mn,os=l(),y(Nt.$$.fragment),us=l(),Lt=o("p"),Lt.textContent=rn,cs=l(),y(Wt.$$.fragment),Ms=l(),Xt=o("p"),Xt.innerHTML=jn,rs=l(),y(zt.$$.fragment),js=l(),y(Yt.$$.fragment),hs=l(),Rt=o("p"),Rt.textContent=hn,ys=l(),L=o("blockquote"),L.innerHTML=yn,fs=l(),Ft=o("ol"),Ft.innerHTML=fn,Ts=l(),Dt=o("p"),Dt.innerHTML=Tn,ms=l(),y(W.$$.fragment),Cs=l(),Ot=o("p"),Ot.textContent=mn,ws=l(),Kt=o("p"),Kt.innerHTML=Cn,Js=l(),Z=o("video"),Z.innerHTML=wn,Us=l(),te=o("p"),te.textContent=Jn,$s=l(),ee=o("p"),ee.textContent=Un,gs=l(),se=o("blockquote"),se.innerHTML=$n,ds=l(),y(ne.$$.fragment),Is=l(),le=o("p"),le.textContent=gn,vs=l(),ae=o("ul"),ae.innerHTML=dn,As=l(),ie=o("p"),ie.textContent=In,bs=l(),y(pe.$$.fragment),qs=l(),oe=o("p"),this.h()},l(t){const e=Qn("svelte-u9bgzb",document.head);M=u(e,"META",{name:!0,content:!0}),e.forEach(s),$=a(t),h=u(t,"P",{}),bn(h).forEach(s),J=a(t),f(i.$$.fragment,t),p=a(t),U=u(t,"P",{"data-svelte-h":!0}),c(U)!=="svelte-bq1glt"&&(U.textContent=d),G=a(t),q=u(t,"P",{"data-svelte-h":!0}),c(q)!=="svelte-3v3t4i"&&(q.textContent=b),Q=a(t),v=u(t,"P",{"data-svelte-h":!0}),c(v)!=="svelte-37whj1"&&(v.textContent=k),E=a(t),j=u(t,"UL",{"data-svelte-h":!0}),c(j)!=="svelte-19awr3v"&&(j.innerHTML=A),P=a(t),_=u(t,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),c(_)!=="svelte-11twl4n"&&(_.innerHTML=X),H=a(t),f(S.$$.fragment,t),r=a(t),g=u(t,"P",{"data-svelte-h":!0}),c(g)!=="svelte-s96fp3"&&(g.textContent=ks),ce=a(t),f(z.$$.fragment,t),Me=a(t),Y=u(t,"P",{"data-svelte-h":!0}),c(Y)!=="svelte-38oyrl"&&(Y.textContent=Qs),re=a(t),f(R.$$.fragment,t),je=a(t),F=u(t,"UL",{"data-svelte-h":!0}),c(F)!=="svelte-1v59zks"&&(F.innerHTML=Ps),he=a(t),f(D.$$.fragment,t),ye=a(t),O=u(t,"UL",{"data-svelte-h":!0}),c(O)!=="svelte-1ryprd7"&&(O.innerHTML=Hs),fe=a(t),K=u(t,"P",{"data-svelte-h":!0}),c(K)!=="svelte-cwbz68"&&(K.textContent=Ss),Te=a(t),f(tt.$$.fragment,t),me=a(t),et=u(t,"P",{"data-svelte-h":!0}),c(et)!=="svelte-hdja3t"&&(et.textContent=_s),Ce=a(t),st=u(t,"OL",{"data-svelte-h":!0}),c(st)!=="svelte-1oe4cph"&&(st.innerHTML=Gs),we=a(t),nt=u(t,"P",{"data-svelte-h":!0}),c(nt)!=="svelte-1vh662p"&&(nt.textContent=Zs),Je=a(t),f(lt.$$.fragment,t),Ue=a(t),at=u(t,"P",{"data-svelte-h":!0}),c(at)!=="svelte-1t8u4wf"&&(at.textContent=Vs),$e=a(t),it=u(t,"P",{"data-svelte-h":!0}),c(it)!=="svelte-1h6qe5q"&&(it.textContent=Ns),ge=a(t),V=u(t,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),c(V)!=="svelte-5dfjj7"&&(V.innerHTML=Ls),de=a(t),f(pt.$$.fragment,t),Ie=a(t),ot=u(t,"P",{"data-svelte-h":!0}),c(ot)!=="svelte-1ycrnux"&&(ot.textContent=Ws),ve=a(t),ut=u(t,"P",{"data-svelte-h":!0}),c(ut)!=="svelte-z7yl0u"&&(ut.textContent=Xs),Ae=a(t),f(ct.$$.fragment,t),be=a(t),Mt=u(t,"P",{"data-svelte-h":!0}),c(Mt)!=="svelte-upbqy5"&&(Mt.innerHTML=zs),qe=a(t),rt=u(t,"P",{"data-svelte-h":!0}),c(rt)!=="svelte-817fk"&&(rt.innerHTML=Ys),xe=a(t),f(jt.$$.fragment,t),Be=a(t),ht=u(t,"P",{"data-svelte-h":!0}),c(ht)!=="svelte-1xnp18o"&&(ht.innerHTML=Rs),Ee=a(t),f(yt.$$.fragment,t),ke=a(t),ft=u(t,"P",{"data-svelte-h":!0}),c(ft)!=="svelte-eoeyze"&&(ft.textContent=Fs),Qe=a(t),f(Tt.$$.fragment,t),Pe=a(t),mt=u(t,"P",{"data-svelte-h":!0}),c(mt)!=="svelte-443kp7"&&(mt.textContent=Ds),He=a(t),f(Ct.$$.fragment,t),Se=a(t),wt=u(t,"P",{"data-svelte-h":!0}),c(wt)!=="svelte-1jwz8f7"&&(wt.textContent=Os),_e=a(t),f(Jt.$$.fragment,t),Ge=a(t),f(Ut.$$.fragment,t),Ze=a(t),$t=u(t,"P",{"data-svelte-h":!0}),c($t)!=="svelte-1c7z0qi"&&($t.innerHTML=Ks),Ve=a(t),f(N.$$.fragment,t),Ne=a(t),gt=u(t,"P",{"data-svelte-h":!0}),c(gt)!=="svelte-1oqx78f"&&(gt.innerHTML=tn),Le=a(t),f(dt.$$.fragment,t),We=a(t),f(It.$$.fragment,t),Xe=a(t),vt=u(t,"P",{"data-svelte-h":!0}),c(vt)!=="svelte-fnutrr"&&(vt.textContent=en),ze=a(t),f(At.$$.fragment,t),Ye=a(t),bt=u(t,"P",{"data-svelte-h":!0}),c(bt)!=="svelte-i95sbi"&&(bt.textContent=sn),Re=a(t),f(qt.$$.fragment,t),Fe=a(t),f(xt.$$.fragment,t),De=a(t),Bt=u(t,"P",{"data-svelte-h":!0}),c(Bt)!=="svelte-1d51v8x"&&(Bt.textContent=nn),Oe=a(t),f(Et.$$.fragment,t),Ke=a(t),kt=u(t,"P",{"data-svelte-h":!0}),c(kt)!=="svelte-146ggji"&&(kt.textContent=ln),ts=a(t),Qt=u(t,"P",{"data-svelte-h":!0}),c(Qt)!=="svelte-k8z1tj"&&(Qt.textContent=an),es=a(t),f(Pt.$$.fragment,t),ss=a(t),Ht=u(t,"P",{"data-svelte-h":!0}),c(Ht)!=="svelte-1dfdkfc"&&(Ht.textContent=pn),ns=a(t),St=u(t,"P",{"data-svelte-h":!0}),c(St)!=="svelte-14qiw7w"&&(St.textContent=on),ls=a(t),_t=u(t,"P",{"data-svelte-h":!0}),c(_t)!=="svelte-cm95y3"&&(_t.innerHTML=un),as=a(t),Gt=u(t,"P",{"data-svelte-h":!0}),c(Gt)!=="svelte-fmiuqb"&&(Gt.innerHTML=cn),is=a(t),f(Zt.$$.fragment,t),ps=a(t),Vt=u(t,"P",{"data-svelte-h":!0}),c(Vt)!=="svelte-1k7gxs3"&&(Vt.innerHTML=Mn),os=a(t),f(Nt.$$.fragment,t),us=a(t),Lt=u(t,"P",{"data-svelte-h":!0}),c(Lt)!=="svelte-97l3dy"&&(Lt.textContent=rn),cs=a(t),f(Wt.$$.fragment,t),Ms=a(t),Xt=u(t,"P",{"data-svelte-h":!0}),c(Xt)!=="svelte-1y7cgeg"&&(Xt.innerHTML=jn),rs=a(t),f(zt.$$.fragment,t),js=a(t),f(Yt.$$.fragment,t),hs=a(t),Rt=u(t,"P",{"data-svelte-h":!0}),c(Rt)!=="svelte-ztsd4o"&&(Rt.textContent=hn),ys=a(t),L=u(t,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),c(L)!=="svelte-115yffk"&&(L.innerHTML=yn),fs=a(t),Ft=u(t,"OL",{"data-svelte-h":!0}),c(Ft)!=="svelte-7j1clv"&&(Ft.innerHTML=fn),Ts=a(t),Dt=u(t,"P",{"data-svelte-h":!0}),c(Dt)!=="svelte-n19wxz"&&(Dt.innerHTML=Tn),ms=a(t),f(W.$$.fragment,t),Cs=a(t),Ot=u(t,"P",{"data-svelte-h":!0}),c(Ot)!=="svelte-1p62eql"&&(Ot.textContent=mn),ws=a(t),Kt=u(t,"P",{"data-svelte-h":!0}),c(Kt)!=="svelte-1ob91jc"&&(Kt.innerHTML=Cn),Js=a(t),Z=u(t,"VIDEO",{"data-svelte-h":!0}),c(Z)!=="svelte-czqfe0"&&(Z.innerHTML=wn),Us=a(t),te=u(t,"P",{"data-svelte-h":!0}),c(te)!=="svelte-5v1ktd"&&(te.textContent=Jn),$s=a(t),ee=u(t,"P",{"data-svelte-h":!0}),c(ee)!=="svelte-57oxa9"&&(ee.textContent=Un),gs=a(t),se=u(t,"BLOCKQUOTE",{"data-svelte-h":!0}),c(se)!=="svelte-mkoavr"&&(se.innerHTML=$n),ds=a(t),f(ne.$$.fragment,t),Is=a(t),le=u(t,"P",{"data-svelte-h":!0}),c(le)!=="svelte-jrhgb1"&&(le.textContent=gn),vs=a(t),ae=u(t,"UL",{"data-svelte-h":!0}),c(ae)!=="svelte-1ypqei0"&&(ae.innerHTML=dn),As=a(t),ie=u(t,"P",{"data-svelte-h":!0}),c(ie)!=="svelte-crczat"&&(ie.textContent=In),bs=a(t),f(pe.$$.fragment,t),qs=a(t),oe=u(t,"P",{}),bn(oe).forEach(s),this.h()},h(){ue(M,"name","hf:doc:metadata"),ue(M,"content",Wn),ue(_,"class","tip"),ue(V,"class","tip"),ue(L,"class","warning"),Z.controls="",Z.autoplay="",Z.loop=""},m(t,e){Pn(document.head,M),n(t,$,e),n(t,h,e),n(t,J,e),T(i,t,e),n(t,p,e),n(t,U,e),n(t,G,e),n(t,q,e),n(t,Q,e),n(t,v,e),n(t,E,e),n(t,j,e),n(t,P,e),n(t,_,e),n(t,H,e),T(S,t,e),n(t,r,e),n(t,g,e),n(t,ce,e),T(z,t,e),n(t,Me,e),n(t,Y,e),n(t,re,e),T(R,t,e),n(t,je,e),n(t,F,e),n(t,he,e),T(D,t,e),n(t,ye,e),n(t,O,e),n(t,fe,e),n(t,K,e),n(t,Te,e),T(tt,t,e),n(t,me,e),n(t,et,e),n(t,Ce,e),n(t,st,e),n(t,we,e),n(t,nt,e),n(t,Je,e),T(lt,t,e),n(t,Ue,e),n(t,at,e),n(t,$e,e),n(t,it,e),n(t,ge,e),n(t,V,e),n(t,de,e),T(pt,t,e),n(t,Ie,e),n(t,ot,e),n(t,ve,e),n(t,ut,e),n(t,Ae,e),T(ct,t,e),n(t,be,e),n(t,Mt,e),n(t,qe,e),n(t,rt,e),n(t,xe,e),T(jt,t,e),n(t,Be,e),n(t,ht,e),n(t,Ee,e),T(yt,t,e),n(t,ke,e),n(t,ft,e),n(t,Qe,e),T(Tt,t,e),n(t,Pe,e),n(t,mt,e),n(t,He,e),T(Ct,t,e),n(t,Se,e),n(t,wt,e),n(t,_e,e),T(Jt,t,e),n(t,Ge,e),T(Ut,t,e),n(t,Ze,e),n(t,$t,e),n(t,Ve,e),T(N,t,e),n(t,Ne,e),n(t,gt,e),n(t,Le,e),T(dt,t,e),n(t,We,e),T(It,t,e),n(t,Xe,e),n(t,vt,e),n(t,ze,e),T(At,t,e),n(t,Ye,e),n(t,bt,e),n(t,Re,e),T(qt,t,e),n(t,Fe,e),T(xt,t,e),n(t,De,e),n(t,Bt,e),n(t,Oe,e),T(Et,t,e),n(t,Ke,e),n(t,kt,e),n(t,ts,e),n(t,Qt,e),n(t,es,e),T(Pt,t,e),n(t,ss,e),n(t,Ht,e),n(t,ns,e),n(t,St,e),n(t,ls,e),n(t,_t,e),n(t,as,e),n(t,Gt,e),n(t,is,e),T(Zt,t,e),n(t,ps,e),n(t,Vt,e),n(t,os,e),T(Nt,t,e),n(t,us,e),n(t,Lt,e),n(t,cs,e),T(Wt,t,e),n(t,Ms,e),n(t,Xt,e),n(t,rs,e),T(zt,t,e),n(t,js,e),T(Yt,t,e),n(t,hs,e),n(t,Rt,e),n(t,ys,e),n(t,L,e),n(t,fs,e),n(t,Ft,e),n(t,Ts,e),n(t,Dt,e),n(t,ms,e),T(W,t,e),n(t,Cs,e),n(t,Ot,e),n(t,ws,e),n(t,Kt,e),n(t,Js,e),n(t,Z,e),n(t,Us,e),n(t,te,e),n(t,$s,e),n(t,ee,e),n(t,gs,e),n(t,se,e),n(t,ds,e),T(ne,t,e),n(t,Is,e),n(t,le,e),n(t,vs,e),n(t,ae,e),n(t,As,e),n(t,ie,e),n(t,bs,e),T(pe,t,e),n(t,qs,e),n(t,oe,e),xs=!0},p(t,[e]){const vn={};e&2&&(vn.$$scope={dirty:e,ctx:t}),N.$set(vn);const An={};e&2&&(An.$$scope={dirty:e,ctx:t}),W.$set(An)},i(t){xs||(m(i.$$.fragment,t),m(S.$$.fragment,t),m(z.$$.fragment,t),m(R.$$.fragment,t),m(D.$$.fragment,t),m(tt.$$.fragment,t),m(lt.$$.fragment,t),m(pt.$$.fragment,t),m(ct.$$.fragment,t),m(jt.$$.fragment,t),m(yt.$$.fragment,t),m(Tt.$$.fragment,t),m(Ct.$$.fragment,t),m(Jt.$$.fragment,t),m(Ut.$$.fragment,t),m(N.$$.fragment,t),m(dt.$$.fragment,t),m(It.$$.fragment,t),m(At.$$.fragment,t),m(qt.$$.fragment,t),m(xt.$$.fragment,t),m(Et.$$.fragment,t),m(Pt.$$.fragment,t),m(Zt.$$.fragment,t),m(Nt.$$.fragment,t),m(Wt.$$.fragment,t),m(zt.$$.fragment,t),m(Yt.$$.fragment,t),m(W.$$.fragment,t),m(ne.$$.fragment,t),m(pe.$$.fragment,t),xs=!0)},o(t){C(i.$$.fragment,t),C(S.$$.fragment,t),C(z.$$.fragment,t),C(R.$$.fragment,t),C(D.$$.fragment,t),C(tt.$$.fragment,t),C(lt.$$.fragment,t),C(pt.$$.fragment,t),C(ct.$$.fragment,t),C(jt.$$.fragment,t),C(yt.$$.fragment,t),C(Tt.$$.fragment,t),C(Ct.$$.fragment,t),C(Jt.$$.fragment,t),C(Ut.$$.fragment,t),C(N.$$.fragment,t),C(dt.$$.fragment,t),C(It.$$.fragment,t),C(At.$$.fragment,t),C(qt.$$.fragment,t),C(xt.$$.fragment,t),C(Et.$$.fragment,t),C(Pt.$$.fragment,t),C(Zt.$$.fragment,t),C(Nt.$$.fragment,t),C(Wt.$$.fragment,t),C(zt.$$.fragment,t),C(Yt.$$.fragment,t),C(W.$$.fragment,t),C(ne.$$.fragment,t),C(pe.$$.fragment,t),xs=!1},d(t){t&&(s($),s(h),s(J),s(p),s(U),s(G),s(q),s(Q),s(v),s(E),s(j),s(P),s(_),s(H),s(r),s(g),s(ce),s(Me),s(Y),s(re),s(je),s(F),s(he),s(ye),s(O),s(fe),s(K),s(Te),s(me),s(et),s(Ce),s(st),s(we),s(nt),s(Je),s(Ue),s(at),s($e),s(it),s(ge),s(V),s(de),s(Ie),s(ot),s(ve),s(ut),s(Ae),s(be),s(Mt),s(qe),s(rt),s(xe),s(Be),s(ht),s(Ee),s(ke),s(ft),s(Qe),s(Pe),s(mt),s(He),s(Se),s(wt),s(_e),s(Ge),s(Ze),s($t),s(Ve),s(Ne),s(gt),s(Le),s(We),s(Xe),s(vt),s(ze),s(Ye),s(bt),s(Re),s(Fe),s(De),s(Bt),s(Oe),s(Ke),s(kt),s(ts),s(Qt),s(es),s(ss),s(Ht),s(ns),s(St),s(ls),s(_t),s(as),s(Gt),s(is),s(ps),s(Vt),s(os),s(us),s(Lt),s(cs),s(Ms),s(Xt),s(rs),s(js),s(hs),s(Rt),s(ys),s(L),s(fs),s(Ft),s(Ts),s(Dt),s(ms),s(Cs),s(Ot),s(ws),s(Kt),s(Js),s(Z),s(Us),s(te),s($s),s(ee),s(gs),s(se),s(ds),s(Is),s(le),s(vs),s(ae),s(As),s(ie),s(bs),s(qs),s(oe)),s(M),w(i,t),w(S,t),w(z,t),w(R,t),w(D,t),w(tt,t),w(lt,t),w(pt,t),w(ct,t),w(jt,t),w(yt,t),w(Tt,t),w(Ct,t),w(Jt,t),w(Ut,t),w(N,t),w(dt,t),w(It,t),w(At,t),w(qt,t),w(xt,t),w(Et,t),w(Pt,t),w(Zt,t),w(Nt,t),w(Wt,t),w(zt,t),w(Yt,t),w(W,t),w(ne,t),w(pe,t)}}}const Wn='{"title":"MCP Clients","local":"mcp-clients","sections":[{"title":"Understanding MCP Clients","local":"understanding-mcp-clients","sections":[],"depth":2},{"title":"User Interface Client","local":"user-interface-client","sections":[{"title":"Chat Interface Clients","local":"chat-interface-clients","sections":[],"depth":3},{"title":"Interactive Development Clients","local":"interactive-development-clients","sections":[],"depth":3}],"depth":2},{"title":"Quick connect to Hugging Face MCP Server","local":"quick-connect-to-hugging-face-mcp-server","sections":[],"depth":2},{"title":"Configuring MCP Clients","local":"configuring-mcp-clients","sections":[{"title":"MCP Configuration Files","local":"mcp-configuration-files","sections":[{"title":"mcp.json Structure","local":"mcpjson-structure","sections":[],"depth":4},{"title":"Configuration for stdio Transport","local":"configuration-for-stdio-transport","sections":[],"depth":4},{"title":"Configuration for HTTP+SSE Transport","local":"configuration-for-httpsse-transport","sections":[],"depth":4},{"title":"Environment Variables in Configuration","local":"environment-variables-in-configuration","sections":[],"depth":4}],"depth":3},{"title":"Configuration Examples","local":"configuration-examples","sections":[{"title":"Scenario 1: Local Server Configuration","local":"scenario-1-local-server-configuration","sections":[],"depth":4},{"title":"Scenario 2: Remote Server Configuration","local":"scenario-2-remote-server-configuration","sections":[],"depth":4}],"depth":3}],"depth":2},{"title":"Tiny Agents Clients","local":"tiny-agents-clients","sections":[{"title":"Setup","local":"setup","sections":[],"depth":3},{"title":"Configure Access Token Permissions","local":"configure-access-token-permissions","sections":[],"depth":3},{"title":"Connecting to MCP Servers","local":"connecting-to-mcp-servers","sections":[],"depth":3},{"title":"Connecting to MCP Servers","local":"connecting-to-mcp-servers","sections":[],"depth":3}],"depth":2},{"title":"Next Steps","local":"next-steps","sections":[],"depth":2}],"depth":1}';function Xn(B){return Bn(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class On extends En{constructor(M){super(),kn(this,M,Xn,Ln,xn,{})}}export{On as component};
