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

> Design accessible agent controls and transcript states while the public component package and client transport remain pending.

Prepare the presentation of an agent interface independently from its connection code. A verified public Threetone React component package and installation contract are not available in this documentation.

## Define the component responsibilities

| Interface element | Required behavior |
| - | - |
| Start control | Explain the action, show pending state, and prevent duplicate starts. |
| Connection status | Distinguish connecting, active, interrupted, and ended without relying on color alone. |
| Transcript | Keep speaker attribution and text readable; distinguish partial content from confirmed content when the released event contract supports that distinction. |
| Voice controls | Give mute and end actions accessible names and clear current states. |
| Error message | Explain the next useful action and preserve a fallback route. |

Do not invent a transcript event, mute method, or component prop while the public contract is pending. Record the data each element needs, then map it to the released types when they become available.

## Prepare the interface

<Steps>
  <Step title="Start with ordinary controls">
    Use semantic buttons, readable labels, visible focus, and a predictable tab order. Avoid clickable decorative artwork or controls that appear enabled before a supported action exists.
  </Step>

  <Step title="Separate display state from session ownership">
    Let one owner manage the connection and supply state to the presentation. Follow [React integration preparation](/agents-platform/deploy/web/react) for subscription and cleanup responsibilities. Keep keys and server-only configuration out of props sent to the browser.
  </Step>

  <Step title="Review failure and narrow-screen states">
    Check long transcripts, language direction, permission denial, expired access, and disconnected state. Important controls should remain usable when the interface expands or the on-screen keyboard appears.
  </Step>
</Steps>

Before release, test with keyboard navigation and assistive technology. Announce meaningful status changes without repeatedly reading every streamed token. Verify focus behavior when the interface opens, closes, or reports an error.

The eventual package must document styling boundaries, supported React versions, transport compatibility, and cleanup behavior. See [UI resources](/agents-platform/resources/ui-components) and [current availability](/agents-platform/overview#current-availability).

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Does a working mock transcript prove the component is ready?" id="react-components-faq-mock">It verifies presentation for that sample. Real event delivery, authorization, input handling, and cleanup still need tests against a released runtime.</Accordion>
  <Accordion title="Should the component start a session whenever it renders?" id="react-components-faq-render">No. Rendering can happen repeatedly. Use explicit session ownership and the released client's lifecycle contract.</Accordion>
</AccordionGroup>


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