Embeddable React AI chat widget

Not on npm yet — install straight from the public repo. It builds itself on install, so no extra step is needed. Import the stylesheet once at your app entry; use styles-no-base.css to avoid global CSS resets and keep full control of your own cascade.

# Not published to npm yet — install from the public repo.
# The package builds itself on install.

# npm
npm install github:anter-ai/ai-chat-sdk

# pnpm
pnpm add github:anter-ai/ai-chat-sdk

# Pin to a commit for a reproducible install:
npm install github:anter-ai/ai-chat-sdk#<commit-sha>

# Load the widget styles once, at your app entry:
import "@anter/ai-chat-sdk/styles-no-base.css";

Quickstart Code

Implement a ChatAdapter that streams from your agent endpoint, then wrap your app in ChatProvider and drop in a ChatWidget.

1 · Adapter

import type { ChatAdapter, MessagePayload } from "@anter/ai-chat-sdk/types";

export class LandingChatAdapter implements ChatAdapter {
  constructor(private readonly agentId: string) {}

  private get streamPath(): string {
    return `/api/v1/external/agent-runner/agents/${this.agentId}/run-stream`;
  }

  async sendMessage(payload: MessagePayload): Promise<ReadableStream<Uint8Array>> {
    const res = await fetch(this.streamPath, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        message: payload.message,
        organizationId: payload.organizationId,
        // contextVariables flow through to the agent. Pass per-session identity
        // so the runner can scope memory/history to this conversation.
        contextVariables: {
          ...(payload.contextVariables ?? {}),
          userId: `chat-widget-${payload.sessionId}`,
          sessionId: payload.sessionId,
        },
      }),
    });
    if (!res.ok) throw new Error(`sendMessage failed: ${res.status}`);
    if (!res.body) throw new Error("sendMessage: missing response body");
    return res.body;
  }
}

2 · Provider + widget

import { ChatProvider, ChatWidget } from "@anter/ai-chat-sdk";
import { LandingChatAdapter } from "./lib/landing-adapter";

const organizationId = (import.meta.env.VITE_ORG_ID as string | undefined) ?? "anter";
const chatAgentId = import.meta.env.VITE_CHAT_AGENT_ID as string;
const adapter = new LandingChatAdapter(chatAgentId);

<ChatProvider
  organizationId={organizationId}
  adapter={adapter}
  config={{
    theme: "light",
    enableModelSelector: false,
    enableSlashCommands: false,
    enableCommandPalette: false,
    enableFileUpload: false,
    enableSlashFocusShortcut: false,
    enableArtifacts: true,
  }}
  strings={{
    composerPlaceholder: "Ask a question...",
    footerDisclaimer: "AI responses can contain mistakes.",
  }}
>
  {page}
  <ChatWidget position="bottom-right" title="Anter" />
</ChatProvider>

Configuration

Pass a config object to ChatProvider to tune the experience. The "Landing value" column shows the choices used on this very site.

Theming

The widget renders against --chat-* CSS custom properties (accent, surfaces, borders, message text). Override them in your own stylesheet to match your design system — light and dark adapt automatically. Because the SDK ships its styling as raw, prefixed ais-* classes rather than relying on a Tailwind runtime, it drops cleanly into any host without a build-time theme step.

Guides & Where it's used