Skip to content
ChatCops

Quick Start

Get ChatCops running in three steps: add the widget, set up a server, and start chatting.

1. Add the Widget

Section titled “1. Add the Widget”

Drop a single <script> tag into your HTML. The widget auto-initializes and appears as a floating button in the bottom-right corner.

<script
  src="https://cdn.jsdelivr.net/npm/@chatcops/widget/dist/chatcops.min.js"
  data-api-url="https://your-api.com/chat"
  data-accent="#6366f1"
></script>

The widget accepts configuration via data-* attributes:

AttributeDescriptionDefault
data-api-urlYour server endpoint (required)—
data-accentPrimary accent color#6366f1
data-brand-nameName shown in chat header"AI Assistant"
data-welcome-messageFirst message from the bot—
data-positionbottom-right or bottom-leftbottom-right

2. Set Up the Server

Section titled “2. Set Up the Server”

Install the server package:

Terminal window
npm install @chatcops/server express

Create a minimal Express server:

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 customer support assistant for our website.
    Be friendly, concise, and helpful.`,
  cors: '*',
  rateLimit: { maxRequests: 30, windowMs: 60_000 },
}));


app.listen(3001, () => {
  console.log('ChatCops server running on http://localhost:3001');
});

3. Test It

Section titled “3. Test It”
  1. Start your server: node server.js
  2. Open your HTML page in a browser
  3. Click the chat bubble — you’re live!

Next Steps

Section titled “Next Steps”