Pipecat UI

Customizable React components for voice AI interfaces, installed as source through the Pipecat UI shadcn registry.

Pipecat UI is a shadcn registry of React components for building voice AI interfaces with Pipecat. Components install as source into your project so you can edit them and style them with your own theme.

Pipecat UI replaces Voice UI Kit. Use the shadcn registry for new projects; the previous @pipecat-ai/voice-ui-kit npm package uses a different API.

Features

• Microphone, camera, screenshare, and connection controls
• Live transcripts and audio visualizers
• Connected components built on the Pipecat React SDK, with props-driven *View variants
• Source files you can customize directly

Getting Started

Start with Node.js 22+, React 19, Tailwind CSS 4, and a shadcn/ui project using the base-nova style. See the Pipecat UI documentation for setup details.

Add the Pipecat registry:

npm

npx shadcn@latest registry add @pipecat

Then add components:

npm

npx shadcn@latest add @pipecat/user-audio-control @pipecat/conversation

Connected components need a PipecatClientProvider. Install your chosen transport separately.

Resources

GitHub Repository

Source code, documentation, and examples.

Documentation

Setup, component previews, and examples.