# React components

Embed an authenticated conversation or decision in your own product.

[npm](https://www.npmjs.com/package/@beepgrid/react) · [Website](https://beepgrid.com) · [Source](https://github.com/beepgrid/beepgrid/tree/main/sdk/react)

The React package provides `BeepgridRequest`, `BeepgridConversation`, `useBeepgridRequest` and `browserClient`. It uses the same access rules as the workspace.

## Install

```sh
npm install @beepgrid/react @beepgrid/sdk react
```

React 19 or later is required. Styles are optional and imported separately.

## Embed a request

In a React application with the packages installed:

```tsx
import { useMemo } from 'react';
import { browserClient, BeepgridRequest } from '@beepgrid/react';
import '@beepgrid/react/styles.css';

export function Decision({ requestId }: { requestId: string }) {
  const client = useMemo(() => browserClient(), []);
  return <BeepgridRequest client={client} id={requestId}
    onConversation={id => location.assign('/conversations/' + id)} />;
}
```

Supply an actual request ID visible to the signed-in person. Use `BeepgridConversation` with the conversation ID to embed its thread.

## Authenticate the person

Host behind the same origin as Beepgrid, or proxy `/api/v1` through your application. Establish the person's Beepgrid HttpOnly session through the configured identity flow. Your application's unrelated login cookie is not automatically a Beepgrid identity.

Never put worker, owner, launcher or provider tokens in browser code. The server checks the person's current permissions for every operation.

Unmounting a component stops its polling, not the underlying request. The supplied styles are optional; preserve accessible form controls when customizing them.