DEV Community

Sudheesh Shetty
Sudheesh Shetty

Posted on

I built an embeddable AI chat widget + MCP-powered backend and open sourced it

I built an embeddable AI chat widget + MCP-powered backend and open sourced it

Over the weekend, I worked on building something I wanted to exist as a simple developer tool:

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.

The project is now open source.

What it does

  • Embeddable AI chat widget
  • Plug-and-play backend server
  • Supports multiple providers:
    • OpenAI
    • Groq
    • Gemini
    • Ollama
  • Tool calling support
  • React + CDN support
  • Customizable UI
  • MCP-ready architecture

Install

Widget

npm install ai-chat-toolkit-widget
Enter fullscreen mode Exit fullscreen mode

Server

npm install ai-chat-toolkit-server
Enter fullscreen mode Exit fullscreen mode

Quick Example

Frontend

<ai-chat
  backend-url="http://localhost:3000"
></ai-chat>
Enter fullscreen mode Exit fullscreen mode

Backend

const aiChat = new AiChatServer({
  provider: "openai",
  apiKey: process.env.OPENAI_API_KEY,
});

aiChat.attach(app);
Enter fullscreen mode Exit fullscreen mode

Packages

Widget

https://www.npmjs.com/package/ai-chat-toolkit-widget

Server

https://www.npmjs.com/package/ai-chat-toolkit-server

GitHub

https://github.com/sudheeshshetty/ai-chat-toolkit

Notes

This project was built with help from AI tooling where it accelerated development, debugging, iteration, and documentation.

I still made the architecture decisions, implementation choices, and packaged the final developer experience.

Would genuinely love feedback from other developers.

If you try it, tell me what you would improve.

Top comments (1)

Collapse
 
sudheeshshetty profile image
Sudheesh Shetty

Would love ideas for:

  • More providers
  • Better tool calling
  • More frontend integrations