Console

The console is a multipurpose template for debugging and testing Pipecat agents. Drop it into a route, point it at your bot, and you have a complete workbench without building any UI: the connect flow with device controls, bot audio and video, live conversation transcripts, per-service metrics, session info, and a live RTVI event stream (metrics and bot LLM/TTS events are hidden, and botOutput shows once per spoken status). Use it as your local debugging page during bot development, a shared test harness on staging, or the starting point for your own operator console.

Installation

pnpm dlx shadcn@latest add @pipecat/console

Transport packages are not installed with the block. Install the one you connect with and pass it as transportFactory:

transportFactory is read once, so remount the console with a key to swap it. To let users switch transports instead, register a loader per type with registerTransport before mounting; changing transportType then rebuilds the client. Load failures surface in the error banner instead of crashing the console.

Usage

The console is a drop-in: it builds its own client via usePipecatApp and renders its own PipecatClientProvider — do not nest it inside another provider. Give it a sized container (it fills its parent):

import { SmallWebRTCTransport } from "@pipecat-ai/small-webrtc-transport";

import { Console } from "@/components/pipecat/console/console";

export default function DebugPage() {
  return (
    <div className="h-dvh">
      <Console
        transportFactory={() => new SmallWebRTCTransport()}
        connectParams={{ endpoint: "/api/start" }}
        layoutPersistenceKey="my-console"
      />
    </div>
  );
}

What you get: a header with the connect flow (hover the button to see the resolved connection URL), resizable bot-media / conversation+metrics / info panes over a collapsible live events strip at 1024px and wider, and the same panels as bottom tabs on narrower screens, opening on the conversation. One tree, so every prop reaches both layouts. Connection errors show their real message in a dismissible banner.

Theming and the header slot

The console owns no theme. It renders off semantic tokens, so it follows your app's light/dark class automatically; drop your own toggle (or any app-specific actions) into headerSlot:

import { useTheme } from "next-themes";

function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
  return (
    <Button
      variant="ghost"
      size="icon-sm"
      aria-label="Toggle theme"
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
    >
      <SunMoonIcon />
    </Button>
  );
}

<Console headerSlot={<ThemeToggle />} />;

Key props