A2UI Launched: Full CopilotKit support at launch!

A2UI Launched: CopilotKit has partnered with Google to deliver full support in both CopilotKit and AG-UI!

Check it out
LogoLogo
  • Overview
  • Integrations
  • API Reference
  • Copilot Cloud
Slanted end borderSlanted end border
Slanted start borderSlanted start border
  • Getting Started
  • Introduction to CopilotKit
  • LLM Quickstart
  • Agent Quickstart
  • Vibe Coding MCP
  • What's New
  • CopilotKit Features
  • Agentic Chat UI
  • Copilot Suggestions
  • Human in the Loop (HITL)
  • Generative UI
  • Frontend Actions
  • Backend Actions
  • Shared State
  • Premium Features
  • CopilotKit Premium
  • Fully Headless UI
  • Observability
  • Inspector
  • Agentic Protocols
  • Agentic Protocols
  • AG-UI (Agents<->Users)
  • MCP (Agents<->Tools)
  • A2A (Agents<->Agents)
  • Generative UI Specs
  • Generative UI Specs
  • A2UI
  • Open-JSON-UI
  • MCP-UI
  • Learning
  • Tutorial: AI Todo App
  • Tutorial: AI Travel App
  • Video: Research Canvas
  • Cookbook: State Machine
  • Troubleshooting
  • Error Debugging
  • Error Observability Connectors
  • Common Copilot Issues
  • Migrate to 1.10.X
  • Migrate to 1.8.2
  • Other
  • Integrations
  • ADK
  • A2A
  • Microsoft Agent Framework
  • AWS Strands
  • Direct to LLM
  • LangGraph
  • AutoGen2
  • Agno
  • CrewAI Crews
  • CrewAI Flows
  • LlamaIndex
  • Mastra
  • Open Agent Spec
  • Pydantic AI

Error Debugging

Learn how to debug errors in CopilotKit with dev console.

How to Debug Errors

CopilotKit provides visual error display for local development and debugging. This feature is completely free and requires no API keys.

Quick Setup

import { CopilotKit } from "@copilotkit/react-core";

export default function App() {
  return (
    <CopilotKit
      runtimeUrl="<your-runtime-url>"
      showDevConsole={true} 
    >
      {/* Your app */}
    </CopilotKit>
  );
}

Avoid showing the dev console in production as it exposes internal error details to end users.

When to Use Development Debugging

  • Local development - See errors immediately in your UI
  • Quick debugging - No setup required, works out of the box
  • Testing - Verify error handling during development

Troubleshooting

Development Debugging Issues

  • Dev console not showing:
    • Confirm showDevConsole={true}
    • Check for JavaScript errors in the browser console
    • Ensure no CSS is hiding the error banner
PREV
Cookbook: State Machine
Slanted end borderSlanted end border
Slanted start borderSlanted start border
NEXT
Error Observability Connectors

On this page

How to Debug Errors
Quick Setup
When to Use Development Debugging
Troubleshooting
Development Debugging Issues