I'm happy to help you access

const { state, audioTrack } = useVoiceAssistant();

in your client JavaScript using the

@livekit/components-react

library. Here's a friendly example to guide you through the implementation:

import { useVoiceAssistant, BarVisualizer } from "@livekit/components-react";

export default function VoiceAssistantComponent() {
  const { state, audioTrack } = useVoiceAssistant();

  return (
    <div>
      {/* This will help visualize the agent's state and audio activity */}
      <BarVisualizer state={state} trackRef={audioTrack} barCount={5} />
      {/* Here we show the current state of the agent */}
      <p>Agent State: {state}</p>
    </div>
  );
}

Just a couple of important things to keep in mind: • Make sure the

useVoiceAssistant

hook is used inside a

LiveKitRoom

or

RoomContext.Provider

component. • Also, ensure you have a voice assistant agent running with

livekit-agents >= 0.9.0

. The

state

tells you what phase the agent is in, like "listening", "thinking", or "speaking". The

audioTrack

is a reference to the agent’s microphone track, which you can easily pass to visualizer components such as

BarVisualizer

. If you have any questions along the way, feel free to ask—I'm here to help you! Sources: examples/nextjs/pages/voice-assistant.tsx | Integrating with your frontend | LiveKit Docs | OpenAI and LiveKit partner to turn Advanced Voice into an API | docs/functions/BarVisualizer.html | client/web/src/app/page.tsx