Integrating with your frontend

When building voice agents with the Agents framework, your frontend can leverage LiveKit‘s SDKs to manage media devices and transport audio and video streams.

The following UI components are specifically for voice agents, including speech visualizers and control bars.

Voice agent components

The useVoiceAssistant hook 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 two additional 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 the BarVisualizer component, it visualizes both the agent’s state (like listening or thinking) 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 {
  RoomContext,
  useVoiceAssistant,
  BarVisualizer,
  RoomAudioRenderer,
  VoiceAssistantControlBar,
} from "@livekit/components-react";

export default function MyVoiceAgent() {
  const [room] = useState(new Room());

  return (
    <RoomContext.Provider value={room}>
      <button onClick={() => room.connect(serverUrl, token)}>Connect</button>
      <SimpleVoiceAssistant />
      <VoiceAssistantControlBar />
      <RoomAudioRenderer />
    </RoomContext.Provider>
  );
}

function SimpleVoiceAssistant() {
  const { state, audioTrack } = useVoiceAssistant();
  return (
    <div className="h-80">
      <BarVisualizer state={state} barCount={5} trackRef={audioTrack} style={{}} />
      <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 frontend when you create an app using LiveKit Sandbox.