feat: audio visualizer configuration

[thomasyuill-livekit]

Summary

Resolves https://linear.app/livekit/issue/LK-3566/extend-agent-starter-react-to-enable-audio-visualizers-configuration

This PR significantly extends the agent-starter-react example by adding audio visualizer configuration capabilities.

Key Features

• State-aware visualizations (idle, listening, thinking, speaking, etc.)
• Real-time audio volume responsiveness
• Animated transitions between states
• configurable appearance and behavior
• WebGL-based rendering for smooth performance

Configuration Updates

Added 8 new config options to app-config.ts:

• audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';
• audioVisualizerColor?: #${string};
• audioVisualizerColorDark?: #${string};
• audioVisualizerBarCount?: number;
• audioVisualizerGridRowCount?: number;
• audioVisualizerGridColumnCount?: number;
• audioVisualizerRadialBarCount?: number;
• audioVisualizerRadialRadius?: number;
• audioVisualizerAuraColorShift?: number;
• audioVisualizerWaveLineWidth?: number;

New Components

• AudioVisualizer component
  • Wrapper that switches between visualizer types based on config
• AgentAudioVisualizerAura
• AgentAudioVisualizerWave
• ReactShaderToy

Component Updates

• Installed the latest components from our Agents UI shadcn registry

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sandbox-voice-assistant	Ready	Preview	Feb 13, 2026 4:28pm

[thomasyuill-livekit]

cc @rektdeckard for awareness on upcoming Agent Builder Appearance configuration (specifically for the sandbox)

[codeSTACKr]

@thomasyuill-livekit is the grid visualizer supposed to match the audioVisualizerColor selected?

[bcherry]

i think this is great - but also (maybe as a follow-on is fine) we need to update the readme to describe what all this stuff is and how to use it

[thomasyuill-livekit]

we need to update the readme

ah good point
I'll include that in this PR

just resolving the grid audioVisualizerColor issue atm
just need to release a fix to the registry components first for that to happen

[thomasyuill-livekit]

grid audioVisualizerColor issue resolved
README updated

cc @codeSTACKr @bcherry

[1egoman]

nitpick: It might be nice to set this up so that the typescript logic will validate that all fields which are required for a certain audioVisualizerType value are non optional via something directionally like the below:

type Common = {
  audioVisualizerColor?: `#${string}`;
  audioVisualizerColorDark?: `#${string}`;
  audioVisualizerBarCount: number;
  audioVisualizerGridRowCount?: number;
  audioVisualizerGridColumnCount?: number;
  audioVisualizerRadialBarCount?: number;
  audioVisualizerRadialRadius?: number;
  audioVisualizerAuraColorShift?: number;
  audioVisualizerWaveLineWidth?: number;
};

type AudioVisualizerTypeBar = Common & {
  audioVisualizerType: 'bar'
  audioVisualizerBarCount: number;
};

type AudioVisualizerTypeRadial = Common & {
  audioVisualizerType: 'radial';
  audioVisualizerRadialBarCount: number;
  audioVisualizerRadialRadius: number;
};

// etc

type AudioVisualizer = AudioVisualizerTypeBar | AudioVisualizerTypeRadial;
export type AppConfig = AudioVisualizer & {
  // Rest of fields here
};

Then if somebody were configuring this locally they would be sure to have set all the right fields.

[thomasyuill-livekit]

thats a great idea

I'm going to do that in the next PR tho so I have some time to test it thoroughly