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
• useMediaState for loading and error states
• 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 and error states based on device availability
• Keep the device picker accessible across connect/disconnect cycles once microphone permission is granted
• 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 device initialization
• Unavailable: Shows disabled state with specific error messages (e.g., "Microphone blocked", "Microphone in use", "No microphone")
• Disabled: Shows disabled state when audio is deliberately disabled via noAudio

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