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

# React SDK

> Prepare a React integration with server-owned access, explicit session ownership, and cleanup while the public SDK release is pending.

A React integration needs a released client package and session contract. A verified public Threetone React SDK, package version, and installation recipe are not established here. You can prepare the application boundary and interface states now.

## Separate server and browser responsibilities

| Responsibility | Owner |
| - | - |
| Workspace API key and resource requests | Your trusted server. |
| User authorization for the intended agent | Your application server and the released session-access mechanism. |
| Start, end, permission prompts, and visible status | The browser interface. |
| Connection protocol and accepted events | The released client and runtime contract. |

For supported server resource reads, use the [TypeScript example](/agents-platform/resources/sdks/typescript). Keep that workspace credential out of client components, public environment variables, serialized props, and browser requests.

## Prepare the React lifecycle

<Steps>
  <Step title="Choose a session owner">
    Decide which component or application service owns an active session. Keep rerenders and route changes from accidentally creating a second connection. Begin an interaction through a deliberate user action with a clear pending state.
  </Step>

  <Step title="Pair subscriptions with cleanup">
    Once the client contract exists, attach its event subscriptions to the owning lifecycle and remove them during cleanup. React runs effect cleanup before a changed setup and on unmount; development Strict Mode also tests an extra setup-and-cleanup cycle. See [React's effect reference](https://react.dev/reference/react/useEffect).
  </Step>

  <Step title="Represent failures explicitly">
    Design idle, connecting, active, interrupted, and ended states. Prevent repeated start clicks from creating duplicate work. Show permission denial and expired access distinctly from a normal end.
  </Step>
</Steps>

## Release checks

When an official SDK is available, verify the package origin, supported React versions, event types, session access, and cleanup API. Test route transitions, development remounts, network loss, and session end against the real runtime. Do not suppress cleanup or disable development checks to hide duplicate connections.

Use [React components](/agents-platform/deploy/web/react-components) to prepare presentation and [the widget guide](/agents-platform/deploy/web/widget) if a managed embed is a better fit.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Can I install the dashboard's React components as an SDK?" id="react-sdk-faq-private">Private application components do not establish a supported public package or transport. Wait for the documented release and installation contract.</Accordion>
  <Accordion title="Can I use the TypeScript resource example directly in a client component?" id="react-sdk-faq-server">No. That example uses a workspace API key and belongs on a trusted server. Browser session access requires its own released mechanism.</Accordion>
</AccordionGroup>


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