Skip to main content

Agent Audio Visualizer – Radial

A radial bar visualizer for audio tracks.

Usage

This demo uses your device's microphone.

Code
'use client';
import { useSession, useVoiceAssistant } from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentAudioVisualizerRadial } from '@/components/agents-ui/agent-audio-visualizer-radial';
const TOKEN_SOURCE = TokenSource.sandboxTokenServer(
process.env.MY_LK_SANDBOX_TOKEN_SERVER_ID
);
export funnction Demo() {
const { audioTrack, state } = useVoiceAssistant();
return (
<AgentAudioVisualizerRadial
size="lg"
state={state}
radius=undefined
audioTrack={audioTrack}
/>
);
}
export default function DemoWrapper({ session }) {
const session = useSession(TOKEN_SOURCE);
return (
<AgentSessionProvider session={session}>
<Demo />
</AgentSessionProvider>
);
}

Features

  • Used to visualize the agent's audio tracks
  • Configure the number of bars and radius of the visualizer
  • Supports five sizes: icon, sm, md, lg, and xl

Installation

pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-radial

Props

Prop nameTypeDefault
size?
enum
md
state?
enum
connecting
radius?
number
barCount?
number
audioTrack?
LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder
className?
string
ref?
Ref<HTMLDivElement>
...props?
ComponentProps<'div'>