Agent Audio Visualizer – Grid | LiveKit Documentation

Usage

This demo uses your device's microphone.

'use client';

import { useSession, useAgent } from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentAudioVisualizerGrid } from '@/components/agents-ui/agent-audio-visualizer-grid';

const TOKEN_SOURCE = TokenSource.endpoint('/api/token');

export function Demo() {
  const { audioTrack, state } = useAgent();

  return (
    <AgentAudioVisualizerGrid
      size="lg"
      color={undefined}
      radius={3}
      interval={100}
      rowCount={15}
      columnCount={15}
      state={state}
      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
Configure the speed, row and column size
Select from five sizes: icon, sm, md, lg, and xl
Responds to agent state with unique animations
Apply a transformer function to generate custom CSS properties for each grid cell

Installation

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

Props

Prop name	Type	Default
radius?	number	–
interval?	number	100
rowCount?	number	5
columnCount?	number	5
className?	string	–
size?	enum	md
state?	enum	connecting
color?	`#${string}`	–
audioTrack?	LocalAudioTrack \| RemoteAudioTrack \| TrackReferenceOrPlaceholder	–
children?	ReactNode	–
ref?	Ref<HTMLDivElement>	–
...props?	ComponentProps<'div'>