Components, hooks and template apps for building React voice AI applications quickly. Designed to support and accelerate Pipecat AI development.

• 🔬 Debug console – Flexible, modular console UI to test and benchmark your Pipecat apps

• 🔌 Components – Construct your own UIs with building blocks for voice, video, and real-time AI interactions

• 🚀 Drop-in templates – Fully-featured, configurable UIs for developing and showcasing Pipecat apps

• 💅 Fully customizable – Built on Tailwind 4 and styled with CSS variables. Extend the built-in theme or bring your own

• 📱 Responsive design – Optimized for desktop, tablet, and mobile devices

• ⭐ Example apps – Real-world implementations demonstrating best practices

npm i @pipecat-ai/voice-ui-kit @pipecat-ai/client-js @pipecat-ai/client-react

You will also have to install one of the supported transport packages

npm i @pipecat-ai/daily-transport # or npm i @pipecat-ai/small-webrtc-transport

Optional - install recommended fonts for default theme:

npm i @fontsource-variable/geist @fontsource-variable/geist-mono

Install and build workspace dependencies:

pnpm i pnpm build

Launch the Storybook:

pnpm run dev

Install and build workspace dependencies:

pnpm i pnpm build

Navigate to example directory to run the example:

cd examples/01-console pnpm i pnpm dev

// Optional: recommended fonts import '@fontsource-variable/geist'; import '@fontsource-variable/geist-mono'; // Styles import '@pipecat-ai/voice-ui-kit/styles'; import { ConsoleTemplate, ThemeProvider } from '@pipecat-ai/voice-ui-kit'; // Render Console template in full screen container export default function App() { return ( <ThemeProvider> <div className="w-full h-dvh bg-background"> <ConsoleTemplate transportType="smallwebrtc" connectParams={{ webrtcUrl: '/api/offer', }} />  </div> </ThemeProvider> ); }

import { ConnectButton, ControlBar, ErrorCard, FullScreenContainer, PipecatAppBase, SpinLoader, VoiceVisualizer, UserAudioControl type PipecatBaseChildProps, } from "@pipecat-ai/voice-ui-kit"; export default function Home() { return ( <FullScreenContainer> <PipecatAppBase transportType="smallwebrtc" connectParams={{ webrtcUrl: "/api/offer", }} > {({ client: handleConnect, handleDisconnect, error, }: PipecatBaseChildProps) => loading ? ( <SpinLoader /> ) : error ? ( <ErrorCard error={error} /> ) : ( <> <VoiceVisualizer participantType="bot" /> <ControlBar> <UserAudioControl /> <ConnectButton onConnect={handleConnect} onDisconnect={handleDisconnect} /> </ControlBar> </> ) } </PipecatAppBase> </FullScreenContainer> ); }

📓 Documentation

Examples:

• Console Template
• Custom UI with components
• Tailwind
• Vite

This project uses Conventional Commits enforced by Husky + commitlint, and Release Please for automated releases. See AGENTS.md for the full development workflow, commit guidelines, and release process.