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

# React

> Embed Char in React apps with publishableKey and optional idToken

## Install

<Snippet file="install-agent.mdx" />

## Web component in React

```tsx theme={null}
import { useEffect, useRef } from "react";
import "@mcp-b/char/web-component";
import type { CharAgentElement } from "@mcp-b/char/web-component";

const PUBLISHABLE_KEY = "pk_live_...";

export function SupportAgent({ idToken }: { idToken?: string }) {
  const ref = useRef<CharAgentElement>(null);

  useEffect(() => {
    if (!idToken) return;
    ref.current?.connect({ publishableKey: PUBLISHABLE_KEY, idToken });
  }, [idToken]);

  return <char-agent ref={ref} publishable-key={PUBLISHABLE_KEY} />;
}
```

## React wrapper (`@mcp-b/char-react`)

```tsx theme={null}
import { CharAgent } from "@mcp-b/char-react";

export function SupportAgent({ idToken }: { idToken?: string }) {
  return <CharAgent publishableKey="pk_live_..." idToken={idToken} />;
}
```

<Info>
  Use the same pattern in Next.js, Remix, and TanStack Start: render with `publishableKey`, pass `idToken` when available on the client.
</Info>