Quickstart
Get started with the Voice UI Kit
The Voice UI Kit is a collection of components, hooks and templates for building voice AI applications quickly.
- Designed to be used alongside the Pipecat Client SDK or standalone via headless components.
- Minimal dependencies, no framework-specific code.
- Built on Tailwind 4 and Shadcn primitives.
- Intended to be used alongside a developer's own visual design system.
Quickstart
Install the library:
npm install @pipecat-ai/voice-ui-kitFor usage with Pipecat:
npm install @pipecat-ai/client-js @pipecat-ai/client-reactAnd finally, your chosen transport package:
npm install @pipecat-ai/small-webrtc-transport
# or
npm install @pipecat-ai/daily-transportTemplates
Templates are fully-featured, configurable UIs for developing for Pipecat.
They're built and composed from the core components and primitives, and are designed to be used as-is or as a starting point for your own custom UI.
import { ThemeProvider, ConsoleTemplate } from "@pipecat-ai/voice-ui-kit";
export default function Home() {
return (
<ThemeProvider>
<ConsoleTemplate
transportType="smallwebrtc"
connectParams={{
webrtcUrl: "/api/offer",
}}
noUserVideo={true}
/>
</ThemeProvider>
);
}Learn more about the Console template in the Console template section.
Components
Components are the building blocks of the Voice UI Kit. They exist in both connected (Pipecat) and headless variants.
import {
PipecatAppBase,
ErrorCard,
SpinLoader,
Card,
CardContent,
Divider,
UserAudioControl,
ConnectButton,
VoiceVisualizer,
type PipecatBaseChildProps,
} from "@pipecat-ai/voice-ui-kit";
<PipecatAppBase
connectParams={{
webrtcUrl: "/api/offer",
}}
transportType="smallwebrtc"
noThemeProvider
>
{({ client, handleConnect, handleDisconnect,error }: PipecatBaseChildProps) =>
!client ? (
<SpinLoader />
) : error ? (
<ErrorCard>{error}</ErrorCard>
) : (
<Card
size="lg"
shadow="xlong"
noGradientBorder={false}
rounded="xl"
>
<CardContent className="flex flex-col gap-4">
<VoiceVisualizer
participantType="bot"
className="bg-accent rounded-lg"
/>
<Divider />
<div className="flex flex-col gap-4">
<UserAudioControl size="lg" />
<ConnectButton
size="lg"
onConnect={handleConnect}
onDisconnect={handleDisconnect}
/>
</div>
</CardContent>
</Card>
)
}
</PipecatAppBase>Learn more about components in the Components section.
Registry
Components are also available via the Shadcn CLI in the Shadcn registry.
This is useful for when you want component code in your own project, to extend and customize however you wish.
Registry work is currently in progress