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 { AgentAudioVisualizerWave } from '@/components/agents-ui/agent-audio-visualizer-wave';const TOKEN_SOURCE = TokenSource.sandboxTokenServer(process.env.NEXT_PUBLIC_ SANDBOX_TOKEN_SERVER_ID);export function Demo() {const { audioTrack, state } = useVoiceAssistant();return (<AgentAudioVisualizerWavesize="xl"state={state}blur={0.1}lineWidth={2}audioTrack={audioTrack}/>);}export default function DemoWrapper({ session }) {const session = useSession(TOKEN_SOURCE);return (<AgentSessionProvider session={session}><Demo /></AgentSessionProvider>);}
Features
- Visualize an agent's audio track
- Customize the color, line width and smoothing of the wave
- Select from five sizes:
icon,sm,md,lg, andxl - Responds to agent state with unique animations
Installation
pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-wave
Props
| Prop name | Type | Default |
|---|---|---|
size? | enum | lg |
state? | enum | speaking |
color? | string | – |
lineWidth? | number | – |
blur? | number | – |
audioTrack? | LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder | – |
className? | string | – |
ref? | Ref<HTMLDivElement> | – |
...props? | ComponentProps<'div'> | |