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:

The A2UI catalog preview runs without a localhost server, browser tab, or agent run. The AG-UI Inspector connects to a running development runtime.

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>

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.

The hook preview is not the Angular authoring surface. Browse <a href="/angular/features">Angular feature examples</a> instead: each supported feature links to the runnable standalone component and its closest typed API reference. The A2UI Catalog and AG-UI Inspector sections below remain applicable. </FrontendOnly>

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 {runtimeUrl}/cpk-debug-events and renders every event in a filterable, color-coded stream. Click any event row to expand the full JSON payload. That path is relative to the base path the runtime is mounted at, so give the panel the full runtime URL rather than just the origin.