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.

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 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 {
  LiveKitRoom,
  useVoiceAssistant,
  BarVisualizer,
  RoomAudioRenderer,
  VoiceAssistantControlBar,
} from "@livekit/components-react";

export default function MyVoiceAgent() {
  return (
    <LiveKitRoom
      token={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} 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.