@kognitiv-ai/kog-chat

Embeddable AI chat widget for your website.

Installation

npm:

npm install @kognitiv-ai/kog-chat

CDN:

<script src="https://unpkg.com/@kognitiv-ai/kog-chat"></script>

Usage

Minimal:

import KogChat from '@kognitiv-ai/kog-chat';

new KogChat().mount(document.body);

With client-side tools:

import KogChat from '@kognitiv-ai/kog-chat';

const kog = new KogChat();

// Register tools the AI can invoke
kog.registerTool('read_page_content', () => document.body.innerText);
kog.registerTool('get_current_url', () => window.location.href);
kog.registerTool('get_selected_text', () => window.getSelection().toString());

kog.mount(document.body);

CDN (no build step):

<script src="https://unpkg.com/@kognitiv-ai/kog-chat"></script>
<script>
  const kog = new KogChat();
  kog.registerTool('read_page_content', () => document.body.innerText);
  kog.mount(document.body);
</script>

Configuration

const kog = new KogChat({
  // All options are optional
  bearerToken: 'jwt-token',        // Pre-authenticate (skip login screen)
  apiBaseUrl: 'https://your-api',   // Backend API base
  theme: 'light',                  // 'dark' | 'light'
  corner: 'bottom-right',          // Widget position
  paneSide: 'right',               // Pane slide direction
  paneWidth: '550px',              // Pane width
  paneHeight: '100%',              // Pane height
  primaryColor: '#2563eb',         // Brand colors
  secondaryColor: '#00c389',
  tertiaryColor: '#d3d9e4',
  surfaceColor: '#f7f9fc',         // Surface background
  panelColor: '#ffffff',           // Panel background
  textColor: '#0f172a',
  triggerIconUrl: 'https://cdn.example.com/brand/chat-icon.svg', // or triggerIconSvg (inline)
  fullscreen: false,               // If true, iframe fills the provided container and stays open
});

// For an inline, always-open embed:
// const kog = new KogChat({ fullscreen: true }).mount(document.getElementById('chat-container'));

All options can also be provided later via kog.updateConfig({ ... }).

Events

kog.on('ready', () => console.log('Widget ready'));
kog.on('opened', () => console.log('Chat opened'));
kog.on('closed', () => console.log('Chat closed'));
kog.on('toolCall', ({ toolName, args }) => console.log('Tool called:', toolName));

API

| Method | Description | |--------|-------------| | mount(element) | Mount widget to a DOM element | | unmount() | Remove widget | | registerTool(name, callback) | Register a client-side tool | | unregisterTool(name) | Remove a tool | | open() | Open chat pane | | close() | Close chat pane | | on(event, callback) | Add event listener | | off(event, callback) | Remove event listener | | whenReady() | Returns Promise that resolves when ready |

License

MIT