Pipecat UI

Overview

Pipecat UI is the UI layer for voice agents built on Pipecat's real-time platform. It is a shadcn registry of components, hooks, visualizers and blocks covering mic and camera controls, live transcripts with karaoke-style text, voice-tuned audio visualizers and session state, all already wired to the Pipecat client. It is a shadcn rebuild of the Voice UI Kit, which it replaces along with the earlier npm package distribution, and is currently in v1 beta.

Every component ships two layers in one file: a connected export wired to the Pipecat client and a props-driven *View export for custom state management. Components are styled by the project's theme through a small semantic token set.

Features

• Session controls: A connect button driven by transport state, mic control with push-to-talk, camera and screen-share toggles, device pickers and a DTMF keypad.
• Audio visualizers: Canvas bar and radial renderers plus a WebGL wave renderer sharing a mel-band core.
• Duplex timeline: Both sides of the conversation with handoffs, reply latency, backchannels and interruptions.
• Conversation UI: A live scrolling transcript, message composer and caption-style overlay for bot speech.
• Session insight: Client and agent status rows, session metadata and bot audio output with shared volume.
• Bootstrap hook: use-pipecat-app builds the client and owns the connect lifecycle using a supplied transport.
• Blocks: A debugging console and a metrics dashboard composed from the components.

Tech stack

• React 19, Tailwind CSS 4, Node.js 22+
• shadcn/ui base-nova style (Base UI primitives)
• Pipecat client JS and React SDKs, Zustand, Recharts

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @pipecat/component-name