<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>VoltAgent Blog</title>
        <link>https://voltagent.dev/blog</link>
        <description>The latest posts from the VoltAgent Blog</description>
        <lastBuildDate>Sat, 26 Apr 2025 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <item>
            <title><![CDATA[Building a Data-Aware Chatbot with VoltAgent and Peaka]]></title>
            <link>https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka</link>
            <guid>https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka</guid>
            <pubDate>Sat, 26 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[Learn how to integrate Peaka's powerful data access into your VoltAgent AI applications using the Model Context Protocol (MCP).]]></description>
            <content:encoded><![CDATA[<h2 class="anchor anchorWithStickyNavbar_LWe7" id="introduction">Introduction<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#introduction" class="hash-link" aria-label="Direct link to Introduction" title="Direct link to Introduction">​</a></h2>
<p>In this article, I'll demonstrate how we can implemented the Model Context Protocol (MCP) by integrating <strong>VoltAgent</strong> and <strong>Peaka</strong> to create an AI agent with data retrieval capabilities.</p>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-26-peaka-mcp-voltagent/peaka-demo.gif" alt="Peaka MCP VoltAgent" class="img_ev3q"></p>
<div class="my-8 px-6 py-4 border-dashed border-emerald-500 rounded-lg bg-gray-800"><div class="flex-grow"><a href="https://github.com/VoltAgent/voltagent/tree/main/examples/with-peaka-mcp" target="_blank" rel="noopener noreferrer" class="text-md text-emerald-400 hover:text-emerald-500 no-underline !hover:no-underline font-medium inline-flex items-center mb-3"><svg class="w-6 h-6 mr-2 hidden sm:inline-block" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>Get the code example for this article on GitHub<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 ml-1 hidden sm:inline-block"><path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clip-rule="evenodd"></path></svg></a><p class="text-gray-400 mb-3">To run this example locally:</p><div class="flex items-stretch"><code class="flex flex-grow justify-between items-center bg-gray-700 p-4 text-xs text-gray-200 font-mono whitespace-pre-wrap break-all"><span class="mr-2">npm create voltagent-app@latest -- --example with-peaka-mcp</span><button type="button" class="bg-transparent flex items-center justify-center cursor-pointer border-0 outline-none" aria-label="Copy code" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"></path></svg></button></code></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="wait-whats-peaka">Wait, What's Peaka?<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#wait-whats-peaka" class="hash-link" aria-label="Direct link to Wait, What's Peaka?" title="Direct link to Wait, What's Peaka?">​</a></h2>
<p>Right, before I show you the code stuff, let me tell you about <a href="https://www.peaka.com/" target="_blank" rel="noopener noreferrer nofollow">Peaka</a>.</p>
<p>Their idea is pretty simple: make it less annoying to work with data. Think of it like a data middleman. You hook up your databases, spreadsheets, whatever, to Peaka. Then you can ask it questions (using fancy SQL code or just regular English), and it pulls the info together from all those places for you.</p>
<p>Usually, connecting different data sources is a real pain and costs a lot. Peaka feels like a simpler option, especially if you're not a huge company or just don't want to mess with complicated data pipelines. They wanna be the easy button for getting data.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="and-voltagent">And VoltAgent?<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#and-voltagent" class="hash-link" aria-label="Direct link to And VoltAgent?" title="Direct link to And VoltAgent?">​</a></h2>
<p>It's our toolkit for putting together AI powered applications. We provide the core engine (<code>@voltagent/core</code>) to get you started, and then you can add extra capabilities, like voice interaction (<code>@voltagent/voice</code>) or support for different LLMs (OpenAI, Google, etc.). VoltAgent handles the complex stuff (like history and tool connections) so you can focus on your agent's unique features.</p>
<p>We designed VoltAgent to hit a nice sweet spot. It gives you more helpful structure than trying to build everything from raw AI libraries, but it offers a lot more freedom and customization than the simpler no-code platforms out there.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>We also built the <a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow">VoltAgent Console</a> a web interface that lets you monitor your agents, see exactly how they're working, and chat with them directly. We find it incredibly useful ourselves for debugging and testing!</p></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="making-my-agent-talk-to-peaka">Making My Agent Talk to Peaka<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#making-my-agent-talk-to-peaka" class="hash-link" aria-label="Direct link to Making My Agent Talk to Peaka" title="Direct link to Making My Agent Talk to Peaka">​</a></h2>
<p>Okay, so my plan was: build a chatbot with VoltAgent that could answer questions by checking data in Peaka.</p>
<p>To make these two talk, I used something called <strong>MCP (Model Context Protocol)</strong>. It sounds fancy, but it's basically just a standard way for different programs to give each other tasks. If you wanna know more, I wrote about <a href="https://voltagent.dev/blog/what-is-mcp/" target="_blank" rel="noopener dofollow">what MCP is over here</a>.</p>
<p>For this project, it lets VoltAgent tell Peaka, "Hey, go run this data query!"</p>
<p>To follow along, you'll want to sign up for a free Peaka account first over at <a href="https://www.peaka.com/" target="_blank" rel="noopener noreferrer nofollow">https://www.peaka.com/</a>. For this example, I'm just using the sample data they provide, which you'll have access to once you sign up.</p>
<p>Here's how I did it.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="1-starting-a-new-voltagent-project">1. Starting a New VoltAgent Project<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#1-starting-a-new-voltagent-project" class="hash-link" aria-label="Direct link to 1. Starting a New VoltAgent Project" title="Direct link to 1. Starting a New VoltAgent Project">​</a></h3>
<p>First up, I needed a blank VoltAgent project. Their setup tool makes this easy:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest my-peaka-agent</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic"># Answer the questions it asks</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token builtin class-name" style="color:#ffa657">cd</span><span class="token plain"> my-peaka-agent</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>That just makes a folder with the basic files I need to get started.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="2-telling-voltagent-about-peaka-the-mcp-bit">2. Telling VoltAgent About Peaka (The MCP Bit)<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#2-telling-voltagent-about-peaka-the-mcp-bit" class="hash-link" aria-label="Direct link to 2. Telling VoltAgent About Peaka (The MCP Bit)" title="Direct link to 2. Telling VoltAgent About Peaka (The MCP Bit)">​</a></h3>
<p>This is where the magic happens. I had to edit the main code file (<code>src/index.ts</code>) to tell VoltAgent how to find and talk to the Peaka tool using MCP.</p>
<p>This is the key chunk of code I put in:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">src/index.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> Agent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> MCPConfiguration </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/core"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VercelAIProvider </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/vercel-ai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Using Vercel's helper stuff for the AI</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> openai </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@ai-sdk/openai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// And using OpenAI's model</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 1. Set up the connection to the Peaka MCP tool</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> mcp </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">MCPConfiguration</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  id</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"peaka-mcp"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Just a nickname for this setup</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  servers</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token comment" style="color:#8b949e;font-style:italic">// Here's the info for the Peaka tool</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    peaka</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      type</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"stdio"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Means it runs like a command-line program</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      command</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"npx"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// The command to start it</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token comment" style="color:#8b949e;font-style:italic">// npx is neat, it grabs the latest Peaka MCP tool automatically</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      args</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token string" style="color:#a5d6ff">"-y"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@peaka/mcp-server-peaka@latest"</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token comment" style="color:#8b949e;font-style:italic">// Gotta give it my Peaka API key (stored safely elsewhere!)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      env</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> </span><span class="token constant" style="color:#79c0ff">PEAKA_API_KEY</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token constant" style="color:#79c0ff">PEAKA_API_KEY</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">||</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">""</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 2. Find out what the Peaka tool can actually *do*</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// (Need this `async` stuff because it takes a moment to connect)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token keyword" style="color:#ff7b72">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// Ask the MCP connection: "What tools does Peaka give us?"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> tools </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">await</span><span class="token plain"> mcp</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">getTools</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// 3. Create our actual chatbot agent</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> agent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Peaka Data Assistant"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"I can look things up in Peaka's data."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Which AI service to use</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Which specific AI brain</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    tools</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// &lt;-- Super important! Give the agent the tools from Peaka!</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// 4. Fire up VoltAgent</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    agents</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token comment" style="color:#8b949e;font-style:italic">// Make our agent live</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      agent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token builtin" style="color:#ffa657">console</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">log</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"VoltAgent is running with Peaka powers!"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>So, what's happening here?</p>
<ol>
<li><strong><code>MCPConfiguration</code></strong>: I'm telling VoltAgent, "There's this Peaka tool you can run. Use <code>npx</code> to find the <code>@peaka/mcp-server-peaka</code> thing, and give it my API key when you run it." The <code>stdio</code> part just means it runs like a regular program on my computer.</li>
<li><strong><code>mcp.getTools()</code></strong>: This is the clever bit. VoltAgent starts the Peaka tool and then asks it, "What can you do?" Peaka sends back a list of its abilities (like querying data).</li>
<li><strong><code>new Agent(...)</code></strong>: I'm making the chatbot itself. I give it a name, tell it what AI brain to use (<code>gpt-4o-mini</code>), and crucially, pass in those <code>tools</code> I got from Peaka. Now the chatbot knows it has these extra data powers.</li>
<li><strong><code>new VoltAgent(...)</code></strong>: This just starts the main VoltAgent system with my new agent included.</li>
</ol>
<p>Before running, I needed my API keys. I made a file called <code>.env</code> in the project folder and put them in there:</p>
<div class="language-.env codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">.env</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-.env codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">PEAKA_API_KEY=your_secret_peaka_key</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"># Don't forget your OpenAI key!</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">OPENAI_API_KEY=your_secret_openai_key</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>(Use your real keys, obviously! Keep 'em secret!)</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="3-running-it-and-asking-stuff">3. Running It and Asking Stuff<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#3-running-it-and-asking-stuff" class="hash-link" aria-label="Direct link to 3. Running It and Asking Stuff" title="Direct link to 3. Running It and Asking Stuff">​</a></h3>
<p>Okay, code's ready, keys are in place. Time to run it!</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> run dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>My terminal showed VoltAgent starting up, and it also started the Peaka tool automatically in the background. I saw something like this:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  VOLTAGENT SERVER STARTED SUCCESSFULLY</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  ✓ HTTP Server: http://localhost:3141</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  Developer Console:    https://console.voltagent.dev</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Now the fun test:</p>
<ol>
<li>
<p>I popped open the <a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow">VoltAgent Console</a> in my browser.</p>
</li>
<li>
<p>Found my agent ("Peaka Data Assistant").</p>
</li>
<li>
<p>Opened the chat window.</p>
</li>
<li>
<p>Asked it something that needed data from Peaka, maybe like:</p>
<blockquote>
<p>"Hey, what was my Stripe balance yesterday?"</p>
</blockquote>
</li>
</ol>
<p>Here's the cool part of what goes on:</p>
<ul>
<li>The chatbot AI gets my question.</li>
<li>It figures out I need data and sees it has that Peaka tool.</li>
<li>It decides to use the tool.</li>
<li>VoltAgent sends the request over to the Peaka tool (using MCP).</li>
<li>The Peaka tool does its thing, querying my actual Stripe data (or whatever I connected).</li>
<li>Peaka sends the answer back to VoltAgent.</li>
<li>VoltAgent gives the raw answer back to the chatbot AI.</li>
<li>The AI turns that raw data into a normal sentence and shows it to me in the chat.</li>
</ul>
<p>It looks something like this:</p>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-26-peaka-mcp-voltagent/peaka-demo.gif" alt="Peaka MCP VoltAgent" class="img_ev3q"></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="conclusion">Conclusion<a href="https://voltagent.dev/blog/data-aware-chatbot-voltagent-peaka#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion">​</a></h2>
<p>Getting Peaka hooked up to my VoltAgent bot with MCP wasn't too bad! It's pretty awesome to have a chatbot that can actually use real-time data from different places. I can see this being useful for building smarter internal tools, helpdesk bots that know current info, or anything where the AI needs to know more than just what it was trained on.</p>
<p>Definitely worth playing around with if you're building AI stuff!</p>]]></content:encoded>
            <category>mcp</category>
            <category>tutorial</category>
        </item>
        <item>
            <title><![CDATA[What's MCP and Why Should I Care?]]></title>
            <link>https://voltagent.dev/blog/what-is-mcp</link>
            <guid>https://voltagent.dev/blog/what-is-mcp</guid>
            <pubDate>Fri, 25 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[Learn about the Model Context Protocol (MCP) and how it helps AI agents like VoltAgent interact with external tools, with a practical example.]]></description>
            <content:encoded><![CDATA[<h2 class="anchor anchorWithStickyNavbar_LWe7" id="introduction">Introduction<a href="https://voltagent.dev/blog/what-is-mcp#introduction" class="hash-link" aria-label="Direct link to Introduction" title="Direct link to Introduction">​</a></h2>
<p>Ever built an AI agent and wondered how it actually <em>does</em> stuff in the real world? Like, how does it browse the web, read a file from your computer, or talk to a database?</p>
<p>It turns out a key piece of the puzzle is something called the <strong>Model Context Protocol</strong>, or <strong>MCP</strong>. It sounds technical, but the core idea is pretty neat and solves a big problem.</p>
<p>In this post, I'll walk you through:</p>
<ul>
<li><a href="https://voltagent.dev/blog/what-is-mcp#what-is-mcp" rel="noopener dofollow">What is MCP</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#why-should-i-care-about-mcp" rel="noopener dofollow">Why Should I Care About MCP?</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#finding-mcp-servers" rel="noopener dofollow">Finding MCP Servers</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#introducing-voltagent" rel="noopener dofollow">Introducing VoltAgent</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#voltagent-and-mcp" rel="noopener dofollow">VoltAgent and MCP</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#lets-build-an-example-with-voltagent" rel="noopener dofollow">Let's Build an Example with VoltAgent!</a>
<ul>
<li><a href="https://voltagent.dev/blog/what-is-mcp#setting-up-the-project" rel="noopener dofollow">Setting Up the Project</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#implementing-the-agent-and-mcp-configuration" rel="noopener dofollow">Implementing the Agent and MCP Configuration</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#running-the-agent" rel="noopener dofollow">Running the Agent</a></li>
<li><a href="https://voltagent.dev/blog/what-is-mcp#testing-in-the-console" rel="noopener dofollow">Testing in the Console</a></li>
</ul>
</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="what-is-mcp">What is MCP?<a href="https://voltagent.dev/blog/what-is-mcp#what-is-mcp" class="hash-link" aria-label="Direct link to What is MCP?" title="Direct link to What is MCP?">​</a></h2>
<p>I like to think of an AI agent as a very smart brain in a jar. It's brilliant at understanding and generating language, but it's stuck inside its digital container. It doesn't have built-in hands or eyes to interact directly with the outside world files, websites, databases, APIs, etc. To do useful tasks, it needs <strong>tools</strong>.</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>Think of it like this:</div><div class="admonitionContent_BuS1"><p>Imagine you have a bunch of different power tools: a drill, a saw, a sander. If each one needed a completely different type of power cord and plug, it would be a nightmare.</p><p>MCP acts like a <strong>universal adapter</strong> or a <strong>standard plug socket</strong> for AI tools.</p></div></div>
<p>Instead of every tool (like a file reader or a web browser) needing a unique, custom connection to the AI agent, MCP provides a <strong>standard way</strong> for agents and tools (which we call "MCP servers") to communicate.</p>
<p>This means an agent I build with a framework that understands MCP can potentially connect to <em>any</em> service or tool that also speaks this standard MCP language. This could be a tool for:</p>
<ul>
<li>Accessing my computer's <strong>filesystem</strong> (reading/writing files).</li>
<li><strong>Browsing the web</strong>.</li>
<li>Interacting with <strong>databases</strong>.</li>
<li>Connecting to specific <strong>APIs</strong> (like GitHub, Slack, Google Maps, etc.).</li>
<li>Running <strong>local scripts</strong> or applications on my machine.</li>
</ul>
<p>The main benefit I see is <strong>standardization</strong>. It makes life <em>much</em> easier. Developers can create tools (MCP servers) knowing that any compatible agent can use them, and agent builders like me can easily add diverse capabilities without writing tons of custom integration code for each one.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="why-should-i-care-about-mcp">Why Should I Care About MCP?<a href="https://voltagent.dev/blog/what-is-mcp#why-should-i-care-about-mcp" class="hash-link" aria-label="Direct link to Why Should I Care About MCP?" title="Direct link to Why Should I Care About MCP?">​</a></h2>
<p>Okay, standardization is cool, but what does that <em>really</em> mean for me when I'm trying to build a useful AI agent? Here's why I find it valuable:</p>
<ol>
<li><strong>Easier Tool Integration:</strong> This is the big one. I don't need to become an expert in every single API or system I want my agent to interact with. If someone's already built an MCP server for it (like reading files or searching the web), I can often just "plug it in" to my agent configuration. Less custom code, faster development.</li>
<li><strong>Access to Specialized Tools:</strong> The AI community is building amazing things! Maybe someone created a powerful MCP server for complex financial data analysis, controlling smart home devices, or generating specific types of images. MCP allows me to potentially leverage that specialized work directly in my agent.</li>
<li><strong>Reusability:</strong> An MCP server built for one purpose (e.g., interacting with GitHub) isn't tied to just one specific agent or even one agent framework. If another agent or platform supports MCP, that same server can potentially be reused there. Build once, use many times.</li>
<li><strong>Focus on Agent Logic:</strong> Because MCP handles the <em>how</em> of communication, I can spend more of my time and brainpower designing the <em>what</em> and <em>why</em> of my agent its goals, its personality, its core decision-making process rather than getting bogged down in the plumbing of tool connections.</li>
</ol>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="finding-mcp-servers">Finding MCP Servers<a href="https://voltagent.dev/blog/what-is-mcp#finding-mcp-servers" class="hash-link" aria-label="Direct link to Finding MCP Servers" title="Direct link to Finding MCP Servers">​</a></h2>
<p>So, where do I find these useful MCP servers? The ecosystem is definitely growing. While there isn't one single, official, all-encompassing directory (yet!), here are the places I usually look:</p>
<ul>
<li><strong>Official Examples:</strong> The creators of MCP (Anthropic) and communities maintain lists of reference implementations and examples. These are great starting points:<!-- -->
<ul>
<li><a href="https://modelcontextprotocol.io/examples" target="_blank" rel="noopener noreferrer nofollow">Model Context Protocol - Example Servers</a></li>
</ul>
</li>
<li><strong>Community Aggregators:</strong> Several websites have popped up specifically to collect and categorize MCP servers developed by the community. These can be gold mines:<!-- -->
<ul>
<li><a href="https://mcp.so/" target="_blank" rel="noopener noreferrer nofollow">mcp.so</a></li>
<li><a href="https://mcp.composio.dev/" target="_blank" rel="noopener noreferrer nofollow">MCP Explorer by Composio</a></li>
</ul>
</li>
<li><strong>Tool/Platform Documentation:</strong> Sometimes, the documentation for a specific service or tool (like a database, an API platform like Stripe, or even software like Blender) might mention if an official or community-built MCP server is available.</li>
<li><strong>Package Managers:</strong> I can also search package managers like npm (for Node.js/TypeScript projects) for packages often named like <code>@modelcontextprotocol/server-*</code> or similar.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="introducing-voltagent">Introducing VoltAgent<a href="https://voltagent.dev/blog/what-is-mcp#introducing-voltagent" class="hash-link" aria-label="Direct link to Introducing VoltAgent" title="Direct link to Introducing VoltAgent">​</a></h2>
<p>Before we dive into building, let me briefly mention <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer nofollow"><strong>VoltAgent</strong></a>. It simplifies building sophisticated AI agents, handling things like state management, tool usage, and, crucially for this post, integrating external systems like MCP servers. It lets me focus more on the agent's capabilities rather than the underlying infrastructure.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="voltagent-and-mcp">VoltAgent and MCP<a href="https://voltagent.dev/blog/what-is-mcp#voltagent-and-mcp" class="hash-link" aria-label="Direct link to VoltAgent and MCP" title="Direct link to VoltAgent and MCP">​</a></h3>
<p>VoltAgent makes integrating MCP servers relatively straightforward. The core idea is to define the servers you want to use within an <code>MCPConfiguration</code> object and then pass the tools provided by that configuration to your <code>Agent</code>.</p>
<p>VoltAgent handles the process of:</p>
<ol>
<li><strong>Starting the Server:</strong> Running the command you specify for the MCP server (like <code>npx @modelcontextprotocol/server-filesystem ...</code>).</li>
<li><strong>Connecting:</strong> Establishing communication with the running server.</li>
<li><strong>Fetching Tools:</strong> Asking the server what capabilities (tools) it offers.</li>
<li><strong>Making Tools Available:</strong> Exposing these tools (like <code>readFile</code>, <code>writeFile</code>) so your agent's LLM can understand and decide to use them.</li>
</ol>
<p>You essentially declare <em>what</em> server you want and <em>where</em> it is, and VoltAgent takes care of wiring it up to your agent.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="lets-build-an-example-with-voltagent">Let's Build an Example with VoltAgent<a href="https://voltagent.dev/blog/what-is-mcp#lets-build-an-example-with-voltagent" class="hash-link" aria-label="Direct link to Let's Build an Example with VoltAgent" title="Direct link to Let's Build an Example with VoltAgent">​</a></h3>
<p>Let's build something. I'll show you how I created a very basic VoltAgent project and connected it to the standard filesystem MCP server. This will allow our agent to read files from a specific directory on my computer.</p>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-25-what-is-an-mcp-server/mcp-demo.gif" alt="VoltAgent MCP Demo" class="img_ev3q"></p>
<div class="my-8 px-6 py-4 border-dashed border-emerald-500 rounded-lg bg-gray-800"><div class="flex-grow"><a href="https://github.com/VoltAgent/voltagent/tree/main/examples/with-mcp-server" target="_blank" rel="noopener noreferrer" class="text-md text-emerald-400 hover:text-emerald-500 no-underline !hover:no-underline font-medium inline-flex items-center mb-3"><svg class="w-6 h-6 mr-2 hidden sm:inline-block" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>Get the code example for this article on GitHub<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 ml-1 hidden sm:inline-block"><path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clip-rule="evenodd"></path></svg></a><p class="text-gray-400 mb-3">To run this example locally:</p><div class="flex items-stretch"><code class="flex flex-grow justify-between items-center bg-gray-700 p-4 text-xs text-gray-200 font-mono whitespace-pre-wrap break-all"><span class="mr-2">npm create voltagent-app@latest -- --example with-mcp-server</span><button type="button" class="bg-transparent flex items-center justify-center cursor-pointer border-0 outline-none" aria-label="Copy code" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"></path></svg></button></code></div></div></div>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="setting-up-the-project">Setting Up the Project<a href="https://voltagent.dev/blog/what-is-mcp#setting-up-the-project" class="hash-link" aria-label="Direct link to Setting Up the Project" title="Direct link to Setting Up the Project">​</a></h4>
<p>The quickest way to get started with VoltAgent is using the <code>create-voltagent-app</code> command-line tool. Let's call our project <code>mcp-filesystem-agent</code>. I opened my terminal and ran:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest mcp-filesystem-agent</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>This command guides you through setup. I mostly chose the defaults but made sure to select <strong>TypeScript</strong>. (For more details, check the <a rel="noopener dofollow" href="https://voltagent.dev/docs/quick-start/">VoltAgent Quick Start guide</a>).</p>
<p>After it finished, I navigated into the new project directory:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token builtin class-name" style="color:#ffa657">cd</span><span class="token plain"> mcp-filesystem-agent</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>This sets up a basic project structure:</p>
<div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">mcp-filesystem-agent/</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── src/</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">│   └── index.ts     # Our main agent logic goes here!</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── package.json     # Project dependencies</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── tsconfig.json    # TypeScript configuration</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── .gitignore       # Files for Git to ignore</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">└── .env             # For API keys (you'll need to add your key here)</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="implementing-the-agent-and-mcp-configuration">Implementing the Agent and MCP Configuration<a href="https://voltagent.dev/blog/what-is-mcp#implementing-the-agent-and-mcp-configuration" class="hash-link" aria-label="Direct link to Implementing the Agent and MCP Configuration" title="Direct link to Implementing the Agent and MCP Configuration">​</a></h4>
<p>Now for the core part. I opened <code>src/index.ts</code> and set up the MCP configuration and the agent definition.</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">src/index.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> openai </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@ai-sdk/openai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> Agent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> MCPConfiguration </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/core"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VercelAIProvider </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/vercel-ai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// Node.js 'path' module helps create safe, cross-platform file paths</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> path </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"node:path"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> mcpConfig </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">MCPConfiguration</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  servers</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    filesystem</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token comment" style="color:#8b949e;font-style:italic">// 'stdio' means VoltAgent will run this as a local command-line process</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token comment" style="color:#8b949e;font-style:italic">// and communicate with it via standard input/output.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      type</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"stdio"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      command</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"npx"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      args</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token string" style="color:#a5d6ff">"-y"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@modelcontextprotocol/server-filesystem"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> path</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">resolve</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"./data"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> agent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"MCP Filesystem Agent"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token string" style="color:#a5d6ff">"I am an agent that can read and write files inside a specific 'data' directory, using tools provided by an MCP server."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  tools</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">await</span><span class="token plain"> mcpConfig</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">getTools</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  agents</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    fsAgent</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> agent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Code Breakdown (My Understanding):</strong></p>
<ul>
<li><strong><code>MCPConfiguration</code>:</strong> This is where I defined the <code>filesystem</code> server connection.<!-- -->
<ul>
<li><code>type: "stdio"</code> tells VoltAgent it's a local command to run.</li>
<li><code>command: "npx"</code> specifies <em>how</em> to run it.</li>
<li><code>args: [...]</code> provides the details: the MCP server package (<code>@modelcontextprotocol/server-filesystem</code>) and, crucially, <code>path.resolve("./data")</code>. This locks the server down, only allowing it to see inside a <code>./data</code> folder within my project. <strong>I had to remember to actually create this <code>data</code> folder later (<code>mkdir data</code>)!</strong> This is super important for security.</li>
</ul>
</li>
<li><strong><code>Agent</code> Definition:</strong> I created my <code>Agent</code> instance. The key part is <code>tools: await mcpConfig.getTools()</code>. This line tells VoltAgent: "Go connect to all the servers I defined in <code>mcpConfig</code>, find out what tools they offer (like <code>readFile</code>, <code>writeFile</code> from the filesystem server), and make those tools available for this agent's LLM to use."</li>
<li><strong><code>VoltAgent</code> Initialization:</strong> I started the main VoltAgent server and registered my <code>agent</code> under the key <code>fsAgent</code>. This key is how I'll select it in the VoltAgent Console.</li>
</ul>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="running-the-agent">Running the Agent<a href="https://voltagent.dev/blog/what-is-mcp#running-the-agent" class="hash-link" aria-label="Direct link to Running the Agent" title="Direct link to Running the Agent">​</a></h4>
<p>Before running, we need two things: an API key for the LLM and the <code>data</code> directory we restricted the MCP server to.</p>
<ol>
<li>
<p><strong>Create <code>.env</code> file:</strong> In the root of the <code>mcp-filesystem-agent</code> project, I created a file named <code>.env</code>.</p>
</li>
<li>
<p><strong>Add API Key:</strong> Inside <code>.env</code>, I added my OpenAI key:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">.env</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token assign-left variable" style="color:#79c0ff">OPENAI_API_KEY</span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain">your_openai_api_key_here</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>(Obviously, replace <code>your_openai_api_key_here</code> with your actual key).</p>
</li>
<li>
<p><strong>Create <code>data</code> Directory and Test File:</strong> In the terminal, still in the project root:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">mkdir</span><span class="token plain"> data</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token builtin class-name" style="color:#ffa657">echo</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Hello from the MCP agent's accessible file!"</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">&gt;</span><span class="token plain"> data/test.txt</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>Install Dependencies:</strong> Make sure all packages are installed:</p>
<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
</li>
<li>
<p><strong>Start the Agent:</strong> Run the development server:</p>
<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> run dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">yarn</span><span class="token plain"> dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">pnpm</span><span class="token plain"> dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
</li>
</ol>
<p>I saw the VoltAgent server startup message, including the link to the Developer Console:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  VOLTAGENT SERVER STARTED SUCCESSFULLY</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  ✓ HTTP Server: http://localhost:3141</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  Developer Console:    https://console.voltagent.dev</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>This also automatically started the filesystem MCP server process in the background.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="testing-in-the-console">Testing in the Console<a href="https://voltagent.dev/blog/what-is-mcp#testing-in-the-console" class="hash-link" aria-label="Direct link to Testing in the Console" title="Direct link to Testing in the Console">​</a></h4>
<p>Now for the moment of truth!</p>
<ol>
<li><strong>Open Console:</strong> I went to <a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow"><code>https://console.voltagent.dev</code></a> in my browser.</li>
<li><strong>Find Agent:</strong> My agent was listed with the key <code>fsAgent</code> (and the name "MCP Filesystem Agent"). I clicked on it.</li>
<li><strong>Chat:</strong> I clicked the chat icon (bottom-right) to open the chat window.</li>
<li><strong>Ask it to Read:</strong> I typed the following message and hit Enter:
<code>Please read the file named test.txt in the data directory.</code></li>
</ol>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-25-what-is-an-mcp-server/mcp-demo.gif" alt="VoltAgent MCP Demo" class="img_ev3q"></p>
<p>Here's what happened behind the scenes (which I could see in the console's trace):</p>
<ol>
<li>My agent received the message.</li>
<li>The LLM understood I wanted to read a file and saw it had a <code>readFile</code> tool available (thanks to MCP and VoltAgent).</li>
<li>The agent decided to use the <code>readFile</code> tool, passing <code>test.txt</code> as the argument.</li>
<li>VoltAgent routed this tool call to the running filesystem MCP server process.</li>
<li>The MCP server (safely restricted to the <code>./data</code> directory) read <code>test.txt</code> and sent its content back.</li>
<li>VoltAgent passed the content back to the agent's LLM.</li>
<li>The LLM formulated a response like, "Okay, I read the file test.txt. The content is: Hello from the MCP agent's accessible file!" and sent it to me in the chat.</li>
</ol>
<p>The agent used an external tool via MCP to interact with my local filesystem, exactly as planned.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="conclusion">Conclusion<a href="https://voltagent.dev/blog/what-is-mcp#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion">​</a></h2>
<p>MCP felt a bit abstract at first, but seeing it work makes its value clear. It really does act like that universal adapter, allowing my AI agent to gain new capabilities (like accessing files) just by configuring the right MCP server. VoltAgent made the process of connecting that server to the agent pretty painless.</p>
<p>By providing this standard communication layer, MCP opens the door for agents to safely and reliably interact with a huge range of external systems.</p>]]></content:encoded>
            <category>mcp</category>
        </item>
        <item>
            <title><![CDATA[Building a RAG Chatbot with VoltAgent]]></title>
            <link>https://voltagent.dev/blog/rag-chatbot</link>
            <guid>https://voltagent.dev/blog/rag-chatbot</guid>
            <pubDate>Thu, 24 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[Build RAG chatbots with VoltAgent to use external knowledge.]]></description>
            <content:encoded><![CDATA[<h2 class="anchor anchorWithStickyNavbar_LWe7" id="introduction">Introduction<a href="https://voltagent.dev/blog/rag-chatbot#introduction" class="hash-link" aria-label="Direct link to Introduction" title="Direct link to Introduction">​</a></h2>
<p>Chatbots have become incredibly useful, haven't they? From customer support to personal assistants, they handle conversations pretty well. But sometimes, standard chatbots hit a wall – their knowledge is limited to what they were trained on.</p>
<p>What if you want your chatbot to answer questions based on specific documents, recent data, or a private knowledge base?</p>
<p>That's where <strong>Retrieval-Augmented Generation (RAG)</strong> comes in.</p>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-24-rag-chatbot/rag-chatbot-voltagent-console.gif" alt="VoltAgent Console Chat Example" class="img_ev3q"></p>
<p>Steps we'll cover:</p>
<ul>
<li><a href="https://voltagent.dev/blog/rag-chatbot#what-is-rag-and-why-use-it" rel="noopener dofollow">What RAG (Retrieval-Augmented Generation) is and why it's useful.</a></li>
<li><a href="https://voltagent.dev/blog/rag-chatbot#voltagents-retriever-system" rel="noopener dofollow">How VoltAgent's Retriever system facilitates RAG.</a></li>
<li><a href="https://voltagent.dev/blog/rag-chatbot#setting-up-the-project" rel="noopener dofollow">Setting up a VoltAgent project.</a></li>
<li><a href="https://voltagent.dev/blog/rag-chatbot#implementing-the-retriever-and-agent" rel="noopener dofollow">Implementing a custom <code>BaseRetriever</code> with a simple knowledge base.</a></li>
<li><a href="https://voltagent.dev/blog/rag-chatbot#implementing-the-retriever-and-agent" rel="noopener dofollow">Creating a VoltAgent <code>Agent</code> that uses the retriever directly.</a></li>
<li><a href="https://voltagent.dev/blog/rag-chatbot#running-the-agent" rel="noopener dofollow">Running and testing the RAG chatbot using the VoltAgent Console.</a></li>
</ul>
<div class="my-8 px-6 py-4 border-dashed border-emerald-500 rounded-lg bg-gray-800"><div class="flex-grow"><a href="https://github.com/VoltAgent/voltagent/tree/main/examples/with-rag-chatbot" target="_blank" rel="noopener noreferrer" class="text-md text-emerald-400 hover:text-emerald-500 no-underline !hover:no-underline font-medium inline-flex items-center mb-3"><svg class="w-6 h-6 mr-2 hidden sm:inline-block" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>Get the code example for this article on GitHub<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 ml-1 hidden sm:inline-block"><path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clip-rule="evenodd"></path></svg></a><p class="text-gray-400 mb-3">To run this example locally:</p><div class="flex items-stretch"><code class="flex flex-grow justify-between items-center bg-gray-700 p-4 text-xs text-gray-200 font-mono whitespace-pre-wrap break-all"><span class="mr-2">npm create voltagent-app@latest -- --example with-rag-chatbot</span><button type="button" class="bg-transparent flex items-center justify-center cursor-pointer border-0 outline-none" aria-label="Copy code" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"></path></svg></button></code></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="what-is-rag-and-why-use-it">What is RAG, and Why Use It?<a href="https://voltagent.dev/blog/rag-chatbot#what-is-rag-and-why-use-it" class="hash-link" aria-label="Direct link to What is RAG, and Why Use It?" title="Direct link to What is RAG, and Why Use It?">​</a></h2>
<p>At its core, RAG is a technique that helps Large Language Models (LLMs) like the ones powering chatbots become smarter by giving them access to external information <em>before</em> they generate a response.</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>Think of it like this:</div><div class="admonitionContent_BuS1"><ul>
<li><strong>Retrieval:</strong> When you ask a RAG-enabled chatbot a question, it first <em>retrieves</em> relevant snippets of information from a predefined data source (like documents, databases, or websites).</li>
<li><strong>Augmentation:</strong> This retrieved information (the "context") is then <em>added</em> to your original question.</li>
<li><strong>Generation:</strong> Finally, the LLM receives the combined prompt (your question + the retrieved context) and <em>generates</em> an answer that's grounded in that specific information.</li>
</ul></div></div>
<p>The result? Chatbots that can provide more accurate, up-to-date, and contextually relevant answers, going beyond their built-in knowledge. I find this incredibly powerful for building bots that need to know about specific product documentation, internal company policies, or recent news.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="introducing-voltagent">Introducing VoltAgent<a href="https://voltagent.dev/blog/rag-chatbot#introducing-voltagent" class="hash-link" aria-label="Direct link to Introducing VoltAgent" title="Direct link to Introducing VoltAgent">​</a></h2>
<p>Before we dive into building, let me briefly mention <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer nofollow"><strong>VoltAgent</strong></a>. It's a TypeScript framework I've been working with that makes building sophisticated AI agents (like our RAG chatbot) much simpler. It handles a lot of the boilerplate, letting me focus on the core logic of my agents, including how they retrieve and use information.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="voltagents-retriever-system">VoltAgent's Retriever System<a href="https://voltagent.dev/blog/rag-chatbot#voltagents-retriever-system" class="hash-link" aria-label="Direct link to VoltAgent's Retriever System" title="Direct link to VoltAgent's Retriever System">​</a></h2>
<p>VoltAgent provides a streamlined way to implement RAG through its <strong>Retriever</strong> system. The key component is the <code>BaseRetriever</code> abstract class (you can find it in <code>@voltagent/core</code>).</p>
<p>To add RAG capabilities to your agent, you essentially need to:</p>
<ol>
<li><strong>Create a Custom Retriever:</strong> Extend <code>BaseRetriever</code> and implement the <code>retrieve</code> method. This method contains your logic for fetching relevant data from your chosen source based on the user's input.</li>
<li><strong>Connect it to an Agent:</strong> VoltAgent offers two main ways to do this, as detailed in the <a rel="noopener dofollow" href="https://voltagent.dev/docs/agents/retriever/">Retriever documentation</a>:<!-- -->
<ul>
<li><strong>Direct Attachment (<code>agent.retriever</code>):</strong> The retriever runs automatically <em>before every</em> LLM call for that agent. Simple, ensures context is always fetched.</li>
<li><strong>As a Tool (<code>agent.tools</code>):</strong> The LLM decides <em>when</em> to call the retriever tool based on the conversation. More efficient and flexible, especially if retrieval isn't always needed.</li>
</ul>
</li>
</ol>
<br>
<div class="border border-solid border-emerald-500 rounded-lg p-5 mb-6 bg-gray-800 shadow-lg"><h4 class="mt-0 mb-6 text-lg font-semibold text-emerald-400 text-center">Help Me Choose: Retriever Method</h4><div class="mb-6"><p class="block mb-2 font-medium text-white text-sm">How often will your agent need the retrieved information?</p><div class="flex flex-col gap-3"><label class="flex items-center cursor-pointer p-3 rounded-md border-solid border bg-gray-800 transition-colors duration-200 text-white hover:border-emerald-400/50 hover:bg-gray-700 border-gray-700"><input type="radio" name="frequency" class="mr-3 accent-emerald-500" value="always"><span class="flex-grow text-sm"> <!-- -->Always (on almost every request)</span></label><label class="flex items-center cursor-pointer p-3 rounded-md border-solid border bg-gray-800 transition-colors duration-200 text-white hover:border-emerald-400/50 hover:bg-gray-700 border-gray-700"><input type="radio" name="frequency" class="mr-3 accent-emerald-500" value="sometimes"><span class="flex-grow text-sm"> <!-- -->Sometimes (only for specific types of queries)</span></label><label class="flex items-center cursor-pointer p-3 rounded-md border-solid border bg-gray-800 transition-colors duration-200 text-white hover:border-emerald-400/50 hover:bg-gray-700 border-gray-700"><input type="radio" name="frequency" class="mr-3 accent-emerald-500" value="unsure"><span class="flex-grow text-sm"> <!-- -->I'm not sure yet</span></label></div></div><div class="mb-6"><p class="block mb-2 font-medium text-white text-sm">How important is it for the agent (LLM) to *decide* when to retrieve?</p><div class="flex flex-col gap-3"><label class="flex items-center cursor-pointer p-3 rounded-md border-solid border bg-gray-800 transition-colors duration-200 text-white hover:border-emerald-400/50 hover:bg-gray-700 border-gray-700"><input type="radio" name="agentDecision" class="mr-3 accent-emerald-500" value="not_important"><span class="flex-grow text-sm"> <!-- -->Not Important (It can always retrieve)</span></label><label class="flex items-center cursor-pointer p-3 rounded-md border-solid border bg-gray-800 transition-colors duration-200 text-white hover:border-emerald-400/50 hover:bg-gray-700 border-gray-700"><input type="radio" name="agentDecision" class="mr-3 accent-emerald-500" value="somewhat_important"><span class="flex-grow text-sm"> <!-- -->Somewhat Important</span></label><label class="flex items-center cursor-pointer p-3 rounded-md border-solid border bg-gray-800 transition-colors duration-200 text-white hover:border-emerald-400/50 hover:bg-gray-700 border-gray-700"><input type="radio" name="agentDecision" class="mr-3 accent-emerald-500" value="very_important"><span class="flex-grow text-sm"> <!-- -->Very Important (Agent should choose)</span></label></div></div></div>
<p>For this tutorial, we'll use the <strong>direct attachment</strong> method for simplicity. Our agent will always try to fetch context from its small knowledge base before answering.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="lets-build-a-simple-rag-chatbot">Let's Build a Simple RAG Chatbot<a href="https://voltagent.dev/blog/rag-chatbot#lets-build-a-simple-rag-chatbot" class="hash-link" aria-label="Direct link to Let's Build a Simple RAG Chatbot" title="Direct link to Let's Build a Simple RAG Chatbot">​</a></h2>
<p>Okay, theory's great, but let's get hands-on. I'll show you how I built a basic RAG chatbot using VoltAgent that answers questions based on a small, hardcoded set of facts about VoltAgent itself.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="setting-up-the-project">Setting Up the Project<a href="https://voltagent.dev/blog/rag-chatbot#setting-up-the-project" class="hash-link" aria-label="Direct link to Setting Up the Project" title="Direct link to Setting Up the Project">​</a></h3>
<p>The easiest way to start a new VoltAgent project is using the <code>create-voltagent-app</code> CLI tool. For this example, let's name our project <code>with-rag-chatbot</code>. Open your terminal and run:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest with-rag-chatbot</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>This command will guide you through the setup process. (For more details on using the CLI or setting up manually, check the <a rel="noopener dofollow" href="https://voltagent.dev/docs/quick-start/">Quick Start guide</a>).</p>
<p>After the setup, navigate into your new project directory:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token builtin class-name" style="color:#ffa657">cd</span><span class="token plain"> with-rag-chatbot</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>The CLI sets up a standard project structure for you:</p>
<div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">with-rag-chatbot/</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── src/</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">│   └── index.ts     # Our main agent logic will go here</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── package.json     # Project dependencies</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── tsconfig.json    # TypeScript config</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">├── .gitignore       # Git ignore rules</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">└── .env             # API keys (important!) - created automatically or you add it</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>The generated <code>package.json</code> will be similar to these (though versions might differ slightly):</p>
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">package.json (Example)</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">// ... (scripts, name: "with-rag-chatbot", etc.)</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  "dependencies": {</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    "@ai-sdk/openai": "...", // Or your chosen LLM SDK</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    "@voltagent/core": "...",</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    "@voltagent/vercel-ai": "...", // Or your chosen provider</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    "zod": "..."</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  },</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">// ... (devDependencies)</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Now, let's focus on the code inside <code>src/index.ts</code>.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="implementing-the-retriever-and-agent">Implementing the Retriever and Agent<a href="https://voltagent.dev/blog/rag-chatbot#implementing-the-retriever-and-agent" class="hash-link" aria-label="Direct link to Implementing the Retriever and Agent" title="Direct link to Implementing the Retriever and Agent">​</a></h3>
<p>This is where the magic happens. In <code>src/index.ts</code>, I defined a simple retriever and an agent that uses it.</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">src/index.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> Agent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> BaseRetriever</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">type</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">BaseMessage</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/core"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VercelAIProvider </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/vercel-ai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> openai </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@ai-sdk/openai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// --- Simple Knowledge Base Retriever ---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">class</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">KnowledgeBaseRetriever</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">BaseRetriever</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// Our tiny "knowledge base"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token keyword" style="color:#ff7b72">private</span><span class="token plain"> documents </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      id</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"doc1"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      content</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"What is VoltAgent? VoltAgent is a TypeScript framework for building AI agents."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      id</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"doc2"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      content</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">        </span><span class="token string" style="color:#a5d6ff">"What features does VoltAgent support? VoltAgent supports tools, memory, sub-agents, and retrievers for RAG."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> id</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"doc3"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> content</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"What is RAG? RAG stands for Retrieval-Augmented Generation."</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      id</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"doc4"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      content</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">        </span><span class="token string" style="color:#a5d6ff">"How can I test my agent? You can test VoltAgent agents using the VoltAgent Console."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// Reverting to simple retrieve logic</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token keyword" style="color:#ff7b72">async</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">retrieve</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token plain">input</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token builtin" style="color:#ffa657">string</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">|</span><span class="token plain"> BaseMessage</span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token builtin" style="color:#ffa657">Promise</span><span class="token operator" style="color:#c9d1d9">&lt;</span><span class="token builtin" style="color:#ffa657">string</span><span class="token operator" style="color:#c9d1d9">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> query </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">typeof</span><span class="token plain"> input </span><span class="token operator" style="color:#c9d1d9">===</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"string"</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">?</span><span class="token plain"> input </span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token plain">input</span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token plain">input</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token plain">length </span><span class="token operator" style="color:#c9d1d9">-</span><span class="token plain"> </span><span class="token number" style="color:#79c0ff">1</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token plain">content </span><span class="token keyword" style="color:#ff7b72">as</span><span class="token plain"> </span><span class="token builtin" style="color:#ffa657">string</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> queryLower </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> query</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">toLowerCase</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token builtin" style="color:#ffa657">console</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">log</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token template-string string" style="color:#a5d6ff">[KnowledgeBaseRetriever] Searching for context related to: "</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">${</span><span class="token template-string interpolation">query</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">}</span><span class="token template-string string" style="color:#a5d6ff">"</span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token comment" style="color:#8b949e;font-style:italic">// Simple includes check</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> relevantDocs </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">this</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token plain">documents</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">filter</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token plain">doc</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">=&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      doc</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token plain">content</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">toLowerCase</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">includes</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token plain">queryLower</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token keyword" style="color:#ff7b72">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token plain">relevantDocs</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token plain">length </span><span class="token operator" style="color:#c9d1d9">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#79c0ff">0</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> contextString </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> relevantDocs</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">map</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token plain">doc</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">=&gt;</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token template-string string" style="color:#a5d6ff">- </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">${</span><span class="token template-string interpolation">doc</span><span class="token template-string interpolation punctuation" style="color:#c9d1d9">.</span><span class="token template-string interpolation">content</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">}</span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">join</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"\n"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token builtin" style="color:#ffa657">console</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">log</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token template-string string" style="color:#a5d6ff">[KnowledgeBaseRetriever] Found context:\n</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">${</span><span class="token template-string interpolation">contextString</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">}</span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      </span><span class="token keyword" style="color:#ff7b72">return</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token template-string string" style="color:#a5d6ff">Relevant Information Found:\n</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">${</span><span class="token template-string interpolation">contextString</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#c9d1d9">}</span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token builtin" style="color:#ffa657">console</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">log</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"[KnowledgeBaseRetriever] No relevant context found."</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token keyword" style="color:#ff7b72">return</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"No relevant information found in the knowledge base."</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// --- Agent Definition ---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// Instantiate the retriever</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> knowledgeRetriever </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">KnowledgeBaseRetriever</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// Define the agent that uses the retriever directly</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> ragAgent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"RAG Chatbot"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"A chatbot that answers questions based on its internal knowledge base."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Using Vercel AI SDK Provider</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Using OpenAI model via Vercel</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// Attach the retriever directly</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  retriever</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> knowledgeRetriever</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// --- VoltAgent Initialization ---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  agents</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token comment" style="color:#8b949e;font-style:italic">// Make the agent available under the key 'ragAgent'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    ragAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Code Breakdown:</strong></p>
<ul>
<li><strong><code>KnowledgeBaseRetriever</code>:</strong> Extends <code>BaseRetriever</code>. It holds a small array of <code>documents</code>. The <code>retrieve</code> method performs a simple case-insensitive search. If it finds matches, it formats them into a string prefixed with "Relevant Information Found:"; otherwise, it returns a "not found" message.</li>
<li><strong><code>ragAgent</code>:</strong> An <code>Agent</code> instance.<!-- -->
<ul>
<li>We give it a name and description.</li>
<li>We configure the <code>llm</code> provider and <code>model</code>.</li>
<li>Crucially, we set <code>retriever: knowledgeRetriever</code>. This tells VoltAgent to automatically run our retriever before calling the LLM.</li>
<li>The <code>systemPrompt</code> is important here. It explicitly tells the LLM to base its answers <em>only</em> on the "Relevant Information Found" (which our retriever provides) and what to do if no information is found. This helps prevent the LLM from falling back on its general knowledge.</li>
</ul>
</li>
<li><strong><code>new VoltAgent(...)</code>:</strong> Initializes the VoltAgent server and registers our <code>ragAgent</code>.</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="running-the-agent">Running the Agent<a href="https://voltagent.dev/blog/rag-chatbot#running-the-agent" class="hash-link" aria-label="Direct link to Running the Agent" title="Direct link to Running the Agent">​</a></h3>
<p>Before running, you need an API key for your chosen LLM provider (like OpenAI).</p>
<ol>
<li>
<p><strong>Create <code>.env</code> file:</strong> In the root of your <code>with-rag-chatbot</code> project folder, create a file named <code>.env</code>.</p>
</li>
<li>
<p><strong>Add API Key:</strong> Add your key like this:
<code>bash title=".env" OPENAI_API_KEY=your_openai_api_key_here </code>
(Replace <code>your_openai_api_key_here</code> with your actual key).</p>
</li>
<li>
<p><strong>Install Dependencies:</strong> Open your terminal <em>inside</em> the <code>with-rag-chatbot</code> directory and run:</p>
<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
</li>
<li>
<p><strong>Start the Agent:</strong> Run the development server:</p>
<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> run dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">yarn</span><span class="token plain"> dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">pnpm</span><span class="token plain"> dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
</li>
</ol>
<p>You should see the VoltAgent server startup message, including a link to the Developer Console:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  VOLTAGENT SERVER STARTED SUCCESSFULLY</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  ✓ HTTP Server: http://localhost:3141</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  Developer Console:    https://console.voltagent.dev</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="testing-in-the-console">Testing in the Console<a href="https://voltagent.dev/blog/rag-chatbot#testing-in-the-console" class="hash-link" aria-label="Direct link to Testing in the Console" title="Direct link to Testing in the Console">​</a></h3>
<p>Now for the fun part!</p>
<ol>
<li><strong>Open Console:</strong> Go to <a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow"><code>https://console.voltagent.dev</code></a> in your browser.</li>
<li><strong>Find Agent:</strong> You should see your "RAG Chatbot" listed. Click on it.</li>
<li><strong>Chat:</strong> Click the chat icon (usually bottom-right) to open the chat window.</li>
<li><strong>Ask Questions:</strong> Try asking questions related to the <code>documents</code> in our retriever:<!-- -->
<ul>
<li><code>What is VoltAgent?</code> (Should use doc1)</li>
<li><code>What features does VoltAgent support?</code> (Should use doc2)</li>
<li><code>How can I test my agent?</code> (Should use doc4)</li>
<li><code>What is the capital of France?</code> (Should state it can't answer based on its knowledge base, because of our system prompt and lack of relevant documents).</li>
</ul>
</li>
</ol>
<p>Observe the responses. They should be directly based on the content from the <code>documents</code> array we provided! You can also check your terminal where you ran <code>npm run dev</code> - you'll see the logs from the <code>KnowledgeBaseRetriever</code> showing what context (if any) was found for each query.</p>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-24-rag-chatbot/rag-chatbot-voltagent-console.gif" alt="VoltAgent Console Chat Example" class="img_ev3q"></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="conclusion">Conclusion<a href="https://voltagent.dev/blog/rag-chatbot#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion">​</a></h2>
<p>As you can see, implementing a basic RAG system with VoltAgent is quite straightforward. By creating a custom <code>BaseRetriever</code> and attaching it to an <code>Agent</code>, I could quickly build a chatbot grounded in specific external knowledge.</p>
<p>This simple example uses hardcoded data, but you could easily adapt the <code>KnowledgeBaseRetriever</code> to fetch data from a real database, API, or vector store for much more powerful applications. RAG opens up a lot of possibilities for creating smarter, more knowledgeable AI agents, and I think VoltAgent makes it significantly easier to get started.</p>]]></content:encoded>
            <category>rag</category>
            <category>tutorial</category>
        </item>
        <item>
            <title><![CDATA[Multi-Agent LLM Systems in 2025]]></title>
            <link>https://voltagent.dev/blog/multi-agent-llm</link>
            <guid>https://voltagent.dev/blog/multi-agent-llm</guid>
            <pubDate>Wed, 23 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[Go beyond single LLMs - Easily build multi-agent AI systems with VoltAgent.]]></description>
            <content:encoded><![CDATA[<p>Large language models like ChatGPT have become commonplace tools, helping me write emails as well as code. Other times, though, I found that one LLM wasn't sufficient to manage complex, multistep tasks. That's where I started exploring "multi-agent systems."</p>
<p>Steps we'll cover:</p>
<ul>
<li><a href="https://voltagent.dev/blog/multi-agent-llm#what-are-multi-agent-llm-systems" rel="noopener dofollow">What Are Multi-Agent LLM Systems?</a></li>
<li><a href="https://voltagent.dev/blog/multi-agent-llm#why-i-started-using-multi-agent-systems-and-their-benefits" rel="noopener dofollow">Why I Started Using Multi-Agent Systems and Their Benefits</a>
<ul>
<li><a href="https://voltagent.dev/blog/multi-agent-llm#are-there-any-downsides-my-experience-with-challenges" rel="noopener dofollow">Are There Any Downsides? My Experience with Challenges</a></li>
</ul>
</li>
<li><a href="https://voltagent.dev/blog/multi-agent-llm#choosing-the-right-llm-for-your-agents" rel="noopener dofollow">Choosing the Right LLM for Your Agents</a></li>
<li><a href="https://voltagent.dev/blog/multi-agent-llm#how-i-use-voltagent-for-multi-agent-systems" rel="noopener dofollow">How I Use VoltAgent for Multi-Agent Systems</a>
<ul>
<li><a href="https://voltagent.dev/blog/multi-agent-llm#let-me-show-you-a-practical-example-with-voltagent" rel="noopener dofollow">Let Me Show You a Practical Example with VoltAgent</a></li>
</ul>
</li>
<li><a href="https://voltagent.dev/blog/multi-agent-llm#my-final-thoughts" rel="noopener dofollow">My Final Thoughts</a></li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="what-are-multi-agent-llm-systems">What Are Multi-Agent LLM Systems?<a href="https://voltagent.dev/blog/multi-agent-llm#what-are-multi-agent-llm-systems" class="hash-link" aria-label="Direct link to What Are Multi-Agent LLM Systems?" title="Direct link to What Are Multi-Agent LLM Systems?">​</a></h2>
<p>Simply put, I see an agent system like having multiple specialist AI agents working together to accomplish an objective. I think of it like project work where individuals have specific talents. In my experience, there is often one "boss" agent that oversees the team to assign individual tasks to individual "sub-agents."</p>
<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>suppose I need to prepare a research report:</div><div class="admonitionContent_BuS1"><ul>
<li>A <strong>Research Agent</strong> gathers relevant data from the internet.-</li>
<li>The <strong>Writer Agent</strong> processes this information to create the report.</li>
<li>The draft goes through review and polishing by an <strong>Editor Agent</strong>.</li>
<li>A <strong>Summarizer agent</strong> creates a short summary of the final report.</li>
</ul></div></div>
<p>The Supervisor Agent organizes all this by assigning tasks to the respective agents and collating their results before presenting the final output.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="why-i-started-using-multi-agent-systems-and-their-benefits">Why I Started Using Multi-Agent Systems and Their Benefits<a href="https://voltagent.dev/blog/multi-agent-llm#why-i-started-using-multi-agent-systems-and-their-benefits" class="hash-link" aria-label="Direct link to Why I Started Using Multi-Agent Systems and Their Benefits" title="Direct link to Why I Started Using Multi-Agent Systems and Their Benefits">​</a></h2>
<p>Instead of relying on a single AI to carry out all tasks, I've found allocating tasks between specialist agents has numerous benefits:</p>
<ul>
<li><strong>Expertise:</strong> Each agent has an area of specialty (e.g., coding, translation or data analysis), leading to higher-quality results in my projects.</li>
<li><strong>Multistep workflows:</strong> Steps in tasks that have more than one step (e.g., product concept creation, market research, preparation of presentations) become more manageable. The flow is coordinated by the supervisor.</li>
<li><strong>Scalability &amp; Modularity:</strong> Sub-problems of complex tasks are broken down. I find integrating new, specialist agents is easy, or existing ones can simply be modified.</li>
<li><strong>Enhanced Quality Output:</strong> Through concentrated capabilities of task-specific agents for individual sections of an inquiry, overall performance in terms of output is improved.</li>
<li><strong>Flexibility:</strong> Any combination of agents can perform more than one task, giving me more options.</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="are-there-any-downsides-my-experience-with-challenges">Are There Any Downsides? My Experience with Challenges<a href="https://voltagent.dev/blog/multi-agent-llm#are-there-any-downsides-my-experience-with-challenges" class="hash-link" aria-label="Direct link to Are There Any Downsides? My Experience with Challenges" title="Direct link to Are There Any Downsides? My Experience with Challenges">​</a></h3>
<p>Like any technology I work with, multi-agent systems aren't without their challenges:</p>
<ul>
<li><strong>Coordination Complexity:</strong> Coordination between agents involves delegating tasks, including communication, that adds complexity to my setups.</li>
<li><strong>Dealing with errors:</strong> A single agent's mistake or miscommunication can influence all processes, making it hard sometimes to pinpoint where the issue lies.</li>
<li><strong>Cost:</strong> Deploying multiple agents can potentially be computationally more expensive than deploying one. Fortunately, modern architectures like VoltAgent, which I'll discuss next, help address these limitations.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="choosing-the-right-llm-for-your-agents">Choosing the Right LLM for Your Agents<a href="https://voltagent.dev/blog/multi-agent-llm#choosing-the-right-llm-for-your-agents" class="hash-link" aria-label="Direct link to Choosing the Right LLM for Your Agents" title="Direct link to Choosing the Right LLM for Your Agents">​</a></h2>
<p>Selecting the appropriate Large Language Model (LLM) for each agent, including the supervisor, is a key part of designing an effective multi-agent system. It's not always necessary, or even optimal, for every agent to use the same model. Here are a few things I consider:</p>
<ul>
<li><strong>Task Needs:</strong> Does an agent need strong reasoning (like a supervisor might), creative flair (like a writer), or specific knowledge (like a coder)? I try to match the model's strengths to the agent's role.</li>
<li><strong>Cost &amp; Speed:</strong> More powerful models often deliver better results but come at a higher cost and potentially slower response times. I might use a top-tier model for the supervisor or critical tasks, but opt for faster, cheaper models (like <code>gpt-4o-mini</code> in my example) for simpler, high-frequency subtasks.</li>
<li><strong>Mixing Models:</strong> One of the advantages I find with VoltAgent is the flexibility to easily assign different LLMs to different agents. This allows me to optimize both performance and cost across the entire system.</li>
</ul>
<p>Instead of just reading my considerations, try this interactive guide to get a suggestion based on your needs:</p>
<div class="border-2 border-solid border-emerald-500 rounded-lg p-5 mb-6 bg-gray-800 shadow-lg"><div class="mb-5"><label for="agentRole" class="block mb-2 font-medium text-white text-sm">1. What is the primary role of this agent?</label><div class="relative cursor-pointer"><select id="agentRole" class="appearance-none cursor-pointer w-full p-3 bg-gray-800 border border-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500/70 focus:border-emerald-400 hover:border-emerald-400/50 transition-all duration-200 text-sm"><option value="" disabled="" selected="">-- Select Role --</option><option value="supervisor" class="bg-gray-800">Supervisor / Orchestrator</option><option value="creative" class="bg-gray-800">Creative Task (Writing, Art, Content Gen)</option><option value="coding" class="bg-gray-800">Coding / Technical Task (Dev, Debugging)</option><option value="analysis" class="bg-gray-800">Data Analysis / Research / Summarization</option><option value="chatbot" class="bg-gray-800">Conversational AI / Customer Support</option><option value="tool_user" class="bg-gray-800">Agent Using Tools / Function Calling</option><option value="simple" class="bg-gray-800">Simple / Repetitive Task (Formatting, Extraction)</option></select><div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></div></div><div class="mb-4"><label for="agentPriority" class="block mb-2 font-medium text-white text-sm">2. What's more important for this agent?</label><div class="relative cursor-pointer"><select id="agentPriority" class="appearance-none cursor-pointer w-full p-3 bg-gray-800 border rounded-md text-white focus:outline-none focus:ring-2 transition-all duration-200 text-sm border-gray-700 opacity-60 cursor-not-allowed" disabled=""><option value="" disabled="" selected="">-- Select Priority --</option><option value="performance" class="bg-gray-800">Top Performance / Quality</option><option value="balanced" class="bg-gray-800">Balanced Cost &amp; Speed</option><option value="cost" class="bg-gray-800">Lowest Cost / Highest Speed</option></select><div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></div></div></div>
<p>Remember, these are just starting points. Ultimately, I recommend experimenting...</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="how-i-use-voltagent-for-multi-agent-systems">How I Use VoltAgent for Multi-Agent Systems<a href="https://voltagent.dev/blog/multi-agent-llm#how-i-use-voltagent-for-multi-agent-systems" class="hash-link" aria-label="Direct link to How I Use VoltAgent for Multi-Agent Systems" title="Direct link to How I Use VoltAgent for Multi-Agent Systems">​</a></h2>
<p>I've found VoltAgent to be an effective tool for creating AI agents, and I can develop multiple agents simply using its <strong>Supervisor Agents</strong> and <strong>Subagents</strong>.</p>
<ol>
<li><strong>Define Agents:</strong> First, I define my subagents that specialize in a particular task (e.g., "Story Writer" agent, "Translator" agent). An agent consists of a name, description (instructions), and the LLM it uses.</li>
<li><strong>Build the Supervisor:</strong> Second, I build the supervisor agent that will manage these subagents. In defining the supervisor, I simply specify which subagents it will manage using the <code>subAgents</code> parameter.</li>
<li><strong>Automatic Installation:</strong> What I like is that whenever I install a supervisor agent, VoltAgent automatically configures the following in the background:</li>
</ol>
<ul>
<li>It revises the supervisor's system message (i.e., its basic instructions) to include instructions on treating its subagents.</li>
<li>Includes in the supervisor an additional <code>delegate_task</code> tool that allows it to delegate tasks to subagents.</li>
<li>Holds records for agent relations.</li>
</ul>
<ol start="4">
<li><strong>Task Flow:</strong> The process usually goes like this:</li>
</ol>
<ul>
<li>I forward my request to the supervisor agent.</li>
<li>The supervisor reviews the request to select which subagents will most effectively accomplish the task.</li>
<li>It uses <code>delegate_task</code> to delegate the task(s) to the corresponding subagents.</li>
<li>Subagents carry out their assignments and report their results back to the supervisor.</li>
<li>The supervisor combines results from all subagents and provides the final answer.</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="let-me-show-you-a-practical-example-with-voltagent">Let Me Show You a Practical Example with VoltAgent<a href="https://voltagent.dev/blog/multi-agent-llm#let-me-show-you-a-practical-example-with-voltagent" class="hash-link" aria-label="Direct link to Let Me Show You a Practical Example with VoltAgent" title="Direct link to Let Me Show You a Practical Example with VoltAgent">​</a></h3>
<p>Let me walk you through the story writing and translation example I built. First, I needed a VoltAgent project, which I created easily using the command line:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest my-multi-agent-project</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token builtin class-name" style="color:#ffa657">cd</span><span class="token plain"> my-multi-agent-project</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Before proceeding, I needed to provide my OpenAI API key. I created a file named <code>.env</code> in the root of my <code>my-multi-agent-project</code> directory and added my key like this:</p>
<div class="language-dotenv codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-dotenv codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain"># .env file</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">OPENAI_API_KEY=sk-proj-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Replace <code>sk-proj-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code> with your actual OpenAI API key. VoltAgent automatically loaded this key for me.</p>
<p>This command set up my basic VoltAgent project structure 🎉</p>
<p>Now, I modified the agent logic (typically in a file like <code>src/index.ts</code> or similar within the new project) to implement my supervisor and subagents:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token comment" style="color:#8b949e;font-style:italic">// Inside your VoltAgent project (e.g., src/index.ts)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> Agent </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/core"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VercelAIProvider </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/vercel-ai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> openai </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@ai-sdk/openai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 1. Create Subagents</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> storyWriter </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Story Writer"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"You are an expert at writing creative and engaging short stories."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> translator </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Translator"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"You are a skilled translator, proficient in translating text accurately."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 2. Create the Supervisor Agent (linking subagents)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> supervisorAgent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Supervisor Agent"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token string" style="color:#a5d6ff">"You manage workflows between specialized agents. "</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">+</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token string" style="color:#a5d6ff">"When asked for a story, use the Story Writer. "</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">+</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token string" style="color:#a5d6ff">"Then, use the Translator to translate the story. Present both versions to the user."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// Connect the subagents here</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  subAgents</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token plain">storyWriter</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> translator</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  agents</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    supervisorAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>After saving this code (e.g., in <code>src/index.ts</code>), I opened my terminal in the project directory (<code>my-multi-agent-project</code>) and installed the necessary dependencies:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">install</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Once the dependencies were installed, I started the VoltAgent development server:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> run dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>I saw output similar to this in my terminal, indicating the server was running:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  VOLTAGENT SERVER STARTED SUCCESSFULLY</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  ✓ HTTP Server: http://localhost:3141</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  Developer Console:    https://console.voltagent.dev</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Then, I opened my web browser and navigated to the <strong>Developer Console</strong> URL shown (<a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow">https://console.voltagent.dev</a>).</p>
<p>Inside the console:</p>
<ol>
<li>I could see my agents listed. I clicked on <strong>"Supervisor Agent"</strong>.</li>
<li>In the agent details view, I clicked the chat icon (usually in the bottom right).</li>
<li>I typed my request into the chat input: <code>Write a short story about a robot learning to paint and translate it to German.</code> and pressed Enter.</li>
</ol>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-23-multi-agent-llm/multi-agent-llm-demo.gif" alt="Multi-Agent LLM Example" class="img_ev3q"></p>
<p>The Supervisor Agent then executed the workflow: it first delegated the story writing task to the <code>Story Writer</code> subagent, then delegated the translation task to the <code>Translator</code> subagent, and finally presented both results in the chat interface. I found that VoltAgent handled all the background coordination automatically.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="my-final-thoughts">My Final Thoughts<a href="https://voltagent.dev/blog/multi-agent-llm#my-final-thoughts" class="hash-link" aria-label="Direct link to My Final Thoughts" title="Direct link to My Final Thoughts">​</a></h2>
<p>In my view, Multi-agent LLM systems represent the next step in AI capabilities. I've seen how they break hard challenges down, combine multiple areas of knowledge, and permit more powerful, more flexible solutions. For me, VoltAgent has been an invaluable instrument that simplifies designing and embedding these sophisticated systems.</p>
<p>Are you ready to build your own AI team? I hope this guide helps!</p>]]></content:encoded>
            <category>multi-agent</category>
        </item>
        <item>
            <title><![CDATA[Building Your First AI Agent with VoltAgent: A GitHub Repo Analyzer]]></title>
            <link>https://voltagent.dev/blog/building-first-agent-github-analyzer</link>
            <guid>https://voltagent.dev/blog/building-first-agent-github-analyzer</guid>
            <pubDate>Mon, 21 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[A step-by-step guide to creating a multi-agent system using VoltAgent to analyze GitHub repositories.]]></description>
            <content:encoded><![CDATA[<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-21-first-ai-agent-github-repo-analyzer/multi-agent.gif" alt="VoltAgent GitHub Repo Analyzer" class="img_ev3q"></p>
<p>Welcome to your first VoltAgent project! In this tutorial, we'll guide you through building a practical AI agent system that analyzes GitHub repositories. We'll fetch star counts and contributor lists, then use another agent to analyze this information. This example demonstrates the power of VoltAgent's multi-agent architecture.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="prerequisites">Prerequisites<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites">​</a></h2>
<p>Before we start, make sure you have:</p>
<ul>
<li>Node.js installed (LTS version recommended).</li>
<li>An OpenAI API key (or an API key for another supported LLM provider).</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="step-1-create-your-voltagent-project">Step 1: Create Your VoltAgent Project<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#step-1-create-your-voltagent-project" class="hash-link" aria-label="Direct link to Step 1: Create Your VoltAgent Project" title="Direct link to Step 1: Create Your VoltAgent Project">​</a></h2>
<p>First, let's set up a new VoltAgent project. We'll use the <code>create-voltagent-app</code> CLI for a quick start. Open your terminal and run:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest github-repo-analyzer</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Follow the prompts:</p>
<ol>
<li>Select your preferred package manager (npm, yarn, or pnpm).</li>
</ol>
<p>Once the setup is complete, navigate into your new project directory:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token builtin class-name" style="color:#ffa657">cd</span><span class="token plain"> github-repo-analyzer</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>And create a <code>.env</code> file in the root of the project to store your API key:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">.env</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token assign-left variable" style="color:#79c0ff">OPENAI_API_KEY</span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain">sk-proj-</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Replace <code>sk-proj-</code> with your actual OpenAI API key.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="step-2-understanding-the-goal">Step 2: Understanding the Goal<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#step-2-understanding-the-goal" class="hash-link" aria-label="Direct link to Step 2: Understanding the Goal" title="Direct link to Step 2: Understanding the Goal">​</a></h2>
<p>Our goal is to create an agent system that takes a GitHub repository URL (like <code>https://github.com/voltagent/voltagent</code> or simply <code>voltagent/voltagent</code>) and provides an analysis based on its star count and contributors.</p>
<p>To achieve this, we'll use a supervisor-worker pattern:</p>
<ol>
<li><strong>Supervisor Agent:</strong> Takes the user's input (the repo URL) and coordinates the work.</li>
<li><strong>Stars Fetcher Agent:</strong> Fetches the star count for the repo.</li>
<li><strong>Contributors Fetcher Agent:</strong> Fetches the list of contributors for the repo.</li>
<li><strong>Analyzer Agent:</strong> Takes the star count and contributor list and generates insights.</li>
</ol>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="step-3-setting-up-the-tools-conceptual">Step 3: Setting Up the Tools (Conceptual)<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#step-3-setting-up-the-tools-conceptual" class="hash-link" aria-label="Direct link to Step 3: Setting Up the Tools (Conceptual)" title="Direct link to Step 3: Setting Up the Tools (Conceptual)">​</a></h2>
<p>Agents often need tools to interact with the outside world (like APIs). In a real application, you would define tools to fetch data from the GitHub API. For this tutorial, imagine we have two pre-built tools:</p>
<ul>
<li><code>fetchRepoStarsTool</code>: A tool that takes a repository name (e.g., <code>voltagent/core</code>) and returns the number of stars.</li>
<li><code>fetchRepoContributorsTool</code>: A tool that takes a repository name and returns a list of contributors.</li>
</ul>
<p><em>(To learn how to create your own tools, check out the <a rel="noopener dofollow" href="https://voltagent.dev/docs/agents/tools/">Tool Creation documentation</a>.)</em></p>
<p>Let's assume these tools are defined in a separate file, perhaps <code>src/tools.ts</code>. We'll import them into our main agent file.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="step-4-defining-the-agents">Step 4: Defining the Agents<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#step-4-defining-the-agents" class="hash-link" aria-label="Direct link to Step 4: Defining the Agents" title="Direct link to Step 4: Defining the Agents">​</a></h2>
<p>Now, let's define our agents in <code>src/index.ts</code>. Open this file and replace its contents with the following code:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockTitle_Ktv7">src/index.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> Agent </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/core"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> VercelAIProvider </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@voltagent/vercel-ai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> openai </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">from</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"@ai-sdk/openai"</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// Assume these tools are defined elsewhere (e.g., src/tools.ts)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// import { fetchRepoContributorsTool, fetchRepoStarsTool } from "./tools";</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// --- Mock Tools for Demonstration ---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// In a real scenario, you'd use actual tool implementations.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// We use simple functions here to illustrate agent structure.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> mockFetchRepoStarsTool </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"fetchRepoStars"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Fetches the star count for a given GitHub repository (owner/repo)."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  parameters</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    type</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"object"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    properties</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      repo</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> type</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"string"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">'Repository name (e.g., "voltagent/core")'</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    required</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token string" style="color:#a5d6ff">"repo"</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token function-variable function" style="color:#d2a8ff">execute</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> repo </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> repo</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token builtin" style="color:#ffa657">string</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> stars</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> Math</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">floor</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token plain">Math</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">random</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">*</span><span class="token plain"> </span><span class="token number" style="color:#79c0ff">5000</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Mock data</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> mockFetchRepoContributorsTool </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"fetchRepoContributors"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Fetches the contributors for a given GitHub repository (owner/repo)."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  parameters</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    type</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"object"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    properties</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">      repo</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> type</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"string"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">'Repository name (e.g., "voltagent/core")'</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    required</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token string" style="color:#a5d6ff">"repo"</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token function-variable function" style="color:#d2a8ff">execute</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> repo </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> repo</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token builtin" style="color:#ffa657">string</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token plain"> </span><span class="token operator" style="color:#c9d1d9">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"> contributors</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token string" style="color:#a5d6ff">"UserA"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"UserB"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"UserC"</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Mock data</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// --- End Mock Tools ---</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 1. Create the stars fetcher agent</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> starsFetcherAgent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"StarsFetcher"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Fetches the number of stars for a GitHub repository using a tool."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  tools</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token plain">mockFetchRepoStarsTool</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Use the mock tool</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 2. Create the contributors fetcher agent</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> contributorsFetcherAgent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"ContributorsFetcher"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Fetches the list of contributors for a GitHub repository using a tool."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  tools</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token plain">mockFetchRepoContributorsTool</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Use the mock tool</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 3. Create the analyzer agent (no tools needed)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> analyzerAgent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"RepoAnalyzer"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Analyzes repository statistics (stars, contributors) and provides insights."</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token comment" style="color:#8b949e;font-style:italic">// This agent doesn't need tools; it processes data provided by the supervisor.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 4. Create the supervisor agent that coordinates all the sub-agents</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">const</span><span class="token plain"> supervisorAgent </span><span class="token operator" style="color:#c9d1d9">=</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">Agent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  name</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token string" style="color:#a5d6ff">"Supervisor"</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  description</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token template-string string" style="color:#a5d6ff">You are a GitHub repository analyzer. When given a GitHub repository URL or owner/repo format, you will:</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="color:#a5d6ff">1. Extract the owner/repo name.</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="color:#a5d6ff">2. Use the StarsFetcher agent to get the repository's star count.</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="color:#a5d6ff">3. Use the ContributorsFetcher agent to get the repository's contributors.</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="color:#a5d6ff">4. Pass the collected data (stars, contributors) to the RepoAnalyzer agent.</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="color:#a5d6ff">5. Return the analysis provided by the RepoAnalyzer.</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="display:inline-block;color:#a5d6ff"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="color:#a5d6ff">Example input: https://github.com/vercel/ai-sdk or vercel/ai-sdk</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token template-string string" style="color:#a5d6ff"></span><span class="token template-string template-punctuation string" style="color:#a5d6ff">`</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  llm</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VercelAIProvider</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  model</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token function" style="color:#d2a8ff">openai</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"gpt-4o-mini"</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  subAgents</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">[</span><span class="token plain">starsFetcherAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> contributorsFetcherAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> analyzerAgent</span><span class="token punctuation" style="color:#c9d1d9">]</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"> </span><span class="token comment" style="color:#8b949e;font-style:italic">// Assign sub-agents</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token comment" style="color:#8b949e;font-style:italic">// 5. Initialize the VoltAgent with the agent hierarchy</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token keyword" style="color:#ff7b72">new</span><span class="token plain"> </span><span class="token class-name" style="color:#ffa657">VoltAgent</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  agents</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c9d1d9">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token comment" style="color:#8b949e;font-style:italic">// We only expose the supervisor externally.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    </span><span class="token comment" style="color:#8b949e;font-style:italic">// The supervisor will internally call the other agents.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">    supervisor</span><span class="token operator" style="color:#c9d1d9">:</span><span class="token plain"> supervisorAgent</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  </span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token punctuation" style="color:#c9d1d9">}</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token builtin" style="color:#ffa657">console</span><span class="token punctuation" style="color:#c9d1d9">.</span><span class="token function" style="color:#d2a8ff">log</span><span class="token punctuation" style="color:#c9d1d9">(</span><span class="token string" style="color:#a5d6ff">"GitHub Repo Analyzer Agent system started."</span><span class="token punctuation" style="color:#c9d1d9">)</span><span class="token punctuation" style="color:#c9d1d9">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Explanation:</strong></p>
<ol>
<li><strong>Imports:</strong> We import necessary components from VoltAgent and AI SDK libraries.</li>
<li><strong>Mock Tools:</strong> For simplicity, we've added mock versions of the tools directly in this file. In a real app, you'd import actual tool implementations.</li>
<li><strong><code>starsFetcherAgent</code>:</strong> Defined with a name, description, LLM configuration, and the <code>mockFetchRepoStarsTool</code>. Its job is solely to use this tool when asked.</li>
<li><strong><code>contributorsFetcherAgent</code>:</strong> Similar to the stars fetcher, but configured with the <code>mockFetchRepoContributorsTool</code>.</li>
<li><strong><code>analyzerAgent</code>:</strong> This agent doesn't need tools. Its purpose is to receive data (stars and contributors) and use its LLM capabilities to generate an analysis based on its description.</li>
<li><strong><code>supervisorAgent</code>:</strong> This is the main coordinator.<!-- -->
<ul>
<li>Its <code>description</code> clearly outlines the steps it needs to take.</li>
<li>Crucially, it includes the other three agents in its <code>subAgents</code> array. This tells the supervisor it can delegate tasks to these specific agents.</li>
</ul>
</li>
<li><strong><code>new VoltAgent(...)</code>:</strong> This initializes the VoltAgent system. We register the <code>supervisorAgent</code> under the key <code>supervisor</code>. This means when we interact with our application, we'll be talking directly to the supervisor.</li>
</ol>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="step-5-run-your-agent-system">Step 5: Run Your Agent System<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#step-5-run-your-agent-system" class="hash-link" aria-label="Direct link to Step 5: Run Your Agent System" title="Direct link to Step 5: Run Your Agent System">​</a></h2>
<p>Now, let's run the agent. Go back to your terminal (make sure you're in the <code>github-repo-analyzer</code> directory) and run the development command:</p>
<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">pnpm</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> run dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">yarn</span><span class="token plain"> dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">pnpm</span><span class="token plain"> dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div>
<p>You should see the VoltAgent server startup message:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  VOLTAGENT SERVER STARTED SUCCESSFULLY</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  ✓ HTTP Server: http://localhost:3141</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">  Developer Console: https://console.voltagent.dev</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain">══════════════════════════════════════════════════</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="step-6-interact-with-your-agent">Step 6: Interact with Your Agent<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#step-6-interact-with-your-agent" class="hash-link" aria-label="Direct link to Step 6: Interact with Your Agent" title="Direct link to Step 6: Interact with Your Agent">​</a></h2>
<ol>
<li><strong>Open the Console:</strong> Go to <a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow"><code>https://console.voltagent.dev</code></a>.</li>
<li><strong>Find Your Agent:</strong> Look for the agent named <code>supervisor</code> (or whatever name you gave it in the <code>new VoltAgent</code> call).</li>
<li><strong>Open Agent Details:</strong> Click on the <code>supervisor</code> agent.</li>
<li><strong>Start Chatting:</strong> Click the chat icon.</li>
<li><strong>Send a Message:</strong> Try sending a message like:
<code>Analyze the repo voltagent/voltagent</code>
or
<code>Tell me about https://github.com/voltagent/voltagent</code></li>
</ol>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-21-first-ai-agent-github-repo-analyzer/demo.gif" alt="VoltAgent GitHub Repo Analyzer" class="img_ev3q"></p>
<p>The supervisor agent will now follow its instructions:</p>
<ul>
<li>It will likely first call the <code>StarsFetcher</code> to get the (mock) star count.</li>
<li>Then, it will call the <code>ContributorsFetcher</code> for the (mock) contributor list.</li>
<li>Finally, it will pass this information to the <code>RepoAnalyzer</code> and return the analysis to you in the chat.</li>
</ul>
<p>You can observe this multi-step process happening in the VoltAgent Developer Console!</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="conclusion">Conclusion<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion">​</a></h2>
<p>Congratulations! You've successfully built a multi-agent system using VoltAgent. You learned how to:</p>
<ul>
<li>Set up a VoltAgent project.</li>
<li>Define multiple agents with specific roles and tools (even mock ones).</li>
<li>Create a supervisor agent to orchestrate tasks among sub-agents.</li>
<li>Run and interact with your agent system via the Developer Console.</li>
</ul>
<p>This example showcases how you can break down complex tasks into smaller, manageable units, each handled by a specialized agent.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="next-steps">Next Steps<a href="https://voltagent.dev/blog/building-first-agent-github-analyzer#next-steps" class="hash-link" aria-label="Direct link to Next Steps" title="Direct link to Next Steps">​</a></h2>
<ul>
<li>Replace the mock tools with real implementations using the GitHub API.</li>
<li><strong>Try the full example:</strong> Check out the complete <a href="https://github.com/voltagent/voltagent/tree/main/examples/github-repo-analyzer" target="_blank" rel="noopener noreferrer nofollow">GitHub Repo Analyzer example</a> with real tool implementations. You can also create a project directly from this example:<!-- -->
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest -- </span><span class="token parameter variable" style="color:#79c0ff">--example</span><span class="token plain"> github-repo-analyzer</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>Explore different LLM providers and models.</li>
<li>Learn more about <a rel="noopener dofollow" href="https://voltagent.dev/docs/agents/memory/overview/">Agent Memory</a> to give your agents context.</li>
<li>Dive deeper into <a rel="noopener dofollow" href="https://voltagent.dev/docs/agents/tools/">Tool Creation</a>.</li>
</ul>
<p>Happy building!</p>]]></content:encoded>
            <category>example</category>
        </item>
        <item>
            <title><![CDATA[Escape the 'console.log': VoltAgent Developer Console]]></title>
            <link>https://voltagent.dev/blog/voltagent-developer-console</link>
            <guid>https://voltagent.dev/blog/voltagent-developer-console</guid>
            <pubDate>Mon, 21 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[Stop drowning in console logs. VoltAgent's Developer Console offers unprecedented visual clarity for building, debugging, and deploying complex AI agents.]]></description>
            <content:encoded><![CDATA[<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/readme/demo.gif" alt="VoltAgent Developer Console Overview" class="img_ev3q"></p>
<p>Building AI agents often feels like working inside a black box. Developers find themselves buried under endless <code>console.log</code> statements and scattered breakpoints, trying to piece together <em>how</em> an agent arrived at a decision. This guesswork gets exponentially harder with multi-agent systems. Adding a new agent, or even tweaking a prompt or tool in an existing one, creates a ripple effect. How do you ensure the whole system still works as intended? How do you verify the output is still correct?</p>
<p>This debugging cycle is slow, frustrating, and drains productivity. Developers lose focus chasing down elusive bugs instead of building innovative features. Ensuring the reliability and correctness of complex AI flows becomes a monumental, often uncertain, task.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="developer-console-clarity-not-chaos">Developer Console: Clarity, Not Chaos<a href="https://voltagent.dev/blog/voltagent-developer-console#developer-console-clarity-not-chaos" class="hash-link" aria-label="Direct link to Developer Console: Clarity, Not Chaos" title="Direct link to Developer Console: Clarity, Not Chaos">​</a></h2>
<p>VoltAgent was designed observability-first precisely to solve this challenge. We believe developers need clear, intuitive tools to understand and manage AI complexity. The <strong><a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow">VoltAgent Developer Console</a></strong> transforms AI debugging from a maze into a map.</p>
<p>Think of it as your visual command center for AI development:</p>
<ul>
<li><strong>See the Entire Flow:</strong> Inspired by the clarity of no-code tools, the Console visualizes your entire agent structure (built with the VoltAgent framework) on an infinite canvas. Watch in real-time as your agent executes, seeing exactly which functions run, which tools are called (including details like memory/chat context, RAG retrievals, and MCP server interactions), and the decision path taken.</li>
</ul>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-21-introducing-developer-console/canvas.gif" alt="VoltAgent Developer Console Canvas" class="img_ev3q"></p>
<ul>
<li><strong>Step-by-Step Timeline:</strong> Go beyond a static graph. Our timeline view lets you trace every step of an agent's journey from input to output. Understand precisely what data the agent processed and why it made specific choices at each stage.</li>
</ul>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-21-introducing-developer-console/timeline.gif" alt="VoltAgent Developer Console Timeline" class="img_ev3q"></p>
<ul>
<li><strong>Real-Time State Inspection:</strong> Dive into the agent's internal state, inputs, and outputs <em>as they happen</em>. No more guessing what variables hold or what a tool returned.</li>
</ul>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-21-introducing-developer-console/state.gif" alt="VoltAgent Developer Console State Inspection" class="img_ev3q"></p>
<ul>
<li><strong>Effortless Multi-Agent Debugging:</strong> The visualization inherently handles multi-agent complexity. See how agents interact, pass information, and contribute to the final outcome, all in one unified view.</li>
</ul>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-21-introducing-developer-console/multi-agent.gif" alt="VoltAgent Developer Console Multi-Agent Debugging" class="img_ev3q"></p>
<ul>
<li><strong>Replay and Analyze:</strong> Easily revisit past agent runs (sessions). Debug intermittent issues or analyze specific scenarios by replaying the exact execution flow and state changes.</li>
</ul>
<p><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/2025-04-21-introducing-developer-console/replay.gif" alt="VoltAgent Developer Console Replay" class="img_ev3q"></p>
<ul>
<li><strong>Local and Secure:</strong> The Console connects directly to your <em>local</em> VoltAgent process. <strong>No sensitive agent data ever leaves your machine.</strong> Debug with complete peace of mind.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="stop-debugging-start-building">Stop Debugging, Start Building<a href="https://voltagent.dev/blog/voltagent-developer-console#stop-debugging-start-building" class="hash-link" aria-label="Direct link to Stop Debugging, Start Building" title="Direct link to Stop Debugging, Start Building">​</a></h2>
<p>The impact is immediate:</p>
<ul>
<li><strong>Slash Debugging Time:</strong> Developers report <strong>drastically reduced debugging time</strong> – often cutting hours of guesswork down to minutes of clear analysis. Get back to building features, faster.</li>
<li><strong>Verify Changes Instantly:</strong> Easily observe the impact of prompt changes, new tools, or added agents. Visually confirm that your updates behave as expected.</li>
<li><strong>Deploy with Confidence:</strong> Understand your AI flows deeply. Ship to production knowing your agents are working correctly and reliably.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="production-observability">Production Observability<a href="https://voltagent.dev/blog/voltagent-developer-console#production-observability" class="hash-link" aria-label="Direct link to Production Observability" title="Direct link to Production Observability">​</a></h2>
<p>The benefits don't stop at development. The same observability that speeds up debugging provides crucial insights into production systems. When issues arise post-deployment, the Console's tracing and replay capabilities allow you to pinpoint the root cause quickly, leading to more robust and trustworthy AI applications.</p>
<p>The Developer Console isn't just an add-on; it's fundamental to how VoltAgent empowers you to build sophisticated AI applications with clarity, confidence, and speed.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="why-voltagent">Why VoltAgent?<a href="https://voltagent.dev/blog/voltagent-developer-console#why-voltagent" class="hash-link" aria-label="Direct link to Why VoltAgent?" title="Direct link to Why VoltAgent?">​</a></h2>
<p>As outlined in our <a rel="noopener dofollow" href="https://voltagent.dev/manifesto/">Manifesto</a>, VoltAgent was born from our own experiences. We wanted the flexibility of code combined with the insightful visualization often found in visual tools, but without the lock-in. We believe the JavaScript ecosystem deserves dedicated, powerful AI tooling.</p>
<p>VoltAgent is our answer – a tool built <em>by</em> JS developers, <em>for</em> JS developers, aiming to make AI development less daunting and more productive.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="what-is-voltagent">What is VoltAgent?<a href="https://voltagent.dev/blog/voltagent-developer-console#what-is-voltagent" class="hash-link" aria-label="Direct link to What is VoltAgent?" title="Direct link to What is VoltAgent?">​</a></h2>
<p>Drawing inspiration from the clarity of No-Code tools but retaining the power and flexibility developers demand, VoltAgent provides:</p>
<ul>
<li><strong>A Core Framework (<code>@voltagent/core</code>):</strong> Robust foundations for defining agent logic, managing state, and orchestrating complex workflows.</li>
<li><strong>Exceptional Observability:</strong> Forget <code>console.log</code> debugging. VoltAgent offers built-in tools (check our <a rel="noopener dofollow" href="https://voltagent.dev/docs/observability/overview/">Observability</a> docs!) to visualize agent execution, inspect state changes, and trace requests, drastically reducing debugging time from hours to minutes.</li>
<li><strong>Seamless Integration (<code>@voltagent/vercel-ai</code>, etc.):</strong> Easily connect with popular AI providers and platforms (explore the <a rel="noopener dofollow" href="https://voltagent.dev/docs/agents/providers/">providers</a> docs).</li>
<li><strong>Command-Line Interface (<code>@voltagent/cli</code>):</strong> Get up and running quickly with project scaffolding and management tools via <code>create-voltagent-app</code>.</li>
<li><strong>Extensibility:</strong> Designed with modularity in mind, allowing for custom tools, providers, and integrations (like potential voice capabilities hinted at in <code>@voltagent/voice</code>).</li>
<li><strong>Clear Best Practices:</strong> We provide guidance and structure (see <code>agents</code> and <code>utils</code> docs) to help you build maintainable and scalable AI applications.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-started-in-minutes">Get Started in Minutes<a href="https://voltagent.dev/blog/voltagent-developer-console#get-started-in-minutes" class="hash-link" aria-label="Direct link to Get Started in Minutes" title="Direct link to Get Started in Minutes">​</a></h2>
<p>Ready to ditch the black box? You can start building your first agent right now:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest my-first-agent</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token builtin class-name" style="color:#ffa657">cd</span><span class="token plain"> my-first-agent</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> run dev </span><span class="token comment" style="color:#8b949e;font-style:italic"># or yarn dev / pnpm dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Dive into our <strong><a rel="noopener dofollow" href="https://voltagent.dev/docs/">Getting Started Guide</a></strong> for a deeper look, and open the <a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow">Developer Console</a> to see your agent in action!</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="join-the-community">Join the Community<a href="https://voltagent.dev/blog/voltagent-developer-console#join-the-community" class="hash-link" aria-label="Direct link to Join the Community" title="Direct link to Join the Community">​</a></h2>
<p>VoltAgent is just beginning, and we're building it in the open. We believe in the power of community (check the <code>community</code> docs folder for ways to connect!).</p>
<ul>
<li><strong>Ask Questions &amp; Share Ideas:</strong> <a href="http://s.voltagent.dev/discord" target="_blank" rel="noopener dofollow">Discord</a></li>
<li><strong>Contribute:</strong> <a rel="noopener dofollow" href="https://voltagent.dev/docs/community/contributing/">Contribution Guide</a></li>
<li><strong>Report Bugs &amp; Request Features:</strong> <a href="https://github.com/VoltAgent/voltagent/issues" target="_blank" rel="noopener noreferrer nofollow">GitHub Issues</a></li>
</ul>
<p>We're incredibly excited to see what you build with VoltAgent. Let's redefine AI development for JavaScript together!</p>
<hr>
<p>The VoltAgent Team</p>]]></content:encoded>
            <category>developer-console</category>
        </item>
        <item>
            <title><![CDATA[VoltAgent v0.1: AI Development Reimagined for JavaScript/TypeScript]]></title>
            <link>https://voltagent.dev/blog/introducing-voltagent</link>
            <guid>https://voltagent.dev/blog/introducing-voltagent</guid>
            <pubDate>Mon, 21 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[VoltAgent is here! Build, debug, and deploy AI agents with unprecedented clarity and developer experience, built specifically for the JS/TS ecosystem.]]></description>
            <content:encoded><![CDATA[<p><img decoding="async" loading="lazy" alt="VoltAgent Launch" src="https://voltagent.dev/assets/images/intro-image-59b144283fdcc1d7146a7326e4d96280.png" width="1800" height="520" class="img_ev3q"></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="the-black-box-is-open-meet-voltagent">The Black Box is Open: Meet VoltAgent<a href="https://voltagent.dev/blog/introducing-voltagent#the-black-box-is-open-meet-voltagent" class="hash-link" aria-label="Direct link to The Black Box is Open: Meet VoltAgent" title="Direct link to The Black Box is Open: Meet VoltAgent">​</a></h2>
<p>Building with AI often feels like working with a black box, a challenge common across many programming ecosystems. Recognizing this, and seeing the specific needs within the JavaScript/TypeScript world where tooling hasn't kept pace with Python's maturity, we built VoltAgent. JS/TS developers deserve a framework that brings structure, clarity, and a first-class developer experience to AI agent development.</p>
<p>We felt this pain too. As developers who previously built and scaled open-source projects like Refine, we saw the power of community and the need for better tooling. That's why we built VoltAgent.</p>
<p><strong>Today, we're thrilled to announce the first release of VoltAgent!</strong></p>
<p>VoltAgent is more than just another library; it's a comprehensive framework designed from the ground up to <strong>simplify the creation, debugging, and deployment of AI agents in JavaScript and TypeScript.</strong></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="what-is-voltagent">What is VoltAgent?<a href="https://voltagent.dev/blog/introducing-voltagent#what-is-voltagent" class="hash-link" aria-label="Direct link to What is VoltAgent?" title="Direct link to What is VoltAgent?">​</a></h2>
<p>Drawing inspiration from the clarity of No-Code tools but retaining the power and flexibility developers demand, VoltAgent provides:</p>
<ul>
<li><strong>A Core Framework (<code>@voltagent/core</code>):</strong> Robust foundations for defining agent logic, managing state, and orchestrating complex workflows.</li>
<li><strong>Exceptional Observability:</strong> Forget <code>console.log</code> debugging. VoltAgent offers built-in tools (check our <a rel="noopener dofollow" href="https://voltagent.dev/docs/observability/overview/">Observability</a> docs!) to visualize agent execution, inspect state changes, and trace requests, drastically reducing debugging time from hours to minutes.</li>
<li><strong>Seamless Integration (<code>@voltagent/vercel-ai</code>, etc.):</strong> Easily connect with popular AI providers and platforms (explore the <a rel="noopener dofollow" href="https://voltagent.dev/docs/agents/providers/">providers</a> docs).</li>
<li><strong>Command-Line Interface (<code>@voltagent/cli</code>):</strong> Get up and running quickly with project scaffolding and management tools via <code>create-voltagent-app</code>.</li>
<li><strong>Extensibility:</strong> Designed with modularity in mind, allowing for custom tools, providers, and integrations (like potential voice capabilities hinted at in <code>@voltagent/voice</code>).</li>
<li><strong>Clear Best Practices:</strong> We provide guidance and structure (see <code>agents</code> and <code>utils</code> docs) to help you build maintainable and scalable AI applications.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="beyond-logs-meet-the-voltagent-developer-console">Beyond Logs: Meet the VoltAgent Developer Console<a href="https://voltagent.dev/blog/introducing-voltagent#beyond-logs-meet-the-voltagent-developer-console" class="hash-link" aria-label="Direct link to Beyond Logs: Meet the VoltAgent Developer Console" title="Direct link to Beyond Logs: Meet the VoltAgent Developer Console">​</a></h2>
<p><a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow"><img decoding="async" loading="lazy" src="https://cdn.voltagent.dev/readme/demo.gif" alt="VoltAgent Developer Console" class="img_ev3q"></a></p>
<p>Debugging AI agents often involves sifting through endless <code>console.log</code> statements or trying to piece together scattered information across different services. This "black box" debugging is slow, frustrating, and hinders rapid iteration.</p>
<p>VoltAgent changes the game with its integrated <strong><a href="https://console.voltagent.dev/" target="_blank" rel="noopener dofollow">Developer Console</a></strong>. Think of it as a visual control center specifically designed for your AI agents:</p>
<ul>
<li><strong>Visualize Execution Flow:</strong> See exactly how your agent processes information, which functions are called, which tools are used, and where decisions are made – all laid out visually in a clear graph.</li>
<li><strong>Inspect State &amp; Data in Real-Time:</strong> No more guessing. Examine the agent's internal state, inputs, outputs, and tool interactions at any point during its execution. Understand exactly what data it's working with.</li>
<li><strong>Step-Through Tracing &amp; Timings:</strong> Dive deep into specific runs, tracing requests and responses step-by-step to pinpoint issues quickly, and analyze the performance of each step.</li>
</ul>
<p>This visual-first approach to observability isn't just a nice-to-have; it fundamentally improves the developer experience. It makes debugging intuitive, transforms hours of guesswork into minutes of clarity, and dramatically accelerates development cycles. This is a core part of how VoltAgent empowers you to build robust AI applications with confidence.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="why-voltagent">Why VoltAgent?<a href="https://voltagent.dev/blog/introducing-voltagent#why-voltagent" class="hash-link" aria-label="Direct link to Why VoltAgent?" title="Direct link to Why VoltAgent?">​</a></h2>
<p>As outlined in our <a rel="noopener dofollow" href="https://voltagent.dev/manifesto/">Manifesto</a>, VoltAgent was born from our own experiences. We wanted the flexibility of code combined with the insightful visualization often found in visual tools, but without the lock-in. We believe the JavaScript ecosystem deserves dedicated, powerful AI tooling.</p>
<p>VoltAgent is our answer – a tool built <em>by</em> JS developers, <em>for</em> JS developers, aiming to make AI development less daunting and more productive.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-started-in-minutes">Get Started in Minutes<a href="https://voltagent.dev/blog/introducing-voltagent#get-started-in-minutes" class="hash-link" aria-label="Direct link to Get Started in Minutes" title="Direct link to Get Started in Minutes">​</a></h2>
<p>Ready to ditch the black box? You can start building your first agent right now:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#e2e8f0;--prism-background-color:#000000"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#e2e8f0;background-color:#000000"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#e2e8f0"><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> create voltagent-app@latest my-first-agent</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token builtin class-name" style="color:#ffa657">cd</span><span class="token plain"> my-first-agent</span><br></span><span class="token-line" style="color:#e2e8f0"><span class="token plain"></span><span class="token function" style="color:#d2a8ff">npm</span><span class="token plain"> run dev </span><span class="token comment" style="color:#8b949e;font-style:italic"># or yarn dev / pnpm dev</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Dive into our <strong><a rel="noopener dofollow" href="https://voltagent.dev/docs/">Getting Started Guide</a></strong> for a deeper look.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="join-the-community">Join the Community<a href="https://voltagent.dev/blog/introducing-voltagent#join-the-community" class="hash-link" aria-label="Direct link to Join the Community" title="Direct link to Join the Community">​</a></h2>
<p>VoltAgent is just beginning, and we're building it in the open. We believe in the power of community (check the <code>community</code> docs folder for ways to connect!).</p>
<ul>
<li><strong>Report Bugs &amp; Request Features:</strong> <a href="https://github.com/VoltAgent/voltagent/issues" target="_blank" rel="noopener noreferrer nofollow">GitHub Issues</a></li>
<li><strong>Ask Questions &amp; Share Ideas:</strong> <a href="http://s.voltagent.dev/discord" target="_blank" rel="noopener dofollow">Discord</a></li>
<li><strong>Contribute:</strong> <a rel="noopener dofollow" href="https://voltagent.dev/docs/community/contributing/">Contribution Guide</a></li>
</ul>
<p>We're incredibly excited to see what you build with VoltAgent. Let's redefine AI development for JavaScript together!</p>
<hr>
<p>The VoltAgent Team</p>]]></content:encoded>
            <category>announcement</category>
        </item>
    </channel>
</rss>