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 raw RTVI event stream. 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

The console is a development preview and is not currently published in the @pipecat registry. The source remains in packages/registry/src/blocks/console for local development. The usage examples below describe that local source.

Transport packages are not installed with the block — they load on demand. Install the one for your transportType:

A missing package doesn't crash the console — it surfaces in the error banner with the exact install command.

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 { Console } from "@/components/pipecat/console/console";

export default function DebugPage() {
  return (
    <div className="h-dvh">
      <Console
        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 on desktop, and the same panels as bottom tabs on mobile — 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