I Built an Open-Source Studio for Building, Testing, and Deploying AI Agents

Building an AI chatbot is simple, but deploying one with advanced features like tools, knowledge, memory, observability, evaluations, human handoff, multiple model providers, workflows, and a user interface is a different challenge. This challenge inspired the creation of Chatbot Studio, an open-source platform for building and publishing AI agents. The project is MIT licensed, can be self-hosted, and is available on GitHub.

The main problem faced by AI projects is the need for tools, retrieval, credentials, streaming, conversation state, rate limits, evaluations, traces, a UI, and the ability to transition to a website or human handoff. Chatbot Studio addresses these challenges by separating the agent (model, knowledge, tools, runtime controls) from the chatbot (presentation layer for a specific channel).

The architecture of Chatbot Studio revolves around two main components: the agent and the published chatbot. The agent owns aspects such as model provider, system instructions, tools, MCP servers, knowledge, memory, skills, guardrails, sandbox settings, and human-in-the-loop behavior. The published chatbot handles channel-specific aspects like appearance, allowed domains, usage limits, launcher configuration, welcome experience, suggested prompts, and publishing state.

This separation allows for independent improvements to the agent without affecting existing chatbots.

Chatbot Studio provides a comprehensive suite of tools for building and testing agents, including support for various provider families such as OpenAI, Anthropic, Google Gemini, Groq, OpenRouter, Ollama, and OpenAI-compatible endpoints. Agents can be connected to knowledge bases, tools, MCP servers, memory, skills, guardrails, and other runtime controls. The platform also supports Model Context Protocol (MCP) servers, enabling external capabilities to be attached to agents seamlessly.

Knowledge bases can be integrated with agents, allowing for reusable knowledge resources that can be part of a broader agent configuration. The chatbot is designed as a Web Component, making it framework-independent and easily customizable. The chatbot is built using a Shadow DOM to prevent style clashes with the host website, and it exposes a small JavaScript API for interaction. The chatbot also emits events for various stages of the conversation.

With Chatbot Studio, customization is achieved through a real renderer, ensuring that the editor preview and the shipped widget share the same rendering path. Integration with websites can be done using a browser-native custom element, and the platform provides integrations for popular frameworks such as native HTML, React, Vue, Angular, and WordPress. This approach reduces the need for maintaining multiple chatbot implementations and allows for seamless integration into various environments.