User Audio Output Control

The UserAudioOutputControl component provides a user interface for selecting and managing audio output devices in your voice application. When using the connected variant, it integrates with the Pipecat Client SDK to automatically detect available speakers and allow users to switch between them.

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

<UserAudioOutputControlComponent
  availableDevices={[
    {deviceId: "speaker1", label: "Speaker 1"},
    {deviceId: "speaker2", label: "Speaker 2"},
  ]}
  selectedDevice={null}
  updateDevice={(deviceId) => console.log("Selected:", deviceId)}
/>

Component Variants

UserAudioOutputControl

The UserAudioOutputControl component is the connected variant that automatically integrates with the Pipecat Client SDK. It must be used within a PipecatClientProvider context.

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

<UserAudioOutputControl />

Prop	Type	Default
`label?`	`string`	`"Audio Output"`
`placeholder?`	`string`	`"Select a speaker"`
`guide?`	`React.ReactNode`	`undefined`
`classNames?`	`{ selectTrigger?: string; selectContent?: string; selectItem?: string; }`	`undefined`
`selectProps?`	`SelectProps`	`undefined`
`contentProps?`	`SelectContentProps`	`undefined`
`className?`	`string`	`undefined`

UserAudioOutputControlComponent

The UserAudioOutputControlComponent is the headless variant that accepts all device data and callbacks as props. This allows you to use it with any framework or state management solution.

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

const mockDevices = [
  { deviceId: "speaker1", label: "Built-in Speakers" },
  { deviceId: "speaker2", label: "External Headphones" },
];

function Demo() {
  const [selectedDevice, setSelectedDevice] = React.useState(null);
  
  return(
    <UserAudioOutputControlComponent
      availableDevices={mockDevices}
    />
  );
}

render(<Demo />);

Prop	Type	Default
`label?`	`string`	`"Audio Output"`
`placeholder?`	`string`	`"Select a speaker"`
`guide?`	`React.ReactNode`	`undefined`
`availableDevices?`	`MediaDeviceInfo[]`	`undefined`
`selectedDevice?`	`OptionalMediaDeviceInfo`	`undefined`
`updateDevice?`	`(deviceId: string) => void`	`undefined`
`classNames?`	`{ selectTrigger?: string; selectContent?: string; selectItem?: string; }`	`undefined`
`selectProps?`	`SelectProps`	`undefined`
`contentProps?`	`SelectContentProps`	`undefined`
`className?`	`string`	`undefined`

Usage

Custom Label

You can customize the label text displayed next to the select input.

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

<UserAudioOutputControlComponent label="Speaker Selection" />

Custom Placeholder

You can customize the placeholder text shown in the select input.

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

<UserAudioOutputControlComponent placeholder="Choose your audio output" />

Select Variant

You can customize both the label and placeholder text together.

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

<UserAudioOutputControlComponent
  label="Output Device" 
  placeholder="Select your preferred speaker"
  variant="outline"
/>

With Custom Styling

You can apply custom CSS classes to different parts of the component using the classNames prop.

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

<UserAudioOutputControlComponent
  availableDevices={[
    {deviceId: "speaker1", label: "Speaker 1"},
    {deviceId: "speaker2", label: "Speaker 2"},
  ]}
  classNames={{
    selectTrigger: "text-xs uppercase shadow-short border-2 border-border",
    selectContent: "text-xs font-mono uppercase border-2 shadow-xlong bg-accent",
    selectItem: "text-zinc-500 focus:bg-black focus:text-white"
  }}
/>

User Audio Output Control

On this page