@camunda/copilot-chat

Camunda Copilot Client

React component library for embedding Camunda Copilot chat interface into web applications.

Installation

npm install @camunda/copilot-chat

Usage

import { CopilotChat } from '@camunda/copilot-chat';

function App() {
  const handleSendMessage = async (request, options, instance) => {
    // Handle message sending logic
    const response = {
      output: {
        generic: [
          {
            response_type: 'text',
            text: `You said: "${request.input.text}"`,
          },
        ],
      },
    };

    await instance.messaging.addMessage(response);
  };

  return <CopilotChat customSendMessage={handleSendMessage} workareaSelector="body" />;
}

Props

• customSendMessage (required): Function to handle message sending and responses
• workareaSelector (optional): CSS selector for the workarea container (default: "body")

Features

• Bottom-right floating launcher button
• Sidecar panel that slides in from the right
• Automatically injected styles (no separate CSS import needed)

Development

Prerequisites

• Node.js ≥18.0.0
• npm ≥9.0.0

Setup

npm install

Local Development

# Run both library build (watch mode) and demo app together
npm run dev

# Or run individually:
# Build library in watch mode
npm run build:watch

# Run demo app (in another terminal)
npm run demo

# Run tests
npm test

# Lint
npm run lint

The demo app runs at http://localhost:4200. The dev command automatically rebuilds the library when you make changes and hot-reloads the demo app.

Contributing

# 1. Create a feature branch
git checkout -b '#ticketNumber/my-feature-description'

# 2. Make changes and test with dev mode
npm run dev

# 3. Run tests
npm test

# 4. Build to verify
npm run build

# 5. Commit and push
git commit -m "feat: my feature"
git push

License

Camunda License 1.0 - See LICENSE file for details.