VS Code Extension

The CopilotKit VS Code extension is a three-in-one workbench for iterating on CopilotKit features inside your editor. Install it once and you get three sidebars under the CopilotKit activity-bar icon:

• CopilotKit Hooks — discover every useCopilotAction, useRenderTool, useCoAgentStateRender, etc. in your workspace, and live-preview their render components with auto-generated form controls.
• A2UI Catalog — live preview of your A2UI catalog components with fixture-driven scenarios and hot-reload on save.
• AG-UI Inspector — a real-time, color-coded, filterable stream of every AG-UI event your runtime emits.

No localhost server, no browser tab, no agent run required for the first two — you can iterate on rendering and UI structure entirely offline.

Install

Open VS Code, go to Extensions (Ctrl+Shift+X / Cmd+Shift+X), search for CopilotKit, and click Install. Or from a terminal:

code --install-extension copilotkit.copilotkit

Click the CopilotKit icon in the Activity Bar on the left edge of VS Code. Three sidebar views expand underneath it, in this order:

1. CopilotKit Hooks
2. A2UI Catalog
3. AG-UI Inspector

Each is a self-contained tool — pick the one that matches what you're working on. </Step> </Steps>

Hook Explorer

You have a file that calls useCopilotAction, useRenderTool, or any other render-capable CopilotKit hook, and you want to iterate on the render prop. The CopilotKit Hooks sidebar lists every call-site in your workspace; clicking one opens a live preview panel where the render output is driven by a form built from your hook's declared parameters.

Extra niceties:

• A ▶️ Preview Component CodeLens sits directly above every render-hook call in your editor — one click opens the preview for exactly that site.
• A </> button on each sidebar row jumps to the source file.
• Cross-file hook switches auto-recover — a forced render-prop crash in one hook doesn't strand the whole webview.

A2UI Catalog

You have a file that exports an A2UI catalog via createCatalog (or imports @copilotkit/a2ui-renderer). The A2UI Catalog sidebar lists every catalog file in your workspace, plus any named fixtures you've defined alongside them. Clicking a component opens a live preview; edit the file and the preview updates on save while preserving interaction state.

Open the A2UI Catalog sidebar. Each row is a catalog file (discovered by scanning for @copilotkit/a2ui-renderer imports). Rows with fixture files expand to show named scenarios; rows without one get an auto badge and render with a default empty surface.

Hover any row to reveal a </> button that jumps to the source — on fixture rows, it jumps to the named fixture key inside the fixture file. </Step>

Click a component row to open the preview. If the component has fixtures, click the row to expand and pick a fixture — otherwise the click previews directly. Edit the file and save — the preview rebundles and re-renders automatically. </Step>

Fixtures are named test-data scenarios. Create a fixture file next to your component:

<Tabs items={["JSON", "TypeScript"]}> <Tab value="JSON"> MyComponent.fixture.json:

{
  "default": {
    "surfaceId": "preview",
    "messages": [
      { "beginRendering": { "surfaceId": "preview", "root": "root" } },
      { "surfaceUpdate": { "surfaceId": "preview", "components": [] } }
    ]
  },
  "empty state": {
    "surfaceId": "preview",
    "messages": []
  }
}

Each top-level key is a named fixture. Switch between them from the fixture dropdown inside the preview panel. </Step> </Steps>

AG-UI Inspector

You're running a CopilotKit runtime and something in an agent interaction is off — a tool call isn't firing, a state delta is wrong, or the run ends before the UI settles. The AG-UI Inspector sidebar opens a dedicated SSE connection to your runtime's /cpk-debug-events endpoint and renders every event in a filterable, color-coded stream. Click any event row to expand the full JSON payload.