The latest articles on DEV Community by Sudheesh Shetty (@sudheeshshetty). https://dev.to/sudheeshshetty https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3964105%2F9b9735f8-fe55-4519-93bf-14062d7e98b0.jpg https://dev.to/sudheeshshetty en Sudheesh Shetty Tue, 02 Jun 2026 08:44:11 +0000 https://dev.to/sudheeshshetty/i-built-an-embeddable-ai-chat-widget-mcp-powered-backend-and-open-sourced-it-179l https://dev.to/sudheeshshetty/i-built-an-embeddable-ai-chat-widget-mcp-powered-backend-and-open-sourced-it-179l <h1> I built an embeddable AI chat widget + MCP-powered backend and open sourced it </h1> <p>Over the weekend, I worked on building something I wanted to exist as a simple developer tool:</p> <p>An embeddable AI chat widget that can be dropped into any website, connected to any LLM provider, and extended using tool calling and MCP-style integrations.</p> <p>The project is now open source.</p> <h2> What it does </h2> <ul> <li>Embeddable AI chat widget</li> <li>Plug-and-play backend server</li> <li>Supports multiple providers: <ul> <li>OpenAI</li> <li>Groq</li> <li>Gemini</li> <li>Ollama</li> </ul> </li> <li>Tool calling support</li> <li>React + CDN support</li> <li>Customizable UI</li> <li>MCP-ready architecture</li> </ul> <h2> Install </h2> <p>Widget<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>ai-chat-toolkit-widget </code></pre> </div> <p>Server<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>ai-chat-toolkit-server </code></pre> </div> <h2> Quick Example </h2> <p>Frontend<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;ai-chat</span> <span class="na">backend-url=</span><span class="s">"http://localhost:3000"</span> <span class="nt">&gt;&lt;/ai-chat&gt;</span> </code></pre> </div> <p>Backend<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">aiChat</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">AiChatServer</span><span class="p">({</span> <span class="na">provider</span><span class="p">:</span> <span class="dl">"</span><span class="s2">openai</span><span class="dl">"</span><span class="p">,</span> <span class="na">apiKey</span><span class="p">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">OPENAI_API_KEY</span><span class="p">,</span> <span class="p">});</span> <span class="nx">aiChat</span><span class="p">.</span><span class="nf">attach</span><span class="p">(</span><span class="nx">app</span><span class="p">);</span> </code></pre> </div> <h2> Packages </h2> <p>Widget<br><br> <a href="https://www.npmjs.com/package/ai-chat-toolkit-widget" rel="noopener noreferrer">https://www.npmjs.com/package/ai-chat-toolkit-widget</a></p> <p>Server<br><br> <a href="https://www.npmjs.com/package/ai-chat-toolkit-server" rel="noopener noreferrer">https://www.npmjs.com/package/ai-chat-toolkit-server</a></p> <p>GitHub<br><br> <a href="https://github.com/sudheeshshetty/ai-chat-toolkit" rel="noopener noreferrer">https://github.com/sudheeshshetty/ai-chat-toolkit</a></p> <h2> Notes </h2> <p>This project was built with help from AI tooling where it accelerated development, debugging, iteration, and documentation.</p> <p>I still made the architecture decisions, implementation choices, and packaged the final developer experience.</p> <p>Would genuinely love feedback from other developers.</p> <p>If you try it, tell me what you would improve.</p> opensource typescript webdev ai