Visitar URL original
Quick Start | ChatCops 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@1/dist/chatcops.min.js"
  data-api-url="https://your-api.com/chat"
  data-accent="#6366f1"
></script>

The widget accepts configuration via data-* attributes:

Attribute Description Default
data-api-url Your server endpoint (required) —
data-accent Primary accent color #6366f1
data-brand-name Name shown in chat header "AI Assistant"
data-welcome-message First message from the bot —
data-position bottom-right or bottom-left bottom-right

2. Set Up the Server

Section titled “2. Set Up the Server”

Install the server package:

Terminal window
npm install @chatcops/server express

Make a secret for the session tokens the widget fetches before it chats, and keep it with your API key (never in client code):

Terminal window
openssl rand -base64 32   # put it in CHATCOPS_SESSION_SECRET

Create a minimal Express server:

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


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


// app.use, so /chat/session, where the widget gets its token, reaches it too.
app.use('/chat', chatcopsMiddleware({
  provider: {
    type: 'claude',
    apiKey: process.env.ANTHROPIC_API_KEY!,
    model: 'claude-haiku-5-5',
  },
  systemPrompt: `You are a helpful customer support assistant for our website.
    Be friendly, concise, and helpful.`,
  allowedOrigins: ['*'],
  sessionSecrets: [process.env.CHATCOPS_SESSION_SECRET!],
  rateLimit: { maxRequests: 30, windowMs: 60_000 },
}));


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

Without sessionSecrets the server refuses to start, so a chat can’t be left open by accident. To try it without one, set allowAnonymous: true instead. See Session tokens.

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”