JSPM

OpenChatWidget lets you embed a ChatGPT-like AI chat widget into your website. Connect the widget to any AI agent you build, any LLM model. It's free, open source, and self hosted. You own the entire stack.

If you want to bring agentic chat to your product, this is it. Get started with only a few lines of code.

Example use cases

• AI customer service agent - Help customers get instant answers, resolve common support questions, and reduce ticket volume. Open source free alternative to Intercom's Fin Agent.\

• Knowledge base and documentation search - Let users ask questions about your docs, product guides, or internal knowledge base in natural language.

• In-product onboarding - Add a chat assistant that helps users navigate your dashboard, learn features, and get unstuck faster.

• Bookings and task automation - Power flows like scheduling meetings, tracking orders, booking appointments, and triggering simple actions.

🚀 Quick Start

1. Install the chat widget

Install the widget in your React app:

npm install @openchatwidget/sdk

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 App() {
  return (
    <>
      <main>
        ...
      </main>

      <OpenChatWidget url="<YOUR_AGENT_STREAMING_ENDPOINT>" /> // Fill out streaming endpoint in Step 3.
    </>
  );
}

2. Build your first agent

The next step is to set up your AI agent backend. Create an API endpoint with your favorite Node backend framework, such as Express or Hono.

Here's a simple text stream agent:

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);
});

3. Connect the widget to the agent.

Grab the exact URL of your agent endpoint and paste it into <YOUR_AGENT_STREAMING_ENDPOINT>, for example http://localhost:8787/api/chat. Make sure to start both your front end and Node backend. You should be able to start chatting.

For a working basic example, check out examples/vite-express-app.

✨ Features

Stack

Open Chat Widget is a simple UI wrapper around Vercel AI-SDK. When building your backend AI agent, all capabilities from AI-SDK are compatible with Open Chat Widget.

• Front end is written in React / Typescript
• Agentic chat powered by Vercel AI SDK.

Why AI-SDK?

We want to be opiniated on how

📦 Examples

• examples/vite-express-app: Vite frontend with an Express backend and OpenAI streaming

🛣️ Roadmap

See ROADMAP.md

🤝 Community

• Discord
• CONTRIBUTING.md

📄 License

MIT. See LICENSE.