Bot Video Panel

The BotVideoPanel component displays the bot's video feed in a panel. It automatically integrates with the Pipecat Client SDK to show real-time video output.

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

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

Usage

Collapsed Mode

Display the panel in a compact collapsed format.

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

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

Video Display

The panel uses the PipecatClientVideo component with:

• participant="bot" to display bot video
• fit="contain" to preserve aspect ratio
• aspect-video class for 16:9 ratio
• Muted background when no video is available

Integration

The BotVideoPanel component uses:

• usePipecatClientMediaTrack("video", "bot") to get the bot's video track
• PipecatClientVideo component for video display
• Panel component for consistent panel styling

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