Device Drop Down

The DeviceDropDown component provides a dropdown menu interface for selecting and managing microphone input devices in your voice application.

Component derives from the Shadcn Dropdown Menu.

import { Button, DeviceDropDown } from "@pipecat-ai/voice-ui-kit";

<DeviceDropDown>
  <Button variant="outline">Select Device</Button>
</DeviceDropDown>

DeviceDropDownComponent

The DeviceDropDownComponent 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 { DeviceDropDownComponent, Button } from "@pipecat-ai/voice-ui-kit";

// Example with mock data
const mockDevices = [
  { deviceId: "mic1", label: "Built-in Microphone" },
  { deviceId: "mic2", label: "External USB Mic" },
];

function Demo() {
  return (
    <DeviceDropDownComponent
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
      menuLabel="Select Microphone"
    >
      <Button variant="outline">Choose Device</Button>
    </DeviceDropDownComponent>
  );
}

render(<Demo />);

Integration

The connected DeviceDropDown component uses the usePipecatClientMediaDevices hook from the Pipecat Client React SDK. This means it must be used within a PipecatClientProvider context to function properly.

The component will automatically:

• Fetch available microphone devices
• Display the currently selected microphone
• Handle device selection changes
• Update the Pipecat Client's microphone configuration