Pipecat UI
Components

Client Status

Client and agent connection status rows, live-updated from transport and bot events.

Open in Storybook

disconnected
disconnected
connecting
connecting
connected
connected
ready
ready
error
error

Installation

pnpm dlx shadcn@latest add @pipecat/client-status

Usage

import { ClientStatus } from "@/components/pipecat/client-status";

<ClientStatus />;

Shows two rows: the client's transport state and the agent's lifecycle state (derived from BotConnected / BotReady / BotDisconnected events). Connected states render in the active token color, errors in destructive, transitional states pulse.

Key props

PropTypeDescription
noClientState / noAgentStatebooleanHide a row

ClientStatusValue is exported standalone for rendering a single status value anywhere.

On this page