Device Select

The DeviceSelect component provides a user interface for selecting and managing microphone input devices in your voice application. It integrates with the Pipecat Client SDK to automatically detect available microphones and allow users to switch between them.

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

<DeviceSelectComponent
  placeholder="Select input device"
  guide="Microphone"
  availableDevices={[
    {deviceId: "microphone1", label: "Microphone 1"},
    {deviceId: "microphone2", label: "Microphone 2"},
  ]}
  selectedDevice={null}
  updateDevice={(deviceId) => console.log("Selected:", deviceId)}
/>

Component Variants

DeviceSelect

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

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

<DeviceSelect />

DeviceSelectComponent

The DeviceSelectComponent 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 { DeviceSelectComponent } 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 (
  <DeviceSelectComponent
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
    />
  );
}

render(<Demo />);

Usage

Basic Usage

The DeviceSelect component automatically detects available microphone devices and provides a dropdown interface for selection.

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

<DeviceSelect />

Custom Placeholder

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

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

<DeviceSelect placeholder="Choose your microphone" />

Guide Content

You can add guide content to the select trigger for additional context.

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

<DeviceSelect
  guide="Microphone"
  placeholder="Please select"
/>

Custom Styling

Pass class names to target child components to customize the styling.

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

<DeviceSelect
  classNames={{
    selectTrigger: "border-2 border-primary",
    selectContent: "border-2 border-primary shadow-xlong",
    selectItem: "font-mono text-xs uppercase",
  }}
/>

Features

• Automatic Device Detection: Automatically discovers available microphone devices on the user's system
• Real-time Updates: Updates the available devices list when devices are connected or disconnected
• Accessible: Includes proper ARIA labels and keyboard navigation
• Responsive: Adapts to different screen sizes and container widths
• Theme Support: Integrates with the Voice UI Kit theming system
• Flexible: Available in both connected and headless variants

Integration

The connected DeviceSelect 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

Device Information

The component displays device information in the following format:

• If a device has a label, it will be displayed as-is
• If no label is available, it will show "Device" followed by the first 5 characters of the device ID
• Empty or invalid device IDs are handled gracefully