Introduction

Pipecat UI is a set of voice AI components — connect buttons, microphone and camera controls, device pickers, live transcripts, visualizers — for building Pipecat client apps.

Unlike a component library on npm, the kit is a shadcn registry:

• Components are copied into your project as source with npx shadcn add @pipecat/... — no package to version-match, no wrapper props to fight. The code is yours to edit.
• They compose stock shadcn/ui primitives (base-nova, Base UI primitives) that install automatically as dependencies — the kit ships no primitives of its own.
• Styling comes from your theme. Components use your existing shadcn tokens, plus two small semantic groups (active/inactive, agent/client) that merge into your CSS on install. See Theming.
• The engine underneath is @pipecat-ai/client-js and @pipecat-ai/client-react, installed from npm — the same relationship shadcn/ui has with Base UI.

Two layers per component

Every component file exports a connected component that wires itself to the Pipecat client from context, and a props-driven *View for when you manage state yourself:

// Connected: reads transport state from PipecatClientProvider
<ConnectButton />

// View: fully controlled, no provider needed
<ConnectButtonView transportState="ready" onDisconnect={stop} />

Next steps