Openchatwidget

Open Chat Widget is an embeddable AI chat client for your product. You build the backend agent, and Open Chat Widget handles the frontend UI and chat plumbing.

Works with all major model providers (OpenAI, Anthropic, Gemini, Ollama, Mistral, OpenRouter, and more)
Streaming UI with reasoning and tool-call rendering
Attachments support (images, PDFs, SVGs, model-dependent)
MCP support, web search, and human-in-the-loop tool approvals

Why Open Chat Widget

You came here because you want a working chat bot, not another framework to learn. We give you feature-rich chat out of the box:

Plug and play - Add one component and connect your streaming endpoint.
Works with AI SDK — Build custom agents with Vercel AI SDK and plug them in directly.
Framework-agnostic — Use it with React, Next.js, Vue, WordPress, Shopify, Wix, and more.
Open source — MIT licensed. You own your data and infrastructure.

🚀 Quick Start - React / Next.js

Step 1: Install the SDK

Install the widget in your React app:

npm i @openchatwidget/sdk

Then embed the component anywhere in your project. A common pattern is to mount it in your main app layout so it appears across your site.

import { OpenChatWidget } from "@openchatwidget/sdk";

export default function MySite() {
  return (
    <>
      ...
      <OpenChatWidget url="<YOUR_AGENT_STREAMING_ENDPOINT>" /> 
    </>
  );
}

Here's a simple text stream agent:

import {
  convertToModelMessages,
  createOpenAI,
  streamText,
  type UIMessage,
} from "@openchatwidget/sdk";
import express from "express";

const app = express();
app.use(express.json());

app.post("/api/chat", async (request, response) => {
  const { messages } = request.body as { messages: UIMessage[] };

  const openai = createOpenAI({
    apiKey: process.env.OPENAI_API_KEY,
  });

  const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "You are the OpenChatWidget example assistant. Keep answers concise and useful.",
    messages: await convertToModelMessages(messages),
  });

  result.pipeUIMessageStreamToResponse(response);
});

Paste the streaming URL endpoint into the <OpenChatWidget /> UI component:

<OpenChatWidget url="http://localhost:8787/api/chat" />

You should now be ready to chat!

Examples

We've included some examples of Open Chat Widget installed in web app projects as reference:

examples/vite-express-app: Open Chat Widget installed in a React + Vite frontend with an Express backend. Supports attachments and web search.
examples/nextjs-landing-page: Open Chat Widget installed on a Next.js app with API Routes. This is the live landing page too.
examples/nextjs-portfolio-chat: Open Chat Widget installed in a Next.js portfolio app with a resume-grounded /api/chat route for "ask me anything" style questions.

Roadmap

Read our roadmap to see what features are coming next. If you're interested in contributing, this is a great place to start to see what work needs to be done.

Community

Join us on Discord—share what you're building, get help, or just say hi. We'd love to have you.

License

Open source MIT license.

README