When building voice agents with the Agents framework, your frontend can leverage LiveKit’s client SDKs to manage media devices and transport audio and video streams.
We also offer UI components tailored for voice agents, such as visualizers and control bars.
Voice Agent Components
We've introduced a new hook, useVoiceAssistant, which returns the voice assistant’s state and audio track. You pass them to a visualizer component to give users visual feedback about the agent's current status.
There are also two new components available:
BarVisualizer: Visualizes audio output with vertical bars. You can optionally set the number of bars and the minimum and maximum height. The visualizer can be customized via CSS styles to fit your application's design.
tip:When
state
is passed into theBarVisualizer
component, it visualizes both the agent’s state (likelistening
orthinking
) and the audio spectrum.VoiceAssistantControlBar: A control bar that includes audio settings and a disconnect button.
Example
Here's a basic example showing how these components work together:
// in next.js, "use client" is needed to indicate it shouldn't be// server-side rendered"use client";import "@livekit/components-styles";import {LiveKitRoom,useVoiceAssistant,BarVisualizer,RoomAudioRenderer,VoiceAssistantControlBar,} from "@livekit/components-react";export default function MyVoiceAgent() {return (<LiveKitRoomtoken={myToken}serverUrl={serverUrl}connect={true}audio={true}><SimpleVoiceAssistant /><VoiceAssistantControlBar /><RoomAudioRenderer /></LiveKitRoom>);}function SimpleVoiceAssistant() {const { state, audioTrack } = useVoiceAssistant();return (<div className="h-80"><BarVisualizer state={state} barCount={5} trackRef={audioTrack} styles={{}} /><p className="text-center">{state}</p></div>);}
Testing Agent UI
You can try out both of these components in the realtime playground. These components are also included in the client when you create an app using LiveKit Sandbox.