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

# React

> One component, <ConcatflowAssistant>, for both doors. Works with Next.js, Remix, Vite and any React 18+ app.

```bash theme={"system"}
npm install @concatflow/embed
```

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

The component loads `widget.js` once, in an effect, and destroys the assistant when it unmounts. It is safe to import in server-rendered code.

## Public door

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

export function SearchBar() {
  return <ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" className="h-11" />;
}
```

## Per-user door

Pass the token your server opened, and a function that opens a new one.

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

async function renew(): Promise<string> {
  const res = await fetch("/api/concatflow/session", { method: "POST" });
  if (!res.ok) throw new Error("Could not open a Concatflow session");
  return (await res.json()).token;
}

export function Assistant({ customerId, token }: { customerId: string; token: string }) {
  return (
    <ConcatflowAssistant
      key={customerId}
      session={token}
      launcher="bubble"
      onSessionExpired={renew}
      onError={(err) => console.warn("Concatflow:", err.message)}
    />
  );
}
```

The `"use client"` line is for Next.js App Router. Other setups ignore it. For the server route, see [Per-user door](https://docs.concatflow.com/guides/per-user-door.md).

## How props behave

| Prop | On change |
| - | - |
| `session` | The new token goes to the running assistant. The conversation stays. |
| `siteToken`, `launcher`, `theme`, `accent`, `placeholder`, `base` | The assistant is destroyed and created again. |
| `onSessionExpired`, `onError` | The latest function is used. Nothing restarts. |
| `key` | React remounts the component: a fresh assistant. Use it when the customer changes. |

## Where it renders

* `launcher="bubble"` (default): the bubble floats in the bottom-right corner. The component renders nothing in place.
* `launcher="bar"`: the component renders a `<div>` and the bar inside it. Size and place it with `className` or `style`. The bar is 42px high and fills the width of that `<div>`.

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

<ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" style={{ maxWidth: 560 }} />;
```

## Errors

`onError` receives an `Error` when `widget.js` fails to load (offline, blocked by a CSP or an ad blocker) or when the options are invalid. Without `onError`, the component logs to `console.error`. It never throws during render.

## Server-side rendering

Nothing runs on the server. The component renders an empty `<div>` (bar) or nothing (bubble), then loads the assistant in the browser.

All props are listed in the [React reference](https://docs.concatflow.com/reference/embed/react.md).


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