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
• DTMF Keypad: Phone-icon toggle that reveals a DTMF keypad (popover on desktop, bottom drawer on mobile)
• 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>
  );
}

With WebSocket Transport

The websocket transport requires installing the optional peer package:

npm install @pipecat-ai/websocket-transport

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

export default function App() {
  return (
    <div className="h-screen">
      <ConsoleTemplate
        transportType="websocket"
        startBotParams={{
          endpoint: "/api/start",
          requestData: {
            transport: "websocket",
          },
        }}
      />
    </div>
  );
}

With MoQ Transport

The moq (Media-over-QUIC) transport requires installing the optional peer package:

npm install @pipecat-ai/moq-transport

MoQ connects through a moq-lite relay. Typically the bot's startBot endpoint returns the relay connection details, so it's wired like the other transports:

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

export default function App() {
  return (
    <div className="h-screen">
      <ConsoleTemplate
        transportType="moq"
        startBotParams={{
          endpoint: "/api/start",
          requestData: {
            transport: "moq",
          },
        }}
      />
    </div>
  );
}

Alternatively, to dial a relay directly without a start endpoint, pass the relay URL via transportOptions:

<ConsoleTemplate
  transportType="moq"
  transportOptions={{
    relayUrl: "https://relay.example.com:4080/",
  }}
/>

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
• noDTMF: Hide the DTMF keypad toggle

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);
  }}
/>

onClient

Subscribe to client events before connecting. Fires once per client instance, on creation and before connect. See PipecatAppBase › onClient for full semantics.

import { type PipecatClient, RTVIEvent } from "@pipecat-ai/client-js";

<ConsoleTemplate
  onClient={(client: PipecatClient) => {
    client.on(RTVIEvent.BotStartedSpeaking, () => {
      console.log("Bot started speaking");
    });
    client.on(RTVIEvent.UserStartedSpeaking, () => {
      console.log("User started speaking");
    });
  }}
/>

Integration

The Console template:

• Wraps your app with PipecatAppBase for client setup
• Provides all necessary providers (ThemeProvider, PipecatClientProvider)
• 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,
    reverseOrder: true
  }}
  // ... 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