Bot Audio Control

The BotAudioControl component provides a button with a popover-mounted volume slider for controlling the bot's audio output level. It integrates with the kit's bot audio store so any number of instances stay in sync, and it drives the <audio> element rendered by BotAudioOutput (used automatically by PipecatAppBase).

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

<BotAudioControl />

BotAudioComponent

The BotAudioComponent is the headless variant. It accepts volume and onVolumeChange directly, so you can drive it from any state source (tests, custom stores, etc.).

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

function Demo() {
  const [volume, setVolume] = React.useState(0.8);
  return (
    <BotAudioComponent
      volume={volume}
      onVolumeChange={setVolume}
    />
  );
}

render(<Demo />);

Adjusting placement

Pass popoverContentProps to override placement defaults:

<BotAudioControl
  popoverContentProps={{
    align: "center",
    side: "top",
    sideOffset: 8,
  }}
/>

Pass popoverProps to control open state (e.g. for a controlled popover):

<BotAudioControl
  popoverProps={{ open, onOpenChange: setOpen }}
/>

Integration

The connected BotAudioControl reads and writes volume through the useBotAudioOutput hook, and uses usePipecatClientTransportState to disable the control while the transport is disconnected or initializing. It must be used within a PipecatClientProvider context (typically provided by PipecatAppBase).

Volume is applied to the <audio> element rendered by BotAudioOutput, which PipecatAppBase mounts automatically unless noAudioOutput is true.

Visual States

The icon inside the trigger button reflects the current volume level (muted, low, medium, high). This is purely cosmetic and does not represent a separate mute state.

Also see

• BotVolumeSlider — the inline slider rendered inside this control's popover, usable standalone.
• useBotAudioOutput for reading or driving the bot volume from anywhere in your app.
• BotAudioPanel — renders a BotAudioControl in its header by default; pass noControls to hide it.