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 { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar';const TOKEN_SOURCE = TokenSource.sandboxTokenServer(process.env.MY_LK_SANDBOX_TOKEN_SERVER_ID);export funnction Demo() {const { audioTrack, state } = useVoiceAssistant();return (<AgentAudioVisualizerBarsize="lg"state={state}barCount={5}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 used in the visualizer
- Supports five sizes:
icon,sm,md,lg, andxl
Installation
pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-bar
Props
| Prop name | Type | Default |
|---|---|---|
size? | enum | md |
state? | enum | connecting |
barCount? | number | – |
audioTrack? | LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder | – |
className? | string | – |
children? | (ReactNode | ReactNode[]) & ReactNode | – |
ref? | Ref<HTMLDivElement> | – |
...props? | ComponentProps<'div'> | |