--- name: "@pipecat" slug: "pipecat" description: "Components, hooks, visualizers, and composable blocks for Pipecat and voice AI." category: "Forms" tags: ["ai", "audio", "auth", "blocks", "buttons", "forms", "hooks", "media"] framework: "react" license: "BSD-2-Clause" author: "pipecat-ai" website: "https://ui.pipecat.ai" github: "https://github.com/pipecat-ai/pipecat-ui" registry: "https://ui.pipecat.ai/r/registry.json" pro: false pro_url: null github_stars: 2 component_count: 21 generated_at: "2026-09-21T01:50:16.753Z" --- # @pipecat Components, hooks, visualizers, and composable blocks for Pipecat and voice AI. ## Links - Website: https://ui.pipecat.ai - GitHub: https://github.com/pipecat-ai/pipecat-ui - Registry JSON: https://ui.pipecat.ai/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/pipecat - This file: https://sh4dcn.vercel.app/md/pipecat.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://ui.pipecat.ai/r/registry.json pnpm dlx shadcn@latest add https://ui.pipecat.ai/r/registry.json bunx shadcn@latest add https://ui.pipecat.ai/r/registry.json # clone the source repo git clone https://github.com/pipecat-ai/pipecat-ui.git # fetch the raw registry index curl -s https://ui.pipecat.ai/r/registry.json ``` ## Components (21) | name | type | description | install | | --- | --- | --- | --- | | connect-button | registry:component | One button for the whole session lifecycle, driven by the Pipecat transport state. Every state's label, icon, style, and action can be overridden sparsely. | `npx shadcn@latest add https://ui.pipecat.ai/r/connect-button.json` | | audio-visualizer-bar | registry:component | Canvas-2D audio spectrum visualizer with mel-scale bands and the shared visualizer lifecycle states (connecting, silent, speaking, thinking). Headless view for… | `npx shadcn@latest add https://ui.pipecat.ai/r/audio-visualizer-bar.json` | | audio-visualizer-radial | registry:component | Canvas-2D radial audio visualizer: a ring of spokes growing outward with mel-scale voice bands, sharing the kit visualizer lifecycle states (connecting, silent… | `npx shadcn@latest add https://ui.pipecat.ai/r/audio-visualizer-radial.json` | | audio-visualizer-wave | registry:component | Shader aura audio visualizer with optional dithering: swirling ribbons of turbulent light that animate between the shared visualizer lifecycle states (connecti… | `npx shadcn@latest add https://ui.pipecat.ai/r/audio-visualizer-wave.json` | | device-select | registry:component | Media device picker for microphones, speakers, or cameras — as a select or a dropdown menu around any trigger. | `npx shadcn@latest add https://ui.pipecat.ai/r/device-select.json` | | user-audio-control | registry:component | Microphone control with toggle and push-to-talk modes, live audio visualizer, and a mic/speaker device picker in a split-button dropdown. | `npx shadcn@latest add https://ui.pipecat.ai/r/user-audio-control.json` | | user-video-control | registry:component | Camera toggle with preview tile and camera picker in a split-button dropdown. | `npx shadcn@latest add https://ui.pipecat.ai/r/user-video-control.json` | | user-screen-control | registry:component | Screen-share toggle with a preview tile while sharing. | `npx shadcn@latest add https://ui.pipecat.ai/r/user-screen-control.json` | | bot-audio | registry:component | Bot audio output element with a shared volume store, mute toggle, horizontal or vertical volume slider, and a popover volume control. | `npx shadcn@latest add https://ui.pipecat.ai/r/bot-audio.json` | | conversation | registry:component | Live scrolling transcript of the user/agent conversation with role labels, karaoke text rendering, function-call cards, and connection-aware empty states. | `npx shadcn@latest add https://ui.pipecat.ai/r/conversation.json` | | text-input | registry:component | Message composer with inline send button that injects the message into the conversation and sends it to the bot. | `npx shadcn@latest add https://ui.pipecat.ai/r/text-input.json` | | transcript-overlay | registry:component | Caption-style overlay for bot speech with word-by-word fade-in and turn-end fade-out. | `npx shadcn@latest add https://ui.pipecat.ai/r/transcript-overlay.json` | | client-status | registry:component | Client and agent connection status rows, live-updated from transport state and bot lifecycle events. | `npx shadcn@latest add https://ui.pipecat.ai/r/client-status.json` | | session-info | registry:component | Session metadata rows: transport type, copyable ids, RTVI client/server versions. | `npx shadcn@latest add https://ui.pipecat.ai/r/session-info.json` | | dtmf-keypad | registry:component | Telephone keypad that sends DTMF tones — buffered sequence entry or immediate per-key dialing, with synthesized press feedback. | `npx shadcn@latest add https://ui.pipecat.ai/r/dtmf-keypad.json` | | use-pipecat-app | registry:hook | Client bootstrap hook with an explicit transport factory, connect/disconnect lifecycle, startBot handling and error state. | `npx shadcn@latest add https://ui.pipecat.ai/r/use-pipecat-app.json` | | use-pipecat-metrics | registry:hook | Shared store of RTVI metrics: per-processor ttfb/ttfa/processing/characters/stt_usage series with a rolling cap, running token totals (incl. cache-read and rea… | `npx shadcn@latest add https://ui.pipecat.ai/r/use-pipecat-metrics.json` | | use-pipecat-event-stream | registry:hook | Shared RTVI event log: rAF-batched capture with a rolling cap, pause, clear-on-reconnect, and per-subscriber filtering and grouping. | `npx shadcn@latest add https://ui.pipecat.ai/r/use-pipecat-event-stream.json` | | metric | registry:component | Single-datapoint metric tile — label, big tabular value, optional unit — fully generic and props-driven, chart-free by design. | `npx shadcn@latest add https://ui.pipecat.ai/r/metric.json` | | metrics | registry:block | Metrics dashboard block with a Performance/Usage tab navigator: per-processor latency tiles and charts, plus running token/character/audio usage totals, on the… | `npx shadcn@latest add https://ui.pipecat.ai/r/metrics.json` | | console | registry:block | Workbench for debugging and testing Pipecat agents: connect flow, bot media, conversation and metrics, device and session info, and a live RTVI event stream, w… | `npx shadcn@latest add https://ui.pipecat.ai/r/console.json` | ## For AI agents ```text You are adding components from @pipecat to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/pipecat.md) for the component list. 2. Fetch the machine-readable index: https://ui.pipecat.ai/r/registry.json 3. Install a single component with its install command from the table above. 4. Full structured record: https://sh4dcn.vercel.app/json (library slug: pipecat). ```