Integrating with client applications

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.

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.

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} styles={{}} />
      <p className="text-center">{state}</p>
    </div>
  );
}

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.