> ## Documentation Index
> Fetch the complete documentation index at: https://docs.concatflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <ConcatflowAssistant>

> The React component from @concatflow/embed/react. React 18 or later.

```tsx theme={"system"}
import { ConcatflowAssistant } from "@concatflow/embed/react";

<ConcatflowAssistant session={token} launcher="bubble" onSessionExpired={renew} />;
<ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" className="h-11" />;
```

The component takes the [`init` options](https://docs.concatflow.com/reference/embed/init), except `target`, plus three of its own. React is an optional peer dependency of `@concatflow/embed`: only this entry point needs it.

## Door

**session** `string`

A session token from your server. A new value is passed to the running assistant with `setSession`.

**siteToken** `string`

The public site token. Pass exactly one of `session` and `siteToken`.

## Options

**launcher** `"bubble" | "bar"` (default: bubble)

With `"bar"`, the component renders a `<div>` and the bar inside it. With `"bubble"`, it renders nothing in place.

**theme** `"auto" | "light" | "dark"` (default: auto)

**accent** `string`

**placeholder** `string`

**base** `string`

**onSessionExpired** `() =\> Promise\<string\>`

The latest function is always used: an inline arrow function does not restart the assistant.

## Component props

**onError** `(error: Error) =\> void` (default: console.error)

Called when `widget.js` fails to load or the options are invalid.

**className** `string`

Applied to the bar's container. `launcher="bar"` only.

**style** `CSSProperties`

Applied to the bar's container. `launcher="bar"` only.

## Lifecycle

| Event | Effect |
| - | - |
| Mount | Loads `widget.js` (once per page) and calls `init`. |
| `session` changes | `setSession(session)` on the running assistant. |
| `siteToken`, `launcher`, `theme`, `accent`, `placeholder` or `base` changes | `destroy()`, then a new `init`. |
| Switch between `session` and `siteToken` | `destroy()`, then a new `init`. |
| `onSessionExpired` added or removed | `destroy()`, then a new `init`. A new function alone changes nothing. |
| Unmount | `destroy()`. |

When the logged-in customer changes, change the component's `key`. See [When the customer changes](https://docs.concatflow.com/guides/per-user-door.md#when-the-customer-changes).

## Type

```ts theme={"system"}
import type { ConcatflowAssistantProps } from "@concatflow/embed/react";
```


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