@sdkrouter/chat

Add an AI support agent to your website in one line of code. Connect your docs, GitHub repos, or any text — the widget answers user questions instantly, in any language, with source citations.

No AI infrastructure. No prompt engineering. No backend to build.

How it works

1. Upload your content to the SDKRouter knowledge base — docs, GitHub repos, or ZIP archives
2. Add <ChatWidget slug="your-project" /> to your site
3. Users ask questions — the AI finds the relevant answer and streams it in real time
4. Every response includes clickable source citations so users can verify

Works in any language. Upload docs in English, ask in Japanese — the AI understands meaning, not just keywords.

Quick Start

npm install @sdkrouter/chat

Floating chat button

import { ChatWidget } from '@sdkrouter/chat';

// That's it — a chat button appears on your page
<ChatWidget slug="my-project" />

// Private knowledge base? Add your API key
<ChatWidget slug="my-project" apiKey="sk_live_..." />

Inline embed

import { ChatEmbed } from '@sdkrouter/chat';

<div style={{ height: 500 }}>
  <ChatEmbed slug="my-project" />
</div>

Features

• Grounded answers — responses come from your content, not hallucinations
• Any language — ask in Korean, find English docs — works across languages
• Real-time streaming — token-by-token response with typing indicator
• Source citations — every answer links back to the original document
• Session memory — conversations persist across page refreshes
• Code highlighting — syntax-highlighted code blocks in responses
• Dark/light theme — auto-detects system preference, Tailwind, data-theme
• Two button styles — simple icon or animated gradient glow
• Custom icon — pass any React component as the chat button icon
• Portal rendering — no z-index conflicts with your app
• Self-contained styles — CSS auto-injected, no external stylesheets
• Localization-ready — locale prop for UI i18n, auto-detects from URL/browser
• React 18 & 19 — works with both versions

Personalization

Pass user info to get more relevant answers:

<ChatWidget
  slug="docs"
  visitorId={user.id}
  userContext={{
    name: "John",
    email: "[email protected]",
    avatarUrl: "https://...",
    language: "ru",
    role: "admin",
    custom: "Prefers short answers",
  }}
/>

The AI adapts its tone and detail level based on the user's role and preferences. Language is auto-detected from browser settings if not specified.

Data Sources

| Source | Description | |--------|-------------| | GitHub repos | Auto-syncs with your repository, detects changes automatically | | Manual upload | Upload documents through the API or dashboard | | ZIP archive | Bulk import — documents are processed and indexed automatically |

Display Modes

| Component | Description | |-----------|-------------| | ChatWidget | Floating button (bottom-right or bottom-left) that opens a chat panel | | ChatEmbed | Inline chat that renders directly in your page layout | | ChatPanel | Floating chat window | | ChatSidebar | Full-height sidebar with resizable handle |

Props

interface ChatConfig {
  slug: string;              // Your project identifier
  apiKey?: string;           // Required for private knowledge bases
  title?: string;            // Chat window title (default: 'AI Assistant')
  placeholder?: string;      // Input placeholder (default: 'Ask a question...')
  greeting?: string;         // First message shown to users
  position?: 'bottom-right' | 'bottom-left';
  streaming?: boolean;       // Real-time streaming (default: true)
  locale?: string;           // ISO 639-1 locale (e.g. 'en', 'ru', 'ko')
  userContext?: ChatUserContext;
}

Custom UI

Build your own chat interface with the provider and hook:

import { ChatProvider, useChatContext } from '@sdkrouter/chat';

<ChatProvider slug="my-project">
  <MyChatUI />
</ChatProvider>

function MyChatUI() {
  const { messages, sendMessage, isLoading } = useChatContext();

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.content}</div>
      ))}
      <button onClick={() => sendMessage('Hello!')}>Send</button>
    </div>
  );
}

Server-side / Node.js

The headless API client works without React:

import { KnowbaseClient } from '@sdkrouter/chat/api';

const client = new KnowbaseClient('my-project');
const session = await client.createSession();

// Stream a response
for await (const event of client.streamMessage(session.id, 'How do I get started?')) {
  if (event.type === 'chunk') process.stdout.write(event.delta);
}

License

MIT