@aichatbot-saas/react

Native, in-page React (web) chat UI component for the AIChatbot SaaS.

Unlike the drop-in chatbot.js floating bubble, <AIChatbot> is a real inline chat panel you embed wherever you want — it fills its container and the host controls size and placement. It's a thin UI binding over the framework-agnostic @aichatbot-saas/core (REST client + theme model + headless ChatController), so all behavior lives in one shared place and this package just renders that state.

• Themed entirely from your backend config (and overridable locally).
• 100% inline styles — no global CSS, no external UI libraries, never clobbers host styles.
• SSR-safe: nothing touches window/document at module load or during render.
• Strict TypeScript, React 17/18/19 (react + react-dom ≥ 17).

Install

npm i @aichatbot-saas/react
# pnpm add @aichatbot-saas/react   |   yarn add @aichatbot-saas/react

Installing this package also pulls in its dependency @aichatbot-saas/core. react and react-dom are peer dependencies — bring your own.

Usage

The component fills its parent, so wrap it in a sized box:

import { AIChatbot } from '@aichatbot-saas/react';

export function Support() {
  return (
    <div style={{ width: 380, height: 560 }}>
      <AIChatbot apiKey="pk_live_xxx" apiUrl="https://api.you.com" />
    </div>
  );
}

Only apiKey is required. Everything else (bot name, greeting, suggestions, languages, theme) is fetched from the backend on mount.

Props

| Prop | Type | Required | Description | |-------------|-----------------------|:--------:|-----------------------------------------------------------------------------| | apiKey | string | yes | Publishable API key, sent as X-API-Key. | | apiUrl | string | no | Backend base URL. Defaults to same-origin. | | language | string | no | Force a language. Otherwise config.languages[0] → "en". | | theme | Partial<ChatTheme> | no | Local theme overrides (highest precedence). See below. | | sessionId | string | no | Stable device/session id forwarded to the backend for threading. | | className | string | no | Extra class on the root panel. | | style | React.CSSProperties | no | Inline styles merged onto the root panel (e.g. width/height/border). |

Theming

Theme precedence is client override → backend config → built-in default. Override any ChatTheme token via the theme prop:

<AIChatbot
  apiKey="pk_live_xxx"
  apiUrl="https://api.you.com"
  theme={{
    primaryColor: '#7c3aed',     // launcher/header/user bubble/send/chips
    botBubbleColor: '#f3f4f6',
    bubbleRadius: 18,
    inputRadius: 24,
    fontFamily: 'Inter, system-ui, sans-serif',
  }}
/>

Next.js / SSR

<AIChatbot> is SSR-safe — it renders a stable initial snapshot on the server and only performs network/storage I/O inside effects on the client. In the App Router it's a Client Component, so render it from one and add the directive at the top of that file:

'use client';
import { AIChatbot } from '@aichatbot-saas/react';

export default function ChatPanel() {
  return (
    <div style={{ width: 380, height: 560 }}>
      <AIChatbot apiKey={process.env.NEXT_PUBLIC_AICHATBOT_KEY!} apiUrl="https://api.you.com" />
    </div>
  );
}

Advanced: headless usage

The full core surface is re-exported for convenience, so you can build a custom UI without depending on @aichatbot-saas/core directly:

• useChatController(options) → { state, controller } — the hook the component uses internally (wraps a ChatController in useSyncExternalStore).
• AIChatbotClient — the headless REST client (fetchConfig, fetchSuggestions, sendMessage, sendFeedback).
• ChatController / createChatController, resolveTheme, DEFAULT_THEME.
• The presentational pieces: MessageBubble, SuggestionChips, TypingIndicator.
• Types: ChatTheme, ChatMessage, ChatConfig, ChatResponse, ChatState, etc.

License

MIT © 2026 AIChatbot