Pipecat UI

Important

Pipecat UI is a shadcn rebuild of the Voice UI Kit repository, which will soon be deprecated. Components now install as source through the shadcn CLI, replacing the previous npm package distribution (≤0.13.x).

The UI layer for voice agents. Pipecat UI is a shadcn registry of components for building on Pipecat's real-time platform — mic and camera controls, live transcripts with karaoke text, voice-tuned audio visualizers, session state, and more, already wired to the client. Components install as source into your project, styled by your theme and yours to edit.

What's inside

• 🎛️ Session controls — connect button driven by transport state, mic control with push-to-talk and a live visualizer, camera and screen-share toggles with preview tiles, device pickers, DTMF keypad
• 📈 Audio visualizers — canvas bar and radial renderers plus a WebGL wave renderer sharing a voice-tuned mel-band core
• 💬 Conversation UI — live scrolling transcript with roles and karaoke text, message composer, caption-style overlay for bot speech
• 🔍 Session insight — client/agent status rows, session metadata, bot audio output with a shared volume store
• 🪝 Bootstrap hook — use-pipecat-app builds the client and owns the connect lifecycle, using the transport factory you supply
• 🧱 Blocks — a metrics dashboard composed from the components; the console remains a local development preview and is not published in the registry
• 🎨 Your theme, your code — stock Base UI primitives, data-state attributes on everything, a tiny semantic token set you can restyle

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.

Prerequisites

• Node.js 22+
• React 19
• Tailwind CSS 4
• shadcn/ui — base-nova style (Base UI primitives)

Note

Everything else — shadcn primitives, the Pipecat client SDKs, npm deps — installs automatically with each component. The only optional install is a @pipecat-ai/*-transport package for connecting (see transports).

Installation

1. Register the @pipecat namespace in your components.json:

{
  "registries": {
    "@pipecat": "https://ui.pipecat.ai/r/{name}.json",
  },
}

2. Add components:

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

Files land in components/pipecat/, dependencies install, and any component theme tokens merge into your globals.css.

3. Wrap your app in a PipecatClientProvider (docs) — every component works under a bare provider. Or let the kit do it:

"use client";

import { PipecatClientProvider } from "@pipecat-ai/client-react";
import { SmallWebRTCTransport } from "@pipecat-ai/small-webrtc-transport";

import { ConnectButton } from "@/components/pipecat/connect-button";
import { Conversation } from "@/components/pipecat/conversation";
import { UserAudioControl } from "@/components/pipecat/user-audio-control";
import { usePipecatApp } from "@/hooks/use-pipecat-app";

export default function VoiceApp() {
  const { client, connect, disconnect } = usePipecatApp({
    transportFactory: () => new SmallWebRTCTransport(),
    connectParams: { endpoint: "/api/start" },
  });

  if (!client) return null;

  return (
    <PipecatClientProvider client={client}>
      <Conversation />
      <UserAudioControl />
      <ConnectButton onConnect={connect} onDisconnect={disconnect} />
    </PipecatClientProvider>
  );
}

Pipecat — connected, or optional

The connected exports read the Pipecat client from context, so they need a PipecatClientProvider. But every component also exports a *View variant (UserAudioControlView, ConversationView, …) that is pure props-driven UI — no provider, no connection, no side effects. Drive the views from mocks, tests, recorded sessions, or a non-Pipecat backend entirely.

The client SDKs (@pipecat-ai/client-js, @pipecat-ai/client-react) install automatically with each component. Transport packages stay optional — they are imported by your app and passed as transportFactory, so install only the one your app actually connects with:

Transport	Package
SmallWebRTC (default)	@pipecat-ai/small-webrtc-transport
Daily	@pipecat-ai/daily-transport
WebSocket	@pipecat-ai/websocket-transport
MoQ	@pipecat-ai/moq-transport

For lazy loading, pass an async factory that imports the selected package, or register an app-owned loader with registerTransport. The shipped helper does not import unused transports, so they do not need to be installed to build.

Theme tokens

Components rely on your shadcn theme. Registry cssVars add these semantic tokens, which you can restyle:

Token	Purpose
--active-background	Active media state color.
--active-foreground	Text and icons on active backgrounds.
--inactive-background	Inactive media state color.
--inactive-foreground	Text and icons on inactive backgrounds.
--agent-background	Tinted agent surfaces.
--agent-foreground	Agent role labels, text and icons.
--client-background	Tinted user surfaces.
--client-foreground	User role labels, text and icons.

Conversation role labels use the foreground tokens. For custom role surfaces, pair bg-agent text-agent-foreground or bg-client text-client-foreground.

Documentation

• Component docs — live previews, configurable examples, and installation for every item
• Storybook — every component and state in isolation; run locally with pnpm dev
• Pipecat client SDK — the provider, hooks, and transports the kit builds on
• Pipecat — build the agent on the other side of the conversation

Contributing

The monorepo contains the registry and three apps:

• packages/registry — the product: registry.json + source under src/components/, shared modules in src/lib/, hooks in src/hooks/, vitest suites in tests/
• apps/docs — Fumadocs site: component docs with live previews, serves the registry at /r/{name}.json
• apps/storybook — Storybook 10 dev host set up as a real Base UI shadcn consumer; also hosts the vitest run
• apps/example — client-only reference app with installed component copies

pnpm install
pnpm dev        # storybook :6006, docs :3600, example :3700
pnpm build      # registry, docs, storybook and example
pnpm registry:check # manifest, dependencies, source and coverage checks
pnpm typecheck && pnpm lint && pnpm test

To add a registry item:

1. Create packages/registry/src/components/<name>.tsx with a co-located <name>.stories.tsx
2. Add a test in packages/registry/tests/<name>.test.tsx
3. Add the item's manifest entry to packages/registry/registry.json
4. Run node apps/docs/scripts/sync-registry.mjs, then pnpm typecheck && pnpm lint && pnpm test

Built with

Base UI · Tailwind CSS v4 · TypeScript · shadcn CLI · Fumadocs · Storybook 10 · Vitest · Turborepo

Community & support

• 💬 Discord — chat with the Pipecat team and community
• 🐛 GitHub issues — bugs and feature requests