Buckets:

hf-doc-build/doc-dev / mcp-course /pr_221 /en /unit2 /continue-client.html
HuggingFaceDocBuilder's picture
download
raw
33.5 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Using MCP with Local and Open Source Models&quot;,&quot;local&quot;:&quot;using-mcp-with-local-and-open-source-models&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Setup Continue&quot;,&quot;local&quot;:&quot;setup-continue&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;VS Code extension&quot;,&quot;local&quot;:&quot;vs-code-extension&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Local Models&quot;,&quot;local&quot;:&quot;local-models&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;How it works&quot;,&quot;local&quot;:&quot;how-it-works&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;The tool handshake&quot;,&quot;local&quot;:&quot;the-tool-handshake&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Local Model Integration with MCP&quot;,&quot;local&quot;:&quot;local-model-integration-with-mcp&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Conclusion&quot;,&quot;local&quot;:&quot;conclusion&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;: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/17.34ac1322.js">
<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.000481a1.js">
<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/CodeBlock.54d9562d.js">
<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/HfOption.7c2eaa02.js">
<link rel="modulepreload" href="/docs/mcp-course/pr_221/en/_app/immutable/chunks/stores.0a12db33.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Using MCP with Local and Open Source Models&quot;,&quot;local&quot;:&quot;using-mcp-with-local-and-open-source-models&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Setup Continue&quot;,&quot;local&quot;:&quot;setup-continue&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;VS Code extension&quot;,&quot;local&quot;:&quot;vs-code-extension&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Local Models&quot;,&quot;local&quot;:&quot;local-models&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;How it works&quot;,&quot;local&quot;:&quot;how-it-works&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;The tool handshake&quot;,&quot;local&quot;:&quot;the-tool-handshake&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Local Model Integration with MCP&quot;,&quot;local&quot;:&quot;local-model-integration-with-mcp&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Conclusion&quot;,&quot;local&quot;:&quot;conclusion&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;: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="using-mcp-with-local-and-open-source-models" 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="#using-mcp-with-local-and-open-source-models"><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>Using MCP with Local and Open Source Models</span></h1> <p data-svelte-h="svelte-58pjmz">In this section, we’ll connect MCP with local and open-source models using
Continue, a tool for building AI coding assistants that works with local tools
like Ollama.</p> <h2 class="relative group"><a id="setup-continue" 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="#setup-continue"><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>Setup Continue</span></h2> <p data-svelte-h="svelte-8ouzrb">You can install Continue from the VS Code marketplace.</p> <blockquote class="tip" data-svelte-h="svelte-4hkx0t"><p><em>Continue also has an extension for <a href="https://plugins.jetbrains.com/plugin/22707-continue" rel="nofollow">JetBrains</a>.</em></p></blockquote> <h3 class="relative group"><a id="vs-code-extension" 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="#vs-code-extension"><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>VS Code extension</span></h3> <ol data-svelte-h="svelte-1qla4ad"><li>Click <code>Install</code> on the <a href="https://marketplace.visualstudio.com/items?itemName=Continue.continue" rel="nofollow">Continue extension page in the Visual Studio Marketplace</a></li> <li>This will open the Continue extension page in VS Code, where you will need to click <code>Install</code> again</li> <li>The Continue logo will appear on the left sidebar. For a better experience, move Continue to the right sidebar</li></ol> <p data-svelte-h="svelte-nxwcjz"><img src="https://mintlify.s3.us-west-1.amazonaws.com/continue-docs/images/move-to-right-sidebar-b2d315296198e41046fc174d8178f30a.gif" alt="move-to-right-sidebar"></p> <p data-svelte-h="svelte-1b8ooz5">With Continue configured, we’ll move on to setting up Ollama to pull local models.</p> <h3 class="relative group"><a id="local-models" 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="#local-models"><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>Local Models</span></h3> <p data-svelte-h="svelte-1urwmy9">There are many ways to run local models that are compatible with Continue. Three popular options are Ollama, Llama.cpp, and LM Studio. Ollama is an open-source tool that allows users to easily run large language models (LLMs) locally. Llama.cpp is a high-performance C++ library for running LLMs that also includes an OpenAI-compatible server. LM Studio provides a graphical interface for running local models.</p> <p data-svelte-h="svelte-1lobpzd">You can access local models from the Hugging Face Hub and get commands and quick links for all major local inference apps.</p> <p data-svelte-h="svelte-1269dzx"><img src="https://cdn-uploads.huggingface.co/production/uploads/64445e5f1bc692d87b27e183/d6XMR5q9DwVpdEKFeLW9t.png" alt="hugging face hub"></p> <div class="flex space-x-2 items-center my-1.5 mr-8 h-7 !pl-0 -mx-3 md:mx-0"><div class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd border-gray-800 bg-black dark:bg-gray-700 text-white">llamacpp </div><div class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd text-gray-500 cursor-pointer opacity-90 hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm">lmstudio </div><div class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd text-gray-500 cursor-pointer opacity-90 hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm">ollama </div></div> <div class="language-select"><p data-svelte-h="svelte-1m93zk3">Llama.cpp provides <code>llama-server</code>, a lightweight, OpenAI API compatible, HTTP server for serving LLMs. You can either build it from source by following the instructions in the <a href="https://github.com/ggml-org/llama.cpp" rel="nofollow">Llama.cpp repository</a>, or use a pre-built binary if available for your system. Check out the <a href="https://github.com/ggerganov/llama.cpp" rel="nofollow">Llama.cpp documentation</a> for more information.</p> <p data-svelte-h="svelte-k9d5rf">Once you have <code>llama-server</code>, you can run a model from Hugging Face with a command like this:</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="language-bash "><!-- HTML_TAG_START -->llama-server -hf unsloth/Devstral-Small-2505-GGUF:Q4_K_M<!-- HTML_TAG_END --></pre></div> </div> <blockquote class="tip" data-svelte-h="svelte-14hhei5"><p>Continue supports various local model providers. Besides Ollama, Llama.cpp, and LM Studio you can also use other providers. For a complete list of supported providers and detailed configuration options, please refer to the <a href="https://docs.continue.dev/customize/model-providers" rel="nofollow">Continue documentation</a>.</p></blockquote> <p data-svelte-h="svelte-e48giv">It is important that we use models that have tool calling as a built-in feature, i.e. Codestral Qwen and Llama 3.1x.</p> <ol data-svelte-h="svelte-1h6fny"><li>Create a folder called <code>.continue/models</code> at the top level of your workspace</li> <li>Add a file to this folder to configure your model provider. For example, <code>local-models.yaml</code>.</li> <li>Add the following configuration, depending on whether you are using Ollama, Llama.cpp, or LM Studio.</li></ol> <div class="flex space-x-2 items-center my-1.5 mr-8 h-7 !pl-0 -mx-3 md:mx-0"><div class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd border-gray-800 bg-black dark:bg-gray-700 text-white">llamacpp </div><div class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd text-gray-500 cursor-pointer opacity-90 hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm">lmstudio </div><div class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd text-gray-500 cursor-pointer opacity-90 hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm">ollama </div></div> <div class="language-select"><p data-svelte-h="svelte-a1uvtg">This configuration is for a <code>llama.cpp</code> model served with <code>llama-server</code>. Note that the <code>model</code> field should match the model you are serving.</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="language-yaml "><!-- HTML_TAG_START --><span class="hljs-attr">name:</span> <span class="hljs-string">Llama.cpp</span> <span class="hljs-string">model</span>
<span class="hljs-attr">version:</span> <span class="hljs-number">0.0</span><span class="hljs-number">.1</span>
<span class="hljs-attr">schema:</span> <span class="hljs-string">v1</span>
<span class="hljs-attr">models:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">provider:</span> <span class="hljs-string">llama.cpp</span>
<span class="hljs-attr">model:</span> <span class="hljs-string">unsloth/Devstral-Small-2505-GGUF</span>
<span class="hljs-attr">apiBase:</span> <span class="hljs-string">http://localhost:8080</span>
<span class="hljs-attr">defaultCompletionOptions:</span>
<span class="hljs-attr">contextLength:</span> <span class="hljs-number">8192</span> <span class="hljs-comment"># Adjust based on the model</span>
<span class="hljs-attr">name:</span> <span class="hljs-string">Llama.cpp</span> <span class="hljs-string">Devstral-Small</span>
<span class="hljs-attr">roles:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">chat</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">edit</span><!-- HTML_TAG_END --></pre></div> </div> <p data-svelte-h="svelte-7una38">By default, each model has a max context length, in this case it is <code>128000</code> tokens. This setup includes a larger use of
that context window to perform multiple MCP requests and needs to be able to handle more tokens.</p> <h2 class="relative group"><a id="how-it-works" 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="#how-it-works"><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>How it works</span></h2> <h3 class="relative group"><a id="the-tool-handshake" 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="#the-tool-handshake"><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>The tool handshake</span></h3> <p data-svelte-h="svelte-5eyg0z">Tools provide a powerful way for models to interface with the external world.
They are provided to the model as a JSON object with a name and an arguments
schema. For example, a <code>read_file</code> tool with a <code>filepath</code> argument will give the
model the ability to request the contents of a specific file.</p> <p data-svelte-h="svelte-ruu2pv"><img src="https://gist.github.com/user-attachments/assets/c7301fc0-fa5c-4dc4-9955-7ba8a6587b7a" alt="autonomous agents diagram"></p> <p data-svelte-h="svelte-1fmq0fo">The following handshake describes how the Agent uses tools:</p> <ol data-svelte-h="svelte-1x3wvx7"><li>In Agent mode, available tools are sent along with <code>user</code> chat requests</li> <li>The model can choose to include a tool call in its response</li> <li>The user gives permission. This step is skipped if the policy for that tool is set to <code>Automatic</code></li> <li>Continue calls the tool using built-in functionality or the MCP server that offers that particular tool</li> <li>Continue sends the result back to the model</li> <li>The model responds, potentially with another tool call, and step 2 begins again</li></ol> <p data-svelte-h="svelte-m0dr4y">Continue supports multiple local model providers. You can use different models
for different tasks or switch models as needed. This section focuses on
local-first solutions, but Continue does work with popular providers
like OpenAI, Anthropic, Microsoft/Azure, Mistral, and more. You can also run
your own model provider.</p> <h3 class="relative group"><a id="local-model-integration-with-mcp" 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="#local-model-integration-with-mcp"><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>Local Model Integration with MCP</span></h3> <p data-svelte-h="svelte-11pq2r7">Now that we have everything set up, let’s add an existing MCP server. Below is a quick example of setting up a new MCP server for use in your assistant:</p> <ol data-svelte-h="svelte-12actmc"><li>Create a folder called <code>.continue/mcpServers</code> at the top level of your workspace</li> <li>Add a file called <code>playwright-mcp.yaml</code> to this folder</li> <li>Write the following contents to <code>playwright-mcp.yaml</code> and save</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="language-yaml "><!-- HTML_TAG_START --><span class="hljs-attr">name:</span> <span class="hljs-string">Playwright</span> <span class="hljs-string">mcpServer</span>
<span class="hljs-attr">version:</span> <span class="hljs-number">0.0</span><span class="hljs-number">.1</span>
<span class="hljs-attr">schema:</span> <span class="hljs-string">v1</span>
<span class="hljs-attr">mcpServers:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Browser</span> <span class="hljs-string">search</span>
<span class="hljs-attr">command:</span> <span class="hljs-string">npx</span>
<span class="hljs-attr">args:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">&quot;@playwright/mcp@latest&quot;</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1e7ktui">Now test your MCP server by prompting the following command:</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-number">1.</span> Using playwright, navigate <span class="hljs-built_in">to</span> <span class="hljs-keyword">https</span>://news.ycombinator.com.
<span class="hljs-number">2.</span> Extract <span class="hljs-keyword">the</span> titles <span class="hljs-keyword">and</span> URLs <span class="hljs-keyword">of</span> <span class="hljs-keyword">the</span> top <span class="hljs-number">4</span> posts <span class="hljs-keyword">on</span> <span class="hljs-title">the</span> <span class="hljs-title">homepage</span>.
<span class="hljs-number">3.</span> Create <span class="hljs-keyword">a</span> <span class="hljs-built_in">file</span> named hn.txt <span class="hljs-keyword">in</span> <span class="hljs-keyword">the</span> root <span class="hljs-built_in">directory</span> <span class="hljs-keyword">of</span> <span class="hljs-keyword">the</span> project.
<span class="hljs-number">4.</span> Save this list <span class="hljs-keyword">as</span> plain <span class="hljs-keyword">text</span> <span class="hljs-keyword">in</span> <span class="hljs-keyword">the</span> hn.txt <span class="hljs-built_in">file</span>, <span class="hljs-keyword">with</span> <span class="hljs-keyword">each</span> <span class="hljs-built_in">line</span> containing <span class="hljs-keyword">the</span> title <span class="hljs-keyword">and</span> <span class="hljs-built_in">URL</span> separated <span class="hljs-keyword">by</span> <span class="hljs-keyword">a</span> hyphen.
Do <span class="hljs-keyword">not</span> output code <span class="hljs-keyword">or</span> instructions—just complete <span class="hljs-keyword">the</span> task <span class="hljs-keyword">and</span> confirm when <span class="hljs-keyword">it</span> is done.<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1rtu2v4">The result will be a generated file called <code>hn.txt</code> in the current working directory.</p> <p data-svelte-h="svelte-soni36"><img src="https://deploy-preview-6060--continuedev.netlify.app/assets/images/mcp-playwright-50b192a2ff395f7a6cc11618c5e2d5b1.png" alt="mcp output example"></p> <h2 class="relative group"><a id="conclusion" 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="#conclusion"><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>Conclusion</span></h2> <p data-svelte-h="svelte-3cvrrb">By combining Continue with local models like Llama 3.1 and MCP servers, you’ve
unlocked a powerful development workflow that keeps your code and data private
while leveraging cutting-edge AI capabilities.</p> <p data-svelte-h="svelte-6akgsy">This setup gives you the flexibility to customize your AI assistant with
specialized tools, from web automation to file management, all running entirely
on your local machine. Ready to take your development workflow to the next
level? Start by experimenting with different MCP servers from the <a href="https://hub.continue.dev/explore/mcp" rel="nofollow">Continue Hub
MCP explore page</a> and discover how
local AI can transform your coding experience.</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/continue-client.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, 17],
data,
form: null,
error: null
});
});
}
</script>

Xet Storage Details

Size:
33.5 kB
·
Xet hash:
00a90d36f88de8a65440f305870353f3cd854536fe4105760c9eef05afedef2b

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