Inspector and dev console

Choose the right inspector and dev console prop for v1 and v2.


There are two related <CopilotKit> props that control on-screen debugging UI, and which one you want depends on whether you're on v1 or v2. They are easy to confuse because the names overlap.

v1 inspector behavior#

On the v1 <CopilotKit> provider:

  • enableInspector?: boolean controls the CopilotKit Inspector (inspect AG-UI events, agent messages, agent state, and context). Defaults to a localhost-gated mode: when you don't pass the prop, the inspector shows on localhost / 127.0.0.1 / 0.0.0.0 and stays hidden in production. This is close to the v2 showDevConsole="auto" mode, but not identical. v2 "auto" matches only localhost / 127.0.0.1 and does not treat 0.0.0.0 as local. Pass enableInspector={true} to always show it (including in production) or enableInspector={false} to always hide it.
  • showDevConsole?: boolean is deprecated. It only ever controlled the error toasts/banners, not the inspector button. Defaults to false for production safety.
// v1: control the inspector with enableInspector
<CopilotKit runtimeUrl="/api/copilotkit" enableInspector={false}>
  {children}
</CopilotKit>

If you're on v1 and still passing showDevConsole expecting it to surface the inspector, switch to enableInspector. showDevConsole won't show the inspector button.

v2 dev console behavior#

The v2 provider <CopilotKitProvider> (from @copilotkit/react-core/v2) consolidates this into a single prop. There is no enableInspector prop in v2. Use showDevConsole:

  • showDevConsole?: boolean | "auto" controls whether the inspector renders.
    • true: always show.
    • false (default): never show.
    • "auto": show only on localhost / 127.0.0.1, so it appears in local dev and stays hidden in production automatically.
// v2: "auto" shows the inspector on localhost only
import { CopilotKitProvider } from "@copilotkit/react-core/v2";

<CopilotKitProvider runtimeUrl="/api/copilotkit" showDevConsole="auto">
  {children}
</CopilotKitProvider>;

"auto" is the recommended setting for most apps: you get the inspector while developing locally and nothing leaks into production builds.

Migrating from v1#

You had (v1)Use instead (v2)
enableInspector unset (localhost-gated default)showDevConsole="auto"
enableInspector={true} (always show)showDevConsole={true}
enableInspector={false}showDevConsole={false} (the v2 default)
showDevConsole={true} (deprecated)showDevConsole={true}

Don't ship showDevConsole={true} to production. It exposes internal error and event details to end users. Prefer "auto" (v2) so it's automatically off in production.