AI Chat Widget
for Any Website

Drop-in AI chatbot that connects to Claude, OpenAI, or Gemini.
One script tag. Zero dependencies. Full control.

Get Started Star on GitHub

index.html

1 <script

2 src="https://cdn.jsdelivr.net/npm/@chatcops/widget"

3 data-api-url="https://your-api.com/chat"

4 data-accent="#6366f1"

5 ></script>

~7KB gzipped Zero Dependencies MIT License

Live Preview

See it in action

A beautifully crafted chat widget that blends into any website. Dark mode, streaming, fully customizable.

Features

Everything you need

Production-ready from day one. Multi-provider AI, lead capture, analytics, and more.

Multi-Provider

Claude, OpenAI, and Gemini. Switch providers with a single config change.

Zero Dependencies

Shadow DOM isolated widget. ~7KB gzipped. No framework lock-in.

Streaming

Real-time SSE streaming from all providers. Token-by-token responses.

Lead Capture

Built-in tool for capturing contact info with webhook support.

Knowledge Base

Feed text chunks or FAQ pairs for context-aware, grounded responses.

i18n

8 built-in locales. Fully customizable strings for any language.

Persistence

localStorage on client, pluggable stores on server. Conversations survive refreshes.

Deploy Anywhere

Express, Vercel, Cloudflare Workers. Ready-made adapters included.

Quick Setup

Three steps to launch

From zero to AI chatbot in under 5 minutes.

1

Add the Script Tag

Drop a single <script> tag into your HTML. The widget auto-initializes with Shadow DOM isolation.

2

Configure Your Server

Set up a server endpoint with your AI provider of choice. Express, Vercel, or Cloudflare.

import { chatcopsMiddleware }
from '@chatcops/server';

app.post('/chat', chatcopsMiddleware({
provider: { type: 'claude' },
}));

3

Chat with Customers

Your AI assistant is live. Capture leads, answer questions, and delight users.

Adapters

Deploy anywhere

First-class adapters for every major platform. Copy, paste, deploy.

import express from 'express';
import { chatcopsMiddleware } from '@chatcops/server';

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

app.post('/chat', chatcopsMiddleware({
  provider: {
    type: 'claude',
    apiKey: process.env.ANTHROPIC_API_KEY,
    model: 'claude-haiku-4-5-20251001',
  },
  systemPrompt: 'You are a helpful assistant.',
  cors: '*',
  rateLimit: { maxRequests: 30, windowMs: 60_000 },
}));

app.listen(3001);

Providers

Your AI, your choice

Switch providers with one config change. No code rewrites needed.

Claude

Anthropic

OpenAI

GPT Models

Gemini

Google AI

Open Source & Free Forever

ChatCops is MIT licensed. Use it for personal projects, startups, or enterprise. Contribute on GitHub.

Star on GitHub Read the Docs

AI Chat Widget for Any Website