I engineered these responsive frontend components to demonstrate that Voice AI embeds don't have to be generic. I utilized LiveKit's Client-Side SDK to manage the full WebRTC lifecycle, transforming standard audio streams into branded, interactive experiences.

Session Management: Implemented logic to consume backend authentication tokens and initialize LiveKit sessions (Room.connect).

Track Subscription: Handled remote track subscription events to ensure audio is routed and played correctly the moment the agent joins.

Reactive Interfaces: The buttons are strictly typed to LiveKit room states, providing immediate visual feedback for "Connecting," "Listening," "Speaking," and "Disconnected" events.

Async Handling: Managed asynchronous connection flows to ensure the UI remains responsive while the WebRTC handshake occurs in the background.

Dynamic Visualizers: Built custom UI components that subscribe to the remote AudioTrack. The interface visualizes volume amplitude in real-time, creating a polished, natural conversational experience.

Microphone Logic: Integrated browser-native getUserMedia permissions handling directly within the interaction flow