Connect Button

The ConnectButton component provides a button that automatically adapts its appearance and behavior based on the current transport connection state. It handles connect and disconnect actions automatically and supports custom state content configuration.

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

<ConnectButton />

ConnectButtonComponent

The ConnectButtonComponent is a headless variant that accepts transport state as a prop. This allows you to use it with any state management solution.

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

function Demo() {
  return (
    <ConnectButtonComponent 
      transportState="disconnected"
      onConnect={() => console.log("Connecting...")}
    />
  );
}

render(<Demo />);

Usage

Custom State Content

You can customize the button content and appearance for specific states.

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

<ConnectButton
  stateContent={{
    disconnected: {
      children: "Start Session",
      variant: "secondary",
    },
    ready: {
      children: "End Session",
      variant: "destructive",
    },
  }}
/>

Default Behavior

The ConnectButton automatically displays different content based on the transport state:

• disconnected / initialized: "Connect" button with "active" variant
• initializing: "Initializing..." button with "secondary" variant (disabled)
• ready: "Disconnect" button with "destructive" variant
• disconnecting: "Disconnecting..." button with "secondary" variant (disabled)
• error: "Error" button with "destructive" variant
• Other connecting states: "Connecting..." button with "secondary" variant (disabled, loading)

The button is automatically disabled during connecting/disconnecting states and shows a loading indicator.

Integration

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

The component automatically calls onConnect when clicked in disconnected/initialized states and onDisconnect when clicked in ready/connected states.