Bot Audio Panel

The BotAudioPanel component displays a visual representation of the bot's audio output using a waveform visualizer. It automatically integrates with the Pipecat Client SDK to show real-time audio visualization.

import { BotAudioPanel } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 w-full">
  <BotAudioPanel />
</div>

Usage

Collapsed Mode

Display the panel in a compact collapsed format.

import { BotAudioPanel } from "@pipecat-ai/voice-ui-kit";

<div className="w-64">
  <BotAudioPanel collapsed={true} />
</div>

Visualization

The panel uses the VoiceVisualizer component with:

• 10 bars for visualization
• Bar color from theme (--color-agent)
• Square line caps
• Bottom origin for bars
• Transparent background

The visualization automatically adjusts:

• Bar width based on container width (max 240px)
• Bar height based on container height (max 240px / 16:9 ratio)
• Minimum bar width of 2px
• Minimum height of 20px

Integration

The BotAudioPanel component uses:

• usePipecatClientMediaTrack("audio", "bot") to get the bot's audio track
• VoiceVisualizer component for audio visualization
• Panel component for consistent panel styling

It must be used within a PipecatClientProvider context to function properly.