Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.waniwani.ai/llms.txt

Use this file to discover all available pages before exploring further.

For React apps where you want full control over layout, theming, and lifecycle, import the chat directly from @waniwani/sdk/chat.
Platform feature. Requires a WaniWani project token (wwp_...). Get one at app.waniwani.ai or read more about the Platform.

​
Install

bun add @waniwani/sdk
Add the stylesheet to your app once (e.g. in _app.tsx or your root layout): 
import "@waniwani/sdk/chat/styles.css";

​
ChatEmbed

Borderless chat that fills its parent container — drop it inside any layout that already provides its own chrome. api is required; there is no default. 
import { ChatEmbed } from "@waniwani/sdk/chat";

<ChatEmbed
  api="/api/my-chat"
  body={{ environmentId, sessionId }}
  appearance={{ theme: "dark" }}
/>;
ChatEmbed is backend-agnostic: pass any api endpoint that implements the Vercel AI SDK chat protocol and the component handles the rest.

​
Theming

Pick a preset (light, dark, or auto) and optionally layer per-property overrides on top: 
import { ChatEmbed } from "@waniwani/sdk/chat";

<ChatEmbed
  api="/api/my-chat"
  appearance={{
    theme: "dark",
    variables: {
      primaryColor: "#03d916",
      borderRadius: 12,
    },
  }}
/>;
auto follows the host’s prefers-color-scheme. For finer-grained customisation, set --ww-* CSS variables on the chat’s container — see Theming the chat widget for the full variable list.