User Audio Control

The UserAudioControl component provides a comprehensive microphone control interface that includes microphone toggle functionality, device selection, and optional audio visualization. It integrates with the Pipecat Client SDK to automatically manage microphone state and device selection.

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

<UserAudioControl
  isMicEnabled={true}
/>

UserAudioComponent

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

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

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

function Demo() {
  const [isMicEnabled, setIsMicEnabled] = React.useState(false);
  const [selectedMic, setSelectedMic] = React.useState(mockMics[0]);

  return (
    <UserAudioComponent
      isMicEnabled={isMicEnabled}
      onClick={() => setIsMicEnabled(!isMicEnabled)}
      availableMics={mockMics}
      selectedMic={selectedMic}
      updateMic={(deviceId) => {
        const mic = mockMics.find(m => m.deviceId === deviceId);
        if (mic) setSelectedMic(mic);
      }}
      activeText="Listening"
      inactiveText="Click to start"
    />
  );
}

render(<Demo />);

Integration

The connected UserAudioControl component uses several hooks from the Pipecat Client React SDK:

• usePipecatClientMediaDevices for device management
• usePipecatClientTransportState for connection state
• PipecatClientMicToggle for microphone control

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
• Manage microphone enable/disable state
• Show appropriate loading states during connection setup
• Update the Pipecat Client's microphone configuration

Visual States

The component displays different visual states based on the microphone status:

• Inactive: Shows microphone off icon with inactive styling
• Active: Shows microphone on icon with active styling and visualizer
• Loading: Shows loading spinner during connection setup
• Disabled: Shows disabled state when audio is not available

Device Management

The component includes a dropdown menu for device selection that:

• Lists all available microphone devices (unless noMicrophones is true)
• Lists speaker devices (unless noSpeakers is true)
• Groups devices by type (microphones and speakers) with configurable labels
• Shows the currently selected device for each type
• Allows switching between devices
• Can be hidden with the noDevicePicker prop
• Supports custom main dropdown label via dropdownMenuLabel (null to hide)
• Supports custom labels for device sections via microphoneLabel and speakerLabel
• Uses a custom dropdown implementation for enhanced flexibility