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

<DeviceSelect
  placeholder="Select input device"
  guide="Microphone"
/>

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 />);

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