# Openchatwidget

> AI chat widget in your web app. Supports MCP as a client.

- **Type:** MCP server
- **Install:** `agentstack add mcp-open-chat-widget-openchatwidget`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Open-Chat-Widget](https://agentstack.voostack.com/s/open-chat-widget)
- **Installs:** 0
- **Category:** [Integrations](https://agentstack.voostack.com/c/integrations)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Open-Chat-Widget](https://github.com/Open-Chat-Widget)
- **Source:** https://github.com/Open-Chat-Widget/openchatwidget
- **Website:** https://openchatwidget.com/

## Install

```sh
agentstack add mcp-open-chat-widget-openchatwidget
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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](https://ai-sdk.dev/) 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:

```bash
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.

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

export default function MySite() {
  return (
    <>
      ...
      " /> 
    
  );
}
```

Step 2: Build an AI 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: 
```tsx
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);
});
```

Step 3: Connect widget to agent

Paste the streaming URL endpoint into the `` UI component:

```tsx
 
```

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`](./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`](./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`](./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](./ROADMAP.md)

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](https://discord.gg/jA4vcJKECy)

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

## [License](./LICENSE)

Open source MIT license.

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Open-Chat-Widget](https://github.com/Open-Chat-Widget)
- **Source:** [Open-Chat-Widget/openchatwidget](https://github.com/Open-Chat-Widget/openchatwidget)
- **License:** MIT
- **Homepage:** https://openchatwidget.com/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-open-chat-widget-openchatwidget
- Seller: https://agentstack.voostack.com/s/open-chat-widget
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.