Voice UI Kit

https://voiceuikit.pipecat.ai
Admin
The Voice UI Kit is a collection of components, hooks, and templates designed for quickly building...
Tokens:46,256
Snippets:285
Trust Score:7.5
Update:11 months ago
Show doc for...
Tokens:
Raw
### UserVideoComponent: Basic Camera Control Setup

Source: https://voiceuikit.pipecat.ai/components/UserVideoControl

This example demonstrates a basic setup of the UserVideoComponent, showing how to provide available cameras and handle the camera selection and toggle logic via props. It logs actions to the console for demonstration purposes.

```jsx
import { UserVideoComponent } from "@pipecat-ai/voice-ui-kit";

<UserVideoComponent
  onClick={() => console.log("Toggle camera")}
  availableCams={[
    {deviceId: "cam1", label: "Built-in Camera"},
    {deviceId: "cam2", label: "External USB Camera"},
  ]}
  selectedCam={{deviceId: "cam1", label: "Built-in Camera"}}
  updateCam={(deviceId) => console.log("Selected:", deviceId)}
  isCamEnabled={true}
/>
```

--------------------------------

### DeviceDropDownComponent Initial Configuration

Source: https://voiceuikit.pipecat.ai/components/DeviceDropDown

Shows the initial setup of the `DeviceDropDownComponent` with specific available devices and a selected device. This example highlights the core props required for device selection functionality.

```javascript
import { Button, DeviceDropDownComponent } from "@pipecat-ai/voice-ui-kit";

<DeviceDropDownComponent
  availableDevices={[
    {deviceId: "microphone1", label: "Microphone Device"},
    {deviceId: "microphone2", label: "Another Microphone Device"},
  ]}
  selectedDevice={{deviceId: "microphone1", label: "Microphone 1"}}
  updateDevice={(deviceId) => console.log("Selected:", deviceId)}
>
  <Button variant="outline">Select Device</Button>
</DeviceDropDownComponent>
```

--------------------------------

### Install Pipecat Client SDK

Source: https://voiceuikit.pipecat.ai/index

Installs the necessary packages for using the Voice UI Kit with the Pipecat Client SDK. This includes the main client and React bindings.

```bash
npm install @pipecat-ai/client-js @pipecat-ai/client-react
```

--------------------------------

### Install Voice UI Kit

Source: https://voiceuikit.pipecat.ai/index

Installs the core Voice UI Kit library using npm. This is the first step to integrating the kit into your project.

```bash
npm install @pipecat-ai/voice-ui-kit
```

--------------------------------

### LED Component Sizing Example

Source: https://voiceuikit.pipecat.ai/primitives/led

Illustrates how to control the size of the LED component using Tailwind's `size-*` utilities applied via the `className` prop. It shows examples of small, default, and larger sizes.

```javascript
import { LED } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-6 w-full justify-center items-center">
    <LED className="size-3" />
    <LED />
    <LED className="size-6" />
    <LED className="size-10" />
</div>
```

--------------------------------

### LED Component Basic States Example

Source: https://voiceuikit.pipecat.ai/primitives/led

Illustrates different basic states of the LED component, including off, on, blinking, and both on and blinking. This example utilizes flexbox for layout and gap utilities for spacing.

```javascript
import { LED } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-4 w-full justify-center items-center">
    <LED />
    <LED on />
    <LED blinking />
    <LED on blinking />
</div>
```

--------------------------------

### DeviceSelect with Guide Content

Source: https://voiceuikit.pipecat.ai/components/DeviceSelect

Demonstrates adding guide content to the DeviceSelect component's trigger. This is useful for providing additional context or instructions to the user alongside the device selection prompt.

```javascript
import { DeviceSelect } from "@pipecat-ai/voice-ui-kit";

<DeviceSelect
  guide="Microphone"
  placeholder="Please select"
/>
```

--------------------------------

### Install Three.js for Plasma Visualizer

Source: https://voiceuikit.pipecat.ai/visualizers/plasma-visualizer

The PlasmaVisualizer component relies on WebGL and Three.js. This snippet shows how to install Three.js using npm, yarn, or pnpm as a project dependency.

```bash
npm install three
# or
yarn add three
# or
pnpm add three
```

--------------------------------

### Install WebRTC Transport Package

Source: https://voiceuikit.pipecat.ai/index

Installs a transport package for real-time communication. Choose between `@pipecat-ai/small-webrtc-transport` or `@pipecat-ai/daily-transport` based on your needs.

```bash
npm install @pipecat-ai/small-webrtc-transport 
# or
npm install @pipecat-ai/daily-transport
```

--------------------------------

### Multiple Transcript Overlays Example (React)

Source: https://voiceuikit.pipecat.ai/components/TranscriptOverlay

Shows how to render multiple TranscriptOverlay components simultaneously to display both bot and user speech transcripts side-by-side. This setup requires the components to be within a PipecatClientProvider context.

```jsx
import { TranscriptOverlay } from "@pipecat-ai/voice-ui-kit";

<div className="space-y-4">
  <div>
    <h4 className="text-sm font-medium mb-2">Bot Speech</h4>
    <TranscriptOverlay participant="remote" />
  </div>
  <div>
    <h4 className="text-sm font-medium mb-2">User Speech</h4>
    <TranscriptOverlay participant="local" />
  </div>
</div>
```

--------------------------------

### Basic Panel Implementation in React

Source: https://voiceuikit.pipecat.ai/primitives/panel

Demonstrates the fundamental structure of a Panel component, including its header and content areas. This basic setup is useful for general-purpose layout containers.

```jsx
import { Panel, PanelHeader, PanelTitle, PanelContent } from "@pipecat-ai/voice-ui-kit";

<Panel className="w-full">
  <PanelHeader>
    <PanelTitle>Hello world</PanelTitle>
  </PanelHeader>
  <PanelContent>
    My Panel
  </PanelContent>
</Panel>
```

--------------------------------

### Scoped UI Kit Styling Example

Source: https://voiceuikit.pipecat.ai/styling

Provides an HTML example demonstrating the effect of scoped styles in Voice UI Kit. Elements with the 'vkui:flex' class inside a '.vkui-root' div are correctly styled, while those outside are not, highlighting the isolation provided by scoped CSS.

```html
<div class="vkui-root">
  <span class="vkui:flex">✅ Scoped correctly</span>
</div>

<div>
  <span class="vkui:flex">❌ Not scoped</span>
</div>
```

--------------------------------

### Select Component with Guide Element (React)

Source: https://voiceuikit.pipecat.ai/primitives/select

Shows how to integrate a guide element within the Select component's trigger. This enhances usability by providing context or a label directly within the trigger area, alongside the placeholder. It uses SelectGuide in addition to other Select components.

```javascript
import { Select, SelectTrigger, SelectGuide, SelectValue, SelectContent, SelectItem } from "@pipecat-ai/voice-ui-kit";

<Select>
  <SelectTrigger>
    <SelectGuide>Select</SelectGuide>
    <SelectValue placeholder="Please select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="item-1">Select Item 1</SelectItem>
    <SelectItem value="item-2">Select Item 2</SelectItem>
    <SelectItem value="item-3">Select Item 3</SelectItem>
  </SelectContent>
</Select>
```

--------------------------------

### LED Component Styling with Classes

Source: https://voiceuikit.pipecat.ai/primitives/led

Shows how to apply custom styling to the LED component using the `className` prop. This example adds a rounded-full class to all LED instances, demonstrating consistent styling application.

```javascript
import { LED } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-4 w-full justify-center items-center">
    <LED className="rounded-full" />
    <LED className="rounded-full" on />
    <LED className="rounded-full" blinking />
    <LED className="rounded-full" on blinking />
</div>
```

--------------------------------

### Card Sizing Examples in React

Source: https://voiceuikit.pipecat.ai/primitives/card

Illustrates how to control the size of the Card component using the 'size' prop. Examples show 'sm', 'md', 'lg', and 'xl' sizes, each with corresponding content and import statements. This helps in visualizing and choosing the appropriate card dimensions.

```jsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<>
  <Card size="sm">
    <CardHeader>
      <CardTitle>Small Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="sm"</pre>
    </CardContent>
  </Card>

  <Card size="md">
    <CardHeader>
      <CardTitle>Medium Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="md"</pre>
    </CardContent>
  </Card>

  <Card size="lg">
    <CardHeader>
      <CardTitle>Large Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="lg"</pre>
    </CardContent>
  </Card>

  <Card size="xl">
    <CardHeader>
      <CardTitle>Extra Large Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="xl"</pre>
    </CardContent>
  </Card>
</>
```

--------------------------------

### Basic Card Implementation in React

Source: https://voiceuikit.pipecat.ai/primitives/card

Demonstrates the basic structure of the Card component using React. It imports necessary components from '@pipecat-ai/voice-ui-kit' and renders a card with a header, title, content, divider, and footer. This serves as a foundational example for using the Card.

```jsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
  Divider
} from "@pipecat-ai/voice-ui-kit";

<Card>
  <CardHeader>
    <CardTitle className="text-lg">Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    General purpose card content.
  </CardContent>
  <Divider />
  <CardFooter>
    Card Footer
  </CardFooter>
</Card>
```

--------------------------------

### Full Example of Conversation UI with Scrolling

Source: https://voiceuikit.pipecat.ai/hooks/usePipecatConversation

A comprehensive example demonstrating the `usePipecatConversation` hook. It includes rendering messages, displaying timestamps, and automatically scrolling to the latest message using a `useRef` and `useEffect` hook.

```typescript
import React, { useEffect, useRef } from "react";
import { usePipecatConversation } from "@pipecat-ai/voice-ui-kit";

export function ConversationExample() {
  const { messages } = usePipecatConversation();
  const endRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    endRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  return (
    <div style={{ height: 300, overflow: "auto", fontFamily: "monospace", fontSize: 12 }}>
      {messages.map((m, i) => (
        <div key={i}>
          <strong>[{m.role}]</strong> {typeof m.content === "string" ? m.content : "[component]"}
          <span style={{ opacity: 0.6, marginLeft: 8 }}>
            {new Date(m.createdAt).toLocaleTimeString()}
          </span>
        </div>
      ))}
      <div ref={endRef} />
    </div>
  );
}

```

--------------------------------

### Setup PipecatAppBase for Conversation Provider

Source: https://voiceuikit.pipecat.ai/hooks/usePipecatConversation

Demonstrates how to set up the PipecatAppBase component, which automatically includes the ConversationProvider. This provider is essential for managing conversation state and processing RTVI events.

```typescript
import { PipecatAppBase, usePipecatConversation } from "@pipecat-ai/voice-ui-kit";

export default function App() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{ webrtcUrl: "/api/offer" }}
    >
      <YourApp />
    </PipecatAppBase>
  );
}

```

--------------------------------

### Panel with Adaptive Buttons in React

Source: https://voiceuikit.pipecat.ai/primitives/panel

Shows how to integrate buttons within a Panel's content area, utilizing container queries for responsive sizing. Note: The `ArrowRightIcon` component used in this example is not defined and will result in a `ReferenceError`.

```jsx
import { Panel, PanelHeader, PanelTitle, PanelContent, Button, ButtonGroup, ArrowRightIcon } from "@pipecat-ai/voice-ui-kit";

<Panel className="w-full">
  <PanelHeader>
    <PanelTitle>Actions</PanelTitle>
  </PanelHeader>
  <PanelContent>
    <Button size="lg">I shrink</Button>
    <Button size="xl" isIcon>
      <ArrowRightIcon />
    </Button>
  </PanelContent>
</Panel>
```

--------------------------------

### Basic usePipecatEventStream Hook Usage

Source: https://voiceuikit.pipecat.ai/hooks/usePipecatEventStream

Demonstrates basic setup of the usePipecatEventStream hook with maxEvents configuration. Shows how to render recent events in a list format with a clear button to reset the event buffer.

```typescript
import { usePipecatEventStream } from "@pipecat-ai/voice-ui-kit";

export function RecentEvents() {
  const { events, clear } = usePipecatEventStream({ maxEvents: 100 });
  return (
    <div>
      <button onClick={clear}>Clear</button>
      <ul>
        {events.map((e) => (
          <li key={e.id}>
            <strong>{e.type}</strong>
            <span> – {e.timestamp.toLocaleTimeString()}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

--------------------------------

### Basic Connect Button with usePipecatConnectionState

Source: https://voiceuikit.pipecat.ai/hooks/usePipecatConnectionState

Simple example showing how to use usePipecatConnectionState to create a connect button that displays different text based on connection status and disables when not connected.

```typescript
import { usePipecatConnectionState } from "@pipecat-ai/voice-ui-kit";

export function ConnectButton() {
  const { isConnected, isConnecting } = usePipecatConnectionState();
  
  return (
    <button
      disabled={!isConnected}
      onClick={handleConnect}
    >
      {isConnected ? "Connected" :
       isConnecting ? "Connecting..." : "Connect"}
    </button>
  );
}
```

--------------------------------

### DeviceSelectComponent (Headless Variant) Example

Source: https://voiceuikit.pipecat.ai/components/DeviceSelect

Demonstrates the headless DeviceSelectComponent, which accepts available devices and callbacks as props. This allows for flexible integration with custom state management solutions. It requires manual provision of device data and selection handling.

```javascript
import { DeviceSelectComponent } from "@pipecat-ai/voice-ui-kit";

// Example with mock data
const mockDevices = [
  { deviceId: "mic1", label: "Built-in Microphone" },
  { deviceId: "mic2", label: "External USB Mic" },
];

function Demo() {
  return (
  <DeviceSelectComponent
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
    />
  );
}

render(<Demo />);
```

--------------------------------

### Card Variant Examples in React

Source: https://voiceuikit.pipecat.ai/primitives/card

Showcases the different 'variant' options available for the Card component, including 'destructive' and 'success'. Each example includes the necessary imports and JSX to render cards with these specific visual styles. This is useful for semantic differentiation.

```jsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<>
  <Card variant="destructive" className="w-full">
    <CardHeader>
      <CardTitle>Destructive Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>variant="destructive"</pre>
    </CardContent>
  </Card>
  <Card variant="success" className="w-full">
    <CardHeader>
      <CardTitle>Success Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>variant="success"</pre>
    </CardContent>
  </Card>
</>
```

--------------------------------

### Complete Connection Controls with Conditional Rendering

Source: https://voiceuikit.pipecat.ai/hooks/usePipecatConnectionState

Full example implementing connection controls with dynamic button text, status LED color coding, and loading spinner. Shows how to handle both connect and disconnect actions with visual feedback based on connection state.

```typescript
import React from "react";
import { usePipecatConnectionState } from "@pipecat-ai/voice-ui-kit";

export function ConnectionControls() {
  const { isConnected, isConnecting, isDisconnected } = usePipecatConnectionState();
  
  const getButtonText = () => {
    if (isConnected) return "Disconnect";
    if (isConnecting) return "Connecting...";
    return "Connect";
  };
  
  const getStatusColor = () => {
    if (isConnected) return "green";
    if (isConnecting) return "yellow";
    return "red";
  };
  
  return (
    <div className="connection-controls">
      <div className={`status-led ${getStatusColor()}`} />
      <button
        disabled={isConnecting}
        onClick={isConnected ? handleDisconnect : handleConnect}
      >
        {getButtonText()}
      </button>
      
      {isConnecting && (
        <div className="loading-spinner" />
      )}
    </div>
  );
}
```

--------------------------------

### Basic Button Group Usage

Source: https://voiceuikit.pipecat.ai/primitives/buttongroup

Demonstrates how to import and use the Button and ButtonGroup components to group buttons. This basic setup creates a row of buttons with shared styling.

```jsx
import { Button, ButtonGroup } from "@pipecat-ai/voice-ui-kit";

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</ButtonGroup>
```

--------------------------------

### TranscriptOverlay Component Usage Examples (React)

Source: https://voiceuikit.pipecat.ai/components/TranscriptOverlay

Demonstrates how to use the connected TranscriptOverlay component to display bot and user speech transcripts, including customization of size, styling, and animation durations. Requires being used within a PipecatClientProvider context.

```jsx
import { TranscriptOverlay } from "@pipecat-ai/voice-ui-kit";

// Display bot speech transcripts
<TranscriptOverlay participant="remote" />

// Display user speech transcripts
<TranscriptOverlay participant="local" />

// With custom styling and size
<TranscriptOverlay 
  participant="remote"
  size="lg"
  className="bg-blue-500/20 border border-blue-300 rounded-lg p-4"
/>

// With custom animation durations
<TranscriptOverlay 
  participant="remote"
  fadeInDuration={500}
  fadeOutDuration={1500}
/>
```

--------------------------------

### Full Width Button Layout in React

Source: https://voiceuikit.pipecat.ai/primitives/button

Shows how to create full-width buttons using the isFullWidth prop. This example demonstrates full-width buttons with both primary and outline variants, useful for mobile layouts or call-to-action sections.

```jsx
import { Button } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-col gap-2 w-full">
    <Button isFullWidth variant="primary">Full Width Button</Button>
    <Button isFullWidth variant="outline">Full Width Outline</Button>
</div>
```

--------------------------------

### LED Component Custom Colors Example

Source: https://voiceuikit.pipecat.ai/primitives/led

Demonstrates how to set custom colors for the LED's on and off states using the `classNames` prop. It accepts an object with `on` and `off` keys to specify Tailwind CSS classes for each state.

```javascript
import { LED } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-6 w-full justify-center items-center">
    <LED classNames={{ on: "bg-emerald-500", off: "bg-neutral-500" }} />
    <LED classNames={{ on: "bg-red-500", off: "bg-blue-500" }} />
</div>
```

--------------------------------

### LED Component Watch-driven Flash Demo

Source: https://voiceuikit.pipecat.ai/primitives/led

Demonstrates the watch-driven flash functionality of the LED component. When the `watch` prop (a state variable `count`) changes, the LED blinks for a duration specified by `watchBlinkDurationMs`. This example includes buttons to trigger single pings and bursts of pings.

```javascript
import { LED, Button } from "@pipecat-ai/voice-ui-kit";
import React from "react";

function Demo() {
  const [count, setCount] = React.useState(0);
  return (
    <div className="flex flex-col gap-3 items-center">
      <div className="flex items-center gap-6">
        <LED watch={count} />
        <LED watch={count} watchBlinkDurationMs={100} />
        <LED watch={count} classNames={{ on: "bg-yellow-400", off: "bg-zinc-600" }} />
      </div>
      <div className="flex items-center gap-2">
        <Button onClick={() => setCount((c) => c + 1)}>Ping</Button>
        <Button variant="outline" onClick={() => { for (let i = 0; i < 5; i++) { setTimeout(() => setCount((c) => c + 1), i * 60); } }}>Burst (5x)</Button>
        <span className="text-sm opacity-70">count: {count}</span>
      </div>
    </div>
  );
}

// Assuming render is available globally or imported
// render(<Demo />);

```

--------------------------------

### Import Voice UI Kit with Tailwind CSS

Source: https://voiceuikit.pipecat.ai/styling

Integrate Voice UI Kit styles with your existing Tailwind CSS setup by importing both in your global CSS. This ensures compatibility and allows for combined customization.

```css
@import "tailwindcss";
@import "tw-animate-css";

@import "@pipecat-ai/voice-ui-kit/styles";

:root {
  /* etc */
}
```

--------------------------------

### Progress Component Multiple States (React)

Source: https://voiceuikit.pipecat.ai/primitives/progress

Illustrates various states of the Progress component, including default, 50% completion, and 100% completion, along with custom class names. This example is useful for showcasing different progress levels. Requires the @pipecat-ai/voice-ui-kit library.

```jsx
import { Progress } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-col gap-3">
  <Progress className="h-4" />
  <Progress percent={50} className="h-4" />
  <Progress percent={100} className="h-4" />
</div>
```

--------------------------------

### CSS Variable Override for Highlight Overlay

Source: https://voiceuikit.pipecat.ai/components/HighlightOverlay

Shows how to customize the animation and opacity of the Highlight Overlay component using CSS variables. The first example demonstrates a global override using a class selector, while the second shows a per-instance override using inline styles.

```css
.voice-ui-kit {
  --animate-highlight: highlight-focus 900ms ease-out forwards;
}
```

```jsx
<HighlightOverlay
  highlightedElement="card1"
  style={{ "--highlight-final-opacity": "0.6" }}
/>
```

--------------------------------

### Plasma Visualizer with Custom Background

Source: https://voiceuikit.pipecat.ai/visualizers/plasma-visualizer

This React example shows how to use the PlasmaVisualizer component with additional styling, including a black background and rounded corners, applied to its container div. The component still automatically handles audio visualization and Pipecat client integration.

```jsx
import { PlasmaVisualizer } from "@pipecat-ai/voice-ui-kit/webgl";

<div className="w-full h-96 relative bg-black rounded-lg overflow-hidden">
  <PlasmaVisualizer />
</div>
```

--------------------------------

### CircularWaveform: Usage Examples (Idle and Thinking States)

Source: https://voiceuikit.pipecat.ai/visualizers/circular-waveform

Illustrates how to use the CircularWaveform component to represent different application states, specifically 'Idle' and 'Thinking'. The `isThinking` prop is key to toggling between these visual modes. This example uses React and assumes the `@pipecat-ai/voice-ui-kit` package is installed.

```jsx
import { CircularWaveform } from "@pipecat-ai/voice-ui-kit";

<div className="space-y-8">
  <div>
    <h4 className="text-sm font-medium mb-2">Idle State</h4>
    <div className="w-80 h-80 bg-gray-50 rounded-lg p-4">
      <CircularWaveform 
        audioTrack={null}
        isThinking={false}
      />
    </div>
  </div>
  
  <div>
    <h4 className="text-sm font-medium mb-2">Thinking State</h4>
    <div className="w-80 h-80 bg-gray-50 rounded-lg p-4">
      <CircularWaveform 
        audioTrack={null}
        isThinking={true}
      />
    </div>
  </div>
</div>
```

--------------------------------

### Disabled Video State Example

Source: https://voiceuikit.pipecat.ai/components/UserVideoControl

Provides an example of how to display the UserVideoComponent in a disabled state, indicating that video functionality is unavailable. This uses 'noVideo', 'noVideoText', and 'isCamEnabled' props.

```javascript
import { UserVideoComponent } from "@pipecat-ai/voice-ui-kit";

function Demo() {
  return (
    <UserVideoComponent
      noVideo={true}
      noVideoText="Camera not available"
      isCamEnabled={false}
      onClick={() => {}}
    />
  );
}

render(<Demo />);
```

--------------------------------

### PipecatAppBase: Initialize Devices on Mount (JavaScript)

Source: https://voiceuikit.pipecat.ai/hooks/PipecatAppBase

Explains how to automatically initialize audio and video devices (microphone, camera, speakers) when the PipecatAppBase component mounts by setting the `initDevicesOnMount` prop to `true`. This is useful for applications that need immediate access to user media.

```javascript
import { PipecatAppBase } from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
      initDevicesOnMount={true}
    >
      <YourCustomComponent />
    </PipecatAppBase>
  );
}
```

--------------------------------

### Switching Themes Globally with ThemeProvider

Source: https://voiceuikit.pipecat.ai/styling

Demonstrates how to switch themes globally using the ThemeProvider component from @pipecat-ai/voice-ui-kit. It allows setting a default theme and provides a hook to toggle between 'light', 'dark', and 'system' themes within a Toolbar component.

```javascript
import { ThemeProvider, useTheme } from "@pipecat-ai/voice-ui-kit";

export default function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <Toolbar />
      <YourApp />
    </ThemeProvider>
  );
}

function Toolbar() {
  const { theme, resolvedTheme, setTheme } = useTheme();
  return (
    <div>
      <span>current: {resolvedTheme}</span>
      <button onClick={() => setTheme("light")}>Light</button>
      <button onClick={() => setTheme("dark")}>Dark</button>
      <button onClick={() => setTheme("system")}>System</button>
    </div>
  );
}
```

--------------------------------

### Button Component Basic Usage (React)

Source: https://voiceuikit.pipecat.ai/primitives/button

Demonstrates the basic integration and rendering of the Button component. It requires importing the Button from '@pipecat-ai/voice-ui-kit'. The component accepts a 'variant' prop to define its appearance.

```jsx
import { Button } from "@pipecat-ai/voice-ui-kit";

<Button variant="primary">Click me</Button>
```

--------------------------------

### PipecatAppBase: Auto-Connect on Mount (JavaScript)

Source: https://voiceuikit.pipecat.ai/hooks/PipecatAppBase

Demonstrates how to automatically initiate a connection when the PipecatAppBase component mounts by setting the `connectOnMount` prop to `true`. This simplifies the initial connection process for applications that require immediate connection.

```javascript
import { PipecatAppBase } from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
      connectOnMount={true}
    >
      <YourCustomComponent />
    </PipecatAppBase>
  );
}
```

--------------------------------

### Importing Utilities CSS Bundle

Source: https://voiceuikit.pipecat.ai/styling

Demonstrates how to import the utilities bundle for Voice UI Kit, alongside Tailwind CSS and base UI Kit styles. Importing utilities provides additional design tokens, helpers, and ensures correct merging of custom styles with UI Kit components.

```css
@import "tailwindcss";
@import "@pipecat-ai/voice-ui-kit/styles";
@import "@pipecat-ai/voice-ui-kit/utilities";
```

--------------------------------

### DeviceDropDownComponent Basic Usage

Source: https://voiceuikit.pipecat.ai/components/DeviceDropDown

Demonstrates the basic usage of the `DeviceDropDownComponent` with mock device data. This headless variant allows for custom state management and UI integration. It takes `availableDevices`, `selectedDevice`, and an `updateDevice` callback as props.

```javascript
import { DeviceDropDownComponent, Button } from "@pipecat-ai/voice-ui-kit";

// Example with mock data
const mockDevices = [
  { deviceId: "mic1", label: "Built-in Microphone" },
  { deviceId: "mic2", label: "External USB Mic" },
];

function Demo() {
  return (
    <DeviceDropDownComponent
      availableDevices={mockDevices}
      selectedDevice={mockDevices[0]}
      updateDevice={(deviceId) => console.log("Selected:", deviceId)}
      menuLabel="Select Microphone"
    >
      <Button variant="outline">Choose Device</Button>
    </DeviceDropDownComponent>
  );
}

render(<Demo />);
```

--------------------------------

### Custom Sizing for CircularWaveform React

Source: https://voiceuikit.pipecat.ai/visualizers/circular-waveform

Provides examples of responsive sizing options for the CircularWaveform component with small (200px), medium (320px), and large (480px) configurations. Each size example uses a fixed dimension container with appropriate padding and demonstrates how the size prop controls the visualization dimensions.

```JavaScript/React
import { CircularWaveform } from "@pipecat-ai/voice-ui-kit";

<div className="space-y-8">
  <div>
    <h4 className="text-sm font-medium mb-2">Small (200px)</h4>
    <div className="w-52 h-52 bg-gray-50 rounded-lg p-2">
      <CircularWaveform 
        audioTrack={null}
        isThinking={true}
        size={200}
      />
    </div>
  </div>
  
  <div>
    <h4 className="text-sm font-medium mb-2">Medium (320px)</h4>
    <div className="w-80 h-80 bg-gray-50 rounded-lg p-4">
      <CircularWaveform 
        audioTrack={null}
        isThinking={true}
        size={320}
      />
    </div>
  </div>
  
  <div>
    <h4 className="text-sm font-medium mb-2">Large (480px)</h4>
    <div className="w-96 h-96 bg-gray-50 rounded-lg p-6">
      <CircularWaveform 
        audioTrack={null}
        isThinking={true}
        size={480}
      />
    </div>
  </div>
</div>
```

--------------------------------

### Progress Component Basic Usage (React)

Source: https://voiceuikit.pipecat.ai/primitives/progress

Demonstrates the basic implementation of the Progress component from @pipecat-ai/voice-ui-kit. It shows how to render a progress bar with a specified percentage and custom class names for styling. Dependencies include the @pipecat-ai/voice-ui-kit library.

```jsx
import { Progress } from "@pipecat-ai/voice-ui-kit";

<Progress percent={50} className="h-4" />
```

--------------------------------

### Importing Terminal Theme

Source: https://voiceuikit.pipecat.ai/styling

Shows how to import the terminal theme for the Voice UI Kit. It requires importing the base UI Kit styles first, followed by the specific theme file. This approach allows for quick theme application or serves as a base for customization.

```css
@import "@pipecat-ai/voice-ui-kit/styles"; 
@import "@pipecat-ai/voice-ui-kit/themes/terminal";
```

--------------------------------

### VoiceVisualizer Basic Usage with React

Source: https://voiceuikit.pipecat.ai/visualizers/basic-visualizer

Demonstrates the basic implementation of the VoiceVisualizer component in a React application. It requires the VoiceVisualizer import and a participantType prop. Customization of bars and colors is shown.

```javascript
import { VoiceVisualizer } from "@pipecat-ai/voice-ui-kit";

<div className="w-64 h-32">
  <VoiceVisualizer participantType="local" />
</div>
```

```javascript
import { VoiceVisualizer } from "@pipecat-ai/voice-ui-kit";

<div className="bg-gray-100 rounded-lg p-4">
  <VoiceVisualizer 
    participantType="local"
    barCount={8}
    barColor="blue"
    barMaxHeight={120}
  />
</div>
```

--------------------------------

### ThemeProvider for Theme Management (React)

Source: https://voiceuikit.pipecat.ai/styling

Wrap your application with the ThemeProvider to enable and manage light/dark modes and theme persistence. It accepts props for default theme and storage key.

```typescript
import { ThemeProvider } from "@pipecat-ai/voice-ui-kit";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider defaultTheme="system" storageKey="voice-ui-kit-theme">
      {children}
    </ThemeProvider>
  );
}
```

--------------------------------

### DeviceSelectComponent (Headless Variant) with Props

Source: https://voiceuikit.pipecat.ai/components/DeviceSelect

An example of using the headless DeviceSelectComponent with explicitly provided props for available devices, the selected device, and the update callback. This demonstrates its flexibility for custom UI implementations.

```javascript
import { DeviceSelectComponent } from "@pipecat-ai/voice-ui-kit";

<DeviceSelectComponent
  placeholder="Select input device"
  guide="Microphone"
  availableDevices={[
    {deviceId: "microphone1", label: "Microphone 1"},
    {deviceId: "microphone2", label: "Microphone 2"},
  ]}
  selectedDevice={null}
  updateDevice={(deviceId) => console.log("Selected:", deviceId)} 
/>
```

--------------------------------

### LED Component Blink Interval Configuration

Source: https://voiceuikit.pipecat.ai/primitives/led

Shows how to adjust the blinking speed of the LED component using the `blinkIntervalMs` prop. The example displays LEDs with intervals of 100ms and 500ms, alongside text indicators.

```javascript
import { LED } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-8 w-full justify-center items-center">
    <div className="flex flex-col items-center gap-2">
        <LED blinking blinkIntervalMs={100} />
        <span className="text-xs opacity-70">100ms</span>
    </div>
    <div className="flex flex-col items-center gap-2">
        <LED blinking blinkIntervalMs={500} />
        <span className="text-xs opacity-70">500ms</span>
    </div>
</div>
```

--------------------------------

### Basic Usage of Plasma Visualizer Component

Source: https://voiceuikit.pipecat.ai/visualizers/plasma-visualizer

This React code snippet demonstrates the basic integration of the PlasmaVisualizer component within a div element. It requires importing the component and rendering it, allowing it to automatically connect to the Pipecat client and visualize audio data.

```jsx
import { PlasmaVisualizer } from "@pipecat-ai/voice-ui-kit/webgl";

<div className="w-full h-96 relative">
  <PlasmaVisualizer />
</div>
```

--------------------------------

### LED Component Basic Usage

Source: https://voiceuikit.pipecat.ai/primitives/led

Demonstrates the basic import and rendering of the LED component from the @pipecat-ai/voice-ui-kit library. It shows the default off state and an explicitly turned on state.

```javascript
import { LED } from "@pipecat-ai/voice-ui-kit";

<LED />
```

--------------------------------

### Progress Component Rounded Style (React)

Source: https://voiceuikit.pipecat.ai/primitives/progress

Shows how to apply a rounded style to the Progress component using the 'rounded' prop. This example also includes custom width and height for the progress bar. Depends on the @pipecat-ai/voice-ui-kit library.

```jsx
import { Progress } from "@pipecat-ai/voice-ui-kit";

<Progress percent={50} rounded className="h-4 w-full" />
```

--------------------------------

### React Highlight Overlay with No Auto-Clear

Source: https://voiceuikit.pipecat.ai/components/HighlightOverlay

Demonstrates how to use the HighlightOverlay component from @pipecat-ai/voice-ui-kit in a React application. This example shows how to manually control the highlighting of cards using buttons and disables the auto-clear functionality by setting `autoClearDuration` to 0.

```jsx
import { Button, Card, HighlightOverlay } from "@pipecat-ai/voice-ui-kit";
import React from "react";

function Demo() {
  const [highlightedElement, setHighlightedElement] = React.useState<string | null>(null);

  return (
    <div className="flex flex-col gap-4 items-center">
      <ButtonGroup>
        <Button variant="outline" onClick={() => setHighlightedElement("card3")}>Highlight Card 1</Button>
        <Button variant="outline" onClick={() => setHighlightedElement("card4")}>Highlight Card 2</Button>
        <Button variant="outline" onClick={() => setHighlightedElement(null)}>Clear Highlight</Button>
      </ButtonGroup>

      <div className="grid grid-cols-2 gap-6 my-4">
        <Card id="card3" className="p-6 w-64 flex items-center justify-center">
          <CardHeader>
            <CardTitle className="font-semibold">Card 1</CardTitle>
          </CardHeader>
        </Card>

        <Card id="card4" className="p-6 w-64 flex items-center justify-center">
          <CardHeader>
            <CardTitle className="font-semibold">Card 2</CardTitle>
          </CardHeader>
        </Card>
      </div>

      <HighlightOverlay
        highlightedElement={highlightedElement}
        onHighlightElement={setHighlightedElement}
        className="ring-2 ring-purple-500 ring-offset-4"
        offset={6}
        autoClearDuration={0}
      />
    </div>
  );
}

render(<Demo />)
```

--------------------------------

### VoiceVisualizer High Resolution Configuration

Source: https://voiceuikit.pipecat.ai/visualizers/basic-visualizer

Demonstrates configuring the VoiceVisualizer for high-resolution audio visualization by adjusting the number of bars and their properties. Uses props like 'barCount', 'barWidth', and 'barGap' for detailed frequency analysis.

```jsx
import { VoiceVisualizer } from "@pipecat-ai/voice-ui-kit";

<div className="space-y-8">
  <div>
    <h4 className="text-sm font-medium mb-2">High Resolution (20 bars)</h4>
    <div className="h-32 bg-gray-50 rounded p-4">
      <VoiceVisualizer 
        participantType="local"
        barCount={20}
        barWidth={12}
        barGap={4}
        barColor="blue"
        noPeaks={false}
        peakLineColor="red"
        barOrigin="bottom"
        barLineCap="square"
      />
    </div>
  </div>
  
  <div>
    <h4 className="text-sm font-medium mb-2">Ultra High Resolution (32 bars)</h4>
    <div className="h-32 bg-gray-50 rounded p-4">
      <VoiceVisualizer 
        participantType="local"
        barCount={32}
        barWidth={8}
        barGap={2}
        barColor="green"
        noPeaks={false}
        peakLineColor="yellow"
        peakLineThickness={1}
        barOrigin="top"
        barLineCap="square"
      />
    </div>
  </div>
</div>
```

--------------------------------

### Import Voice UI Kit Styles

Source: https://voiceuikit.pipecat.ai/styling

Import the default Voice UI Kit styles into your global CSS file. This sets up the foundational styles for the kit, which can be extended or customized further.

```css
@import "@pipecat-ai/voice-ui-kit/styles";

:root {
  /* etc */
}
```

--------------------------------

### Full usePipecatEventStream Implementation with Grouping and Auto-scroll

Source: https://voiceuikit.pipecat.ai/hooks/usePipecatEventStream

Complete example demonstrating usePipecatEventStream with event grouping, expandable group UI, auto-scroll functionality, and event display with timestamps and data. Handles both single and multiple consecutive events with collapsible groups.

```typescript
import React, { useEffect, useRef, useState } from "react";
import {
  usePipecatEventStream,
  type PipecatEventGroup,
} from "@pipecat-ai/voice-ui-kit";

export function EventStreamExample() {
  const { events, groups } = usePipecatEventStream({
    maxEvents: 200,
    groupConsecutive: true,
  });
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
  const endRef = useRef<HTMLDivElement>(null);

  // Auto-scroll on new events
  useEffect(() => {
    endRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [events]);

  const toggleGroup = (id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  return (
    <div style={{ height: 300, overflow: "auto", fontFamily: "monospace", fontSize: 12 }}>
      {groups.map((group: PipecatEventGroup) => {
        const isExpanded = expanded.has(group.id);
        const hasMultiple = group.events.length > 1;

        if (!hasMultiple || isExpanded) {
          return group.events.map((e, idx) => (
            <div key={e.id}>
              {hasMultiple && idx === 0 ? (
                <button onClick={() => toggleGroup(group.id)}>[−]</button>
              ) : (
                <span>•</span>
              )}
              <span> [{e.timestamp.toLocaleTimeString()}] </span>
              <strong>{e.type}</strong> {e.data ? JSON.stringify(e.data) : "null"}
            </div>
          ));
        }

        return (
          <div key={group.id}>
            <button onClick={() => toggleGroup(group.id)}>[+]</button>
            <span> [{group.events[0].timestamp.toLocaleTimeString()}] </span>
            <strong>{group.type}</strong> ({group.events.length} events)
          </div>
        );
      })}
      <div ref={endRef} />
    </div>
  );
}
```

--------------------------------

### CircularWaveform: Bar Configuration Options

Source: https://voiceuikit.pipecat.ai/visualizers/circular-waveform

Demonstrates how to adjust the number and width of bars in the CircularWaveform visualization using the `numBars` and `barWidth` props. This example uses React and the `@pipecat-ai/voice-ui-kit` package, showing variations for fewer, default, and many bars.

```jsx
import { CircularWaveform } from "@pipecat-ai/voice-ui-kit";

<div className="space-y-8">
  <div>
    <h4 className="text-sm font-medium mb-2">Few Bars (32)</h4>
    <div className="w-80 h-80 bg-gray-50 rounded-lg p-4">
      <CircularWaveform 
        audioTrack={null}
        isThinking={true}
        numBars={32}
        barWidth={6}
      />
    </div>
  </div>
  
  <div>
    <h4 className="text-sm font-medium mb-2">Default Bars (64)</h4>
    <div className="w-80 h-80 bg-gray-50 rounded-lg p-4">
      <CircularWaveform 
        audioTrack={null}
        isThinking={true}
        numBars={64}
        barWidth={4}
      />
    </div>
  </div>
  
  <div>
    <h4 className="text-sm font-medium mb-2">Many Bars (128)</h4>
    <div className="w-80 h-80 bg-gray-50 rounded-lg p-4">
      <CircularWaveform 
        audioTrack={null}
        isThinking={true}
        numBars={128}
        barWidth={2}
      />
    </div>
  </div>
</div>
```

--------------------------------

### Button Component Rounded Styles (React)

Source: https://voiceuikit.pipecat.ai/primitives/button

Illustrates the different border-radius options for the Button component, controlled by the 'rounded' prop. Options include 'size', 'sm', 'lg', 'xl', 'full', and 'none'. This example uses flexbox for layout.

```jsx
import { Button } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-2 w-full justify-center">
    <Button rounded="size">Size (matches size prop)</Button>
    <Button rounded="sm">SM</Button>
    <Button rounded="lg">LG</Button>
    <Button rounded="xl">XL</Button>
    <Button rounded="full">Full</Button>
    <Button rounded="none">None</Button>
</div>
```

--------------------------------

### Divider with variant styles

Source: https://voiceuikit.pipecat.ai/primitives/divider

Shows how to apply different line variants to the Divider component including solid, dotted, and dashed patterns. All examples use the primary color for visual consistency and demonstrate how variant affects the line appearance.

```jsx
import { Divider } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-col gap-6 w-full">
  <Divider color="primary" />
  <Divider variant="dotted" color="primary" />
  <Divider variant="dashed" color="primary" />
</div>
```

--------------------------------

### Switching Themes with Scoped Styles

Source: https://voiceuikit.pipecat.ai/styling

Illustrates theme switching with scoped styles by importing '@pipecat-ai/voice-ui-kit/styles.scoped'. The theme class is applied to the `.vkui-root` element, ensuring styles are isolated to that container. This is useful for integrating UI Kit components within larger applications without style conflicts.

```javascript
import "@pipecat-ai/voice-ui-kit/styles.scoped";
import { ThemeProvider, useTheme } from "@pipecat-ai/voice-ui-kit";

export default function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      <ScopedRoot />
    </ThemeProvider>
  );
}

function ScopedRoot() {
  const { resolvedTheme } = useTheme();
  // IMPORTANT: when using scoped styles, put the theme class on ".vkui-root"
  return (
    <div className={`vkui-root ${resolvedTheme}`}>
      <YourApp />
    </div>
  );
}
```

--------------------------------

### PipecatAppBase Usage: Direct Children Pattern (JavaScript)

Source: https://voiceuikit.pipecat.ai/hooks/PipecatAppBase

Illustrates the Direct Children pattern for PipecatAppBase, suitable for leveraging built-in components that manage connection state internally. This example shows integrating ConnectButton and ControlBar with UserAudioControl.

```javascript
import {
  PipecatAppBase,
  ConnectButton,
  ControlBar,
  UserAudioControl,
} from "@pipecat-ai/voice-ui-kit";

export default function Home() {
  return (
    <PipecatAppBase
      transportType="smallwebrtc"
      connectParams={{
        webrtcUrl: "/api/offer",
      }}
    >
      <div>
        <ConnectButton />
        <ControlBar>
          <UserAudioControl />
        </ControlBar>
      </div>
    </PipecatAppBase>
  );
}
```

--------------------------------

### UserAudioOutputControlComponent: Basic Usage with Devices

Source: https://voiceuikit.pipecat.ai/components/UserAudioOutputControl

Demonstrates the basic usage of the UserAudioOutputControlComponent, a headless variant that accepts available audio devices and a callback for device updates as props. It allows for custom management of device selection logic.

```jsx
import { UserAudioOutputControlComponent } from "@pipecat-ai/voice-ui-kit";

<UserAudioOutputControlComponent
  availableDevices={[
    {deviceId: "speaker1", label: "Speaker 1"},
    {deviceId: "speaker2", label: "Speaker 2"},
  ]}
  selectedDevice={null}
  updateDevice={(deviceId) => console.log("Selected:", deviceId как}
/>
```
Tokens:
Raw