VS Code Extension

Preview supported CopilotKit UI sources, A2UI catalog components, and the AG-UI event stream without leaving VS Code.

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 — currently targets hook-based frontend source; use the Angular feature catalog and linked Showcase source for Angular component examples.

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.

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#

Install the extension#

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

Open the CopilotKit activity bar#

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

CopilotKit Hooks
A2UI Catalog
AG-UI Inspector

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

Angular component source#

The hook preview is not the Angular authoring surface. Browse Angular feature examples 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.

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.

Find your catalog files#

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.

Preview a component#

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.

Add fixtures#

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

MyComponent.fixture.json:

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

MyComponent.fixture.ts:

export default {
  "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.

The extension validates fixture files on save and surfaces structural warnings (missing surfaceId, invalid messages, unknown component types) as in-editor diagnostics.

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.

Full walkthrough, event-type color reference, and production guard details: AG-UI Event Inspector.