usePipecatConnectionState

Overview

usePipecatConnectionState derives a simplified connection state from Pipecat transport, mapping to disconnected, connecting, and connected.

This hook is designed to simplify UI state management for controls that only need to know the connectivity status.

Usage

What is the difference from usePipecatClientTransportState

usePipecatClientTransportState returns the full transport state, useful when you need to know the exact state of the transport:

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

const transportState = usePipecatClientTransportState();

// "disconnected", "initializing", "initialized", "authenticating", "authenticated", "connecting", "connected", "ready", "disconnecting"

See: usePipecatClientTransportState.

usePipecatConnectionState returns a simplified connection state that is useful for UI controls:

Basic

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

export function ConnectButton() {
  const { isConnected, isConnecting } = usePipecatConnectionState();
  
  return (
    <button
      disabled={!isConnected}
      onClick={handleConnect}
    >
      {isConnected ? "Connected" :
       isConnecting ? "Connecting..." : "Connect"}
    </button>
  );
}

With loading states

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

export function ConnectionStatus() {
  const { state, isConnected, isConnecting, isDisconnected } = usePipecatConnectionState();
  
  return (
    <div>
      <div className={`status-indicator ${state}`}>
        {isConnected && "✓ Connected"}
        {isConnecting && "⟳ Connecting..."}
        {isDisconnected && "✗ Disconnected"}
      </div>
    </div>
  );
}

Full example with conditional rendering

import React from "react";
import { usePipecatConnectionState } from "@pipecat-ai/voice-ui-kit";

export function ConnectionControls() {
  const { isConnected, isConnecting, isDisconnected } = usePipecatConnectionState();
  
  const getButtonText = () => {
    if (isConnected) return "Disconnect";
    if (isConnecting) return "Connecting...";
    return "Connect";
  };
  
  const getStatusColor = () => {
    if (isConnected) return "green";
    if (isConnecting) return "yellow";
    return "red";
  };
  
  return (
    <div className="connection-controls">
      <div className={`status-led ${getStatusColor()}`} />
      <button
        disabled={isConnecting}
        onClick={isConnected ? handleDisconnect : handleConnect}
      >
        {getButtonText()}
      </button>
      
      {isConnecting && (
        <div className="loading-spinner" />
      )}
    </div>
  );
}

API

Return

Prop	Type	Default
`state`	`PipecatConnectionState`	-
`isConnected`	`boolean`	-
`isConnecting`	`boolean`	-
`isDisconnected`	`boolean`	-

Types

Prop	Type	Default
`PipecatConnectionState`	`"disconnected" \| "connecting" \| "connected"`	-
`PipecatConnectionStateResult`	`object`	-

usePipecatConnectionState

On this page