The developer toolkit for CopilotKit agents — preview generative UI, explore 28 hooks, and inspect AG-UI protocol streams, all from the VSCode activity bar.
// Scanning workspace for CopilotKit hooks... Render Hooks (16 found) ✓ useCopilotAction src/agent.tsx:12 ✓ useCopilotAction src/tools.tsx:8 ✓ useCoAgentAction src/flow.tsx:24 ✓ useCopilotChatSuggestions src/chat.tsx:6 Data Hooks (12 found) ✓ useCopilotReadable src/state.tsx:15 ✓ useCoAgentStateRender src/flow.tsx:31 ✓ useCopilotChat src/chat.tsx:19 CodeLens: 28 "Preview Component" lenses active
// Right-click any .tsx file to preview import { WeatherCard } from "./components"; // Fixture: weather-sunny.json { "temperature": 72, "condition": "sunny", "location": "San Francisco" } ✓ Fixture valid — all fields match schema ✓ Hot-reload active — watching for changes
// Inline validation catches issues instantly ● Error line 3: Unknown field "temprature" ↳ Did you mean "temperature"? ● Error line 7: Missing required field Expected: "unit": "fahrenheit" | "celsius" ● Warning line 12: Duplicate ID "card-main" already used at line 4 3 diagnostics — 2 errors, 1 warning
7 | Preview Component | View Fixtures 8 | useCopilotAction({ 9 | name: "get_weather", 10 | description: "Fetch current weather", 11 | render: (props) => { 12 | return <WeatherCard {...props} /> 13 | } 14 | }); 15 | Preview Component 16 | useCopilotAction({ 17 | name: "search_docs",
// Rendered without running the agent loop ┌───────────────────────────────┐ │ WeatherCard │ │ │ │ ☉ Loading weather data... │ │ ████████████████ │ │ ████████ │ │ │ └───────────────────────────────┘ State: in-progress Props: { location: "San Francisco" }
/cpk-debug-events SSE endpoint for any AG-UI agent stream.
Connected to localhost:4000/cpk-debug-events 12:04:01.123 ● RUN_STARTED agent-1 run-a8f3 12:04:01.456 ● TEXT_MESSAGE_START agent-1 run-a8f3 12:04:01.789 ● TEXT_MESSAGE_CONTENT "I'll check the..." 12:04:02.012 ● TOOL_CALL_START get_weather 12:04:02.345 ● TOOL_CALL_ARGS {"location":"SF"} 12:04:03.678 ● TOOL_CALL_END get_weather 12:04:03.901 ● STATE_DELTA +weather_data 12:04:04.123 ● REASONING "Formatting result" 12:04:04.456 ● RUN_FINISHED agent-1 run-a8f3
● TOOL_CALL_ARGS 12:04:02.345 ▼ "arguments": { "location": "San Francisco", "unit": "fahrenheit" } ▼ "metadata": { "tool_call_id": "tc_9x8f2a", "agent_id": "agent-1", "run_id": "run-a8f3" } ▶ "timing": {...} 3 fields Filter: event:TOOL_CALL* agent:agent-1
Iterate on generative UI without running the full agent loop. Preview render hooks instantly with fixture data — faster feedback, less waiting.
See every AG-UI protocol event as it streams. Color-coded timeline, payload drill-down, and filtering by agent, run, or event type.
Fixture validation with schema-aware checks, Levenshtein typo suggestions, duplicate ID detection, and protocol ordering violations — all inline.
All three panels live in the VSCode activity bar. Preview, explore, and inspect without leaving your editor or switching windows.
Supports all 28 CopilotKit hooks across both V1 and V2 APIs. 16 render hooks, 12 data hooks, automatically discovered via fast AST scanning.
Clickable "Preview Component" lens appears above every render-hook call-site. One click to see the generative UI without any extra setup.
The only VSCode extension purpose-built for previewing generative UI and inspecting AG-UI protocol streams.
| Capability | CopilotKit Extension | Storybook MCP | MS Foundry Toolkit | Vercel AI SDK DevTools |
|---|---|---|---|---|
| Generative UI preview | Built-in ✓ | Via MCP Apps | ✗ | ✗ |
| Agent protocol inspector | AG-UI native ✓ | ✗ | Agent Inspector | ✗ |
| Component catalog | A2UI built-in ✓ | Design system | ✗ | ✗ |
| Agent workflow debugging | Event streaming ✓ | ✗ | Breakpoints + viz ✓ | LLM call tracing |
| Framework hook discovery | 28 hooks + CodeLens ✓ | ✗ | ✗ | ✗ |
| Fixture validation | Built-in ✓ | ✗ | ✗ | ✗ |
| Multi-model catalog | ✗ | ✗ | 100+ models ✓ | ✗ |
| Free + Open Source | MIT ✓ | MIT ✓ | Free (MS account) | MIT ✓ |
Install from the marketplace, open a CopilotKit project, and start previewing.