 [](https://voiceuikit.pipecat.ai)
npm install @sensweii/pipecat-ui
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
``shell`
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_
`shell`
npm i @pipecat-ai/daily-transportor
npm i @pipecat-ai/small-webrtc-transport
_Optional - install recommended fonts for default theme_:
`shell`
npm i @fontsource-variable/geist @fontsource-variable/geist-mono
`bash`
npm run dev
Install workspace dependencies:
`bash`
npm i
Navigate to example directory:
`bash`
cd examples/01-console
npm i
npm run dev
`typescript
// 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 (
connectParams={{
webrtcUrl: "/api/offer",
}}
/>
);
}
`
`tsx
import {
ConnectButton,
ControlBar,
ErrorCard,
FullScreenContainer,
PipecatAppBase,
SpinLoader,
VoiceVisualizer,
UserAudioControl
type PipecatBaseChildProps,
} from "@pipecat-ai/voice-ui-kit";
export default function Home() {
return (
connectParams={{
webrtcUrl: "/api/offer",
}}
>
{({
client:
handleConnect,
handleDisconnect,
error,
}: PipecatBaseChildProps) =>
loading ? (
) : error ? (
) : (
<>
onDisconnect={handleDisconnect} />
>
)
}
);
}
``
š Documentation
Examples:
- Console Template
- Custom UI with components
- Tailwind
- Vite