Skip to main content
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

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

1

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

Separate display state from session ownership

Let one owner manage the connection and supply state to the presentation. Follow React integration preparation for subscription and cleanup responsibilities. Keep keys and server-only configuration out of props sent to the browser.
3

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.
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 and current availability.

​
Frequently asked questions

It verifies presentation for that sample. Real event delivery, authorization, input handling, and cleanup still need tests against a released runtime.
No. Rendering can happen repeatedly. Use explicit session ownership and the released client’s lifecycle contract.