Console Template

The Console template provides a complete, production-ready interface for Pipecat applications. It includes resizable panels, conversation display, bot media visualization, device controls, event logging, and more.

import { ConsoleTemplate } from "@pipecat-ai/voice-ui-kit";

<div className="h-screen">
  <ConsoleTemplate
    transportType="smallwebrtc"
    connectParams={{
      webrtcUrl: "/api/offer"
    }}
  />
</div>

Overview

The Console template is a comprehensive UI template that combines multiple panels and components into a single, cohesive interface. It's designed for development, testing, and production use cases.

Key Features

• Resizable Panels: Adjustable layout with collapsible panels
• Conversation Display: Tabbed interface with conversation and metrics
• Bot Media: Audio visualization and video display panels
• Device Controls: Audio, video, and screen sharing controls
• Event Logging: Real-time RTVI event display with filtering
• Session Information: Transport type, session ID, participant ID, and version
• Responsive Design: Desktop resizable layout and mobile tabbed interface
• Theme Support: Built-in theme switcher

Usage

Basic Usage

import { ConsoleTemplate } from "@pipecat-ai/voice-ui-kit";

export default function App() {
  return (
    <div className="h-screen">
      <ConsoleTemplate
        transportType="smallwebrtc"
        connectParams={{
          webrtcUrl: "/api/offer"
        }}
      />
    </div>
  );
}

With Daily Transport

import { ConsoleTemplate } from "@pipecat-ai/voice-ui-kit";

export default function App() {
  return (
    <div className="h-screen">
      <ConsoleTemplate
        transportType="daily"
        connectParams={{
          dailyUrl: "https://your-domain.daily.co/room-name",
          token: "your-token"
        }}
      />
    </div>
  );
}

Custom Configuration

import { ConsoleTemplate } from "@pipecat-ai/voice-ui-kit";

export default function App() {
  return (
    <div className="h-screen">
      <ConsoleTemplate
        transportType="smallwebrtc"
        connectParams={{
          webrtcUrl: "/api/offer"
        }}
        titleText="My Application"
        assistantLabelText="AI Assistant"
        userLabelText="You"
        noBotVideo={true}
        noMetrics={true}
      />
    </div>
  );
}

Props

The ConsoleTemplate extends PipecatBaseProps and adds additional configuration options:

Layout

Desktop Layout

On desktop (sm and above), the template uses a resizable panel layout:

1. Header: Logo, title, theme switcher, info panel toggle, and connect button
2. Main Area (70% height):
   • Left Panel: Bot audio/video visualization (collapsible)
   • Middle Panel: Conversation/Metrics tabs
   • Right Panel: Info panel with status, devices, and session info (collapsible)
3. Bottom Panel (30% height): Events panel (collapsible)

Mobile Layout

On mobile, the template uses a tabbed interface:

• Bot Tab: Bot audio and video panels
• Conversation Tab: Conversation and metrics
• Info Tab: Status, devices, and session info
• Events Tab: Event log

Panel Configuration

Collapsible Panels

Panels can be collapsed/expanded:

• Info Panel: Collapses to show icon buttons in popovers
• Media Panel: Collapses to show compact bot media
• Events Panel: Collapses to minimal height

Panel Visibility

Control which panels are visible:

• noBotAudio / noBotVideo: Hide bot media panels
• noConversation / noMetrics: Hide conversation/metrics tabs
• noSessionInfo / noStatusInfo: Hide info panel sections
• noUserAudio / noUserVideo / noScreenControl: Hide device controls

Codec Configuration (SmallWebRTC)

For SmallWebRTC transport, you can specify audio and video codecs:

<ConsoleTemplate
  transportType="smallwebrtc"
  audioCodec="opus"
  videoCodec="vp9"
  connectParams={{
    webrtcUrl: "/api/offer"
  }}
/>

Supported codecs depend on browser support. Use "default" to use the browser's default codec.

Callbacks

onInjectMessage

Receive a function to manually inject messages into the conversation:

<ConsoleTemplate
  onInjectMessage={(injectMessage) => {
    // Store injectMessage for later use
    window.injectMessage = injectMessage;
  }}
/>

onServerMessage

Subscribe to server messages:

<ConsoleTemplate
  onServerMessage={(data) => {
    console.log("Server message:", data);
  }}
/>

Integration

The Console template:

• Wraps your app with PipecatAppBase for client setup
• Provides all necessary providers (ThemeProvider, PipecatClientProvider, ConversationProvider)
• Handles connection state and error display
• Manages panel collapse states
• Tracks session and participant IDs automatically

Customization

Custom Logo

<ConsoleTemplate
  logoComponent={<YourCustomLogo />}
  // ... other props
/>

Custom Conversation Props

<ConsoleTemplate
  conversationElementProps={{
    assistantLabel: "AI Assistant",
    clientLabel: "You",
    noAutoscroll: false
  }}
  // ... other props
/>

Custom Theme

<ConsoleTemplate
  theme="dark"
  noThemeSwitch={true}
  // ... other props
/>

See Also

• PipecatAppBase - Base component used by the template
• ConversationPanel - Conversation display panel
• InfoPanel - Information panel
• EventsPanel - Events logging panel