Framework guide · React
Embed in-product chat in React
This is the implementation reference. For architecture (embed-only, identity, storage), see embed-only chat and BYO vs Hosted.
Install
pnpm add @bootstrapware/chat # or npm install @bootstrapware/chat
Import the stylesheet once, near the feature or in a layout that wraps it. Forgetting styles.css is the most common "it looks broken" bug.
import { Chat, createLocalAdapter } from "@bootstrapware/chat";
import "@bootstrapware/chat/styles.css";The component is a client component
<Chat /> runs in the browser. In Next.js App Router, wrap it in a "use client" file. Full App Router notes: Next.js guide.
Component props
| Prop | Type | Purpose |
|---|---|---|
| user | { id, name?, email?, avatarUrl? } | Required. Your app asserts identity; Bootstrapware does not auth end users. |
| adapter | ChatAdapter | BYO or local adapter. Pass this to own messages. Takes precedence over Hosted. |
| appId | string | Hosted app ID (cha_). Required together with publishableKey for Hosted mode. |
| publishableKey | string | Publishable key (bsw_*_pub_). Safe in client code. Required for Hosted mode. |
| authorToken | string? | Short-lived signed assertion minted server-side. Required when the app has requireAuthorToken. |
Full table: React component docs.
Pitfalls
- Inventing user.id instead of the real session id
- Secret keys in the browser
- Expecting public chat URLs after publish
- Sending message bodies through MCP
Related: Component · Adapter · Next.js · Quickstart