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

# What is @waniwani/chat?

> The Waniwani chat widget: embed.js for any website, and the WaniwaniChat and ChatEmbed React components.

`@waniwani/chat` puts your Waniwani agent on your website. The same widget ships two ways, and both read their title, welcome message, suggestions and tool display from the channel you set up in the dashboard, so a copy change there reaches live sites without a deploy.

> [card] [Script tag](https://docs.waniwani.ai/sdk/chat/embed.md)
>
> Paste one `<script>` on any site. Inline, floating, composer or off.

> [card] [React](https://docs.waniwani.ai/sdk/chat/react.md)
>
> `WaniwaniChat` for the hosted backend, `ChatEmbed` when you run your own.

## Install

The script tag needs no install: copy the snippet from your project on [app.waniwani.ai](https://app.waniwani.ai). For React:

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

```tsx theme={null}
import { WaniwaniChat } from "@waniwani/chat";
import "@waniwani/chat/styles.css";

<WaniwaniChat token="wwp_..." channelId="..." />;
```

> [!NOTE]
>
> Up to `@waniwani/sdk` 0.25 the chat lived at `@waniwani/sdk/chat`. The [1.0 changelog](https://docs.waniwani.ai/sdk/changelog.md) has the migration skill that moves a project over.

## Next

* [Theming](https://docs.waniwani.ai/sdk/chat/theming.md) to match your brand.
* [Widget events](https://docs.waniwani.ai/sdk/chat/widget-events.md) to mirror chat activity into your own analytics.
* [WebMCP](https://docs.waniwani.ai/sdk/chat/webmcp.md) to publish your tools to AI agents that browse your site.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.