LiveKit docs › Agents UI Components › Audio visualizers › Prebuilt

---

# Audio visualizer

> Components for visualizing agent and user audio in your frontend.

## Overview

Audio visualizer components give your voice agent a visual presence in your application. They render animated visualizations driven by two inputs: the audio track's volume levels and the agent's current state (listening, thinking, speaking). This combination means the visualizer responds naturally to conversation flow — animating during speech, settling during silence, and reflecting state transitions like thinking pauses.

**[AgentAudioVisualizerAll](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-all.md)**

## Choosing a visualizer

Agents UI includes five visualizer variants, each with a distinct visual style. All share the same props interface (`audioTrack`, `state`, `size`), so you can swap between them without changing your code.

| Component | Style | Best for |
| [**AgentAudioVisualizerBar**](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-bar.md) | Vertical bars that react to audio levels. | Clean, minimal interfaces. Configurable bar count and size. |
| [**AgentAudioVisualizerGrid**](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-grid.md) | A grid of cells that pulse with audio. | Compact layouts where a subtle pattern works well. |
| [**AgentAudioVisualizerRadial**](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-radial.md) | A circular visualization that expands outward. | Centered, prominent agent displays. |
| [**AgentAudioVisualizerWave**](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-wave.md) | A flowing waveform line. | Horizontal layouts or inline with text. |
| [**AgentAudioVisualizerAura**](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-aura.md) | A glowing, organic aura designed in partnership with Unicorn Studio. | Premium, immersive experiences with a distinctive look. |

## React example

Install a visualizer from Agents UI. This also installs all necessary dependencies, like `@livekit/components-react`.

```bash
pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-bar

```

Call the `useAgent` hook and pass the `audioTrack` and `state` to the component. `useAgent` must be called within an `AgentSessionProvider` context.

```tsx
'use client';

import { useAgent } from '@livekit/components-react';
import { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar';

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

  return (
    <AgentAudioVisualizerBar
      size="lg"
      state={state}
      barCount={5}
      audioTrack={audioTrack}
    />
  );
}

```

Check out the [AgentControlBar](https://docs.livekit.io/reference/components/agents-ui/component/agent-control-bar.md), which provides a simple set of common UI controls for voice agent applications, and additional [audio visualizer components](https://docs.livekit.io/reference/components/agents-ui.md#audio-visualizers).

## Other platform visualizers

The LiveKit component SDKs for SwiftUI, Android Compose, and Flutter also include audio visualizer components.

**Swift**:

First install the components package from [https://github.com/livekit/components-swift](https://github.com/livekit/components-swift).

Then use the `AgentBarAudioVisualizer` view to display the agent's audio and state:

```swift
struct AgentView: View {
    // Load the room from the environment
    @EnvironmentObject private var room: Room

    // Find the first agent participant in the room
    private var agentParticipant: RemoteParticipant? {
        for participant in room.remoteParticipants.values {
            if participant.kind == .agent {
                return participant
            }
        }
        
        return nil
    }

    // Reads the agent state property
    private var agentState: AgentState {
        agentParticipant?.agentState ?? .initializing
    }

    var body: some View {
          AgentBarAudioVisualizer(audioTrack: agentParticipant?.firstAudioTrack, agentState: agentState, barColor: .primary, barCount: 5)
              .id(agentParticipant?.firstAudioTrack?.id)
    }
}

```

---

**Android**:

First install the components package from [https://github.com/livekit/components-android](https://github.com/livekit/components-android).

Then use the `rememberVoiceAssistant` and `VoiceAssistantBarVisualizer` composables to display the visualizer, assuming you are within a `RoomScope` composable already.

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import io.livekit.android.compose.state.rememberVoiceAssistant
import io.livekit.android.compose.ui.audio.VoiceAssistantBarVisualizer

@Composable
fun AgentAudioVisualizer(modifier: Modifier = Modifier) {
    // Get the voice assistant instance
    val voiceAssistant = rememberVoiceAssistant()
    
    // Display the audio visualization
    VoiceAssistantBarVisualizer(
        voiceAssistant = voiceAssistant,
        modifier = modifier
            .padding(8.dp)
            .fillMaxWidth()
    )
}

```

---

**Flutter**:

First install the components package from [https://github.com/livekit/components-flutter](https://github.com/livekit/components-flutter).

```shell
flutter pub add livekit_components

```

Enable audio visualization when creating the `Room`:

```dart
// Enable audio visualization when creating the Room
final room = Room(roomOptions: const RoomOptions(enableVisualizer: true));

```

Then use the `SoundWaveformWidget` to display the agent's audio visualization, assuming you're using a `RoomContext`:

```dart
import 'package:flutter/material.dart';
import 'package:livekit_client/livekit_client.dart';
import 'package:livekit_components/livekit_components.dart' hide ParticipantKind;
import 'package:provider/provider.dart';

/// Shows a simple audio visualizer for an agent participant
class AgentView extends StatelessWidget {
  const AgentView({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<RoomContext>(
      builder: (context, roomContext, child) {
        // Find the agent participant in the room
        final agentParticipant = roomContext.room.remoteParticipants.values
            .where((p) => p.kind == ParticipantKind.AGENT)
            .firstOrNull;
        
        if (agentParticipant == null) {
          return const SizedBox.shrink();
        }
        
        // Get the agent's audio track for visualization
        final audioTrack = agentParticipant.audioTrackPublications
            .firstOrNull?.track as AudioTrack?;
            
        if (audioTrack == null) {
          return const SizedBox.shrink();
        }
        
        // Show the waveform visualization
        return SoundWaveformWidget(
          audioTrack: audioTrack,
          options: AudioVisualizerOptions(
            width: 32,
            minHeight: 32,
            maxHeight: 256,
            color: Theme.of(context).colorScheme.primary,
            count: 7,
          ),
        );
      },
    );
  }
}

```

## Related

See the full API reference for each visualizer variant, including interactive previews and prop documentation.

- **[Build a custom visualizer](https://docs.livekit.io/frontends/agents-ui/audio-visualizer/custom.md)**: Create your own shader-based audio visualizers with custom animations.

- **[AgentAudioVisualizerBar](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-bar.md)**: Bar-style audio visualization reference.

- **[AgentAudioVisualizerGrid](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-grid.md)**: Grid-style audio visualization reference.

- **[AgentAudioVisualizerRadial](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-radial.md)**: Radial audio visualization reference.

- **[AgentAudioVisualizerWave](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-wave.md)**: Wave-form audio visualization reference.

- **[AgentAudioVisualizerAura](https://docs.livekit.io/reference/components/agents-ui/component/agent-audio-visualizer-aura.md)**: Aura audio visualization reference.

---

This document was rendered at 2026-06-07T11:35:37.995Z.
For the latest version of this document, see [https://docs.livekit.io/frontends/agents-ui/audio-visualizer/prebuilt.md](https://docs.livekit.io/frontends/agents-ui/audio-visualizer/prebuilt.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).