> ## 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.

# Chat in React

> Embed the Waniwani chat as a React component in your app.

For React apps where you want full control over layout, theming, and lifecycle, import the chat directly from `@waniwani/sdk/chat`.

<Note>
  **Platform feature.** Requires a Waniwani project token (`wwp_...`). [Get one at app.waniwani.ai](https://app.waniwani.ai) or read more about the [Platform](/sdk/platform/overview).
</Note>

## Install

```bash theme={null}
bun add @waniwani/sdk
```

Add the stylesheet to your app once (e.g. in `_app.tsx` or your root layout):

```ts theme={null}
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.

```tsx theme={null}
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](https://ai-sdk.dev) and the component handles the rest.

## Theming

Pick a preset (`light`, `dark`, or `auto`) and optionally layer per-property overrides on top:

```tsx theme={null}
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](https://github.com/WaniWani-AI/sdk/blob/main/skills/waniwani-sdk/references/chat-widget.md#theming-the-chat-widget) for the full variable list.