Add A2UI to your app
Pick the component library your agent draws with, then set it up in your app.
Choose your component library
Choose your setup path
Set up CopilotKit with a coding agent, or do it by hand.
Copy the prompt
setup-prompt.mdAdd generative UI to this app with A2UI 1.0 and CopilotKit, so my agent answers with interactive UI built from CopilotKit's standard catalog. The agent writes A2UI (a JSON description of components and data), and CopilotKit renders it with the components registered in a catalog. Do the following, then show me what you changed. 1. Install with this project's package manager: `@copilotkit/react-core@1.85.0 @copilotkit/runtime@1.85.0 zod@3.25.76`. 2. Use CopilotKit's standard catalog as it ships, with no catalog file of your own: the page in step 4 imports `standardUI` from "@copilotkit/react-core/v2/generative-ui" and passes it as `ui`. That is 69 components: Column, Row, Card, Text, Button, TextField, Table, Chart, Map and more. To match this app's look, pass a `theme` with the `--a2ui-*` CSS variables next to `ui` in `generativeUI`. 3. Add the runtime route. In Next.js it is app/api/copilotkit/[[...slug]]/route.ts; in another framework, serve the same handler at /api/copilotkit. It runs a Gemini agent and reads its key from GOOGLE_API_KEY: put that variable name in .env.example and never write a key into a file. ```ts import { BuiltInAgent, CopilotRuntime, createCopilotRuntimeHandler, } from "@copilotkit/runtime/v2"; const copilotRuntime = new CopilotRuntime({ agents: { default: new BuiltInAgent({ model: "google/gemini-3.8-flash" }) }, }); const handler = createCopilotRuntimeHandler({ runtime: copilotRuntime, basePath: "/api/copilotkit", }); export const GET = handler; export const POST = handler; ``` 4. Wrap the app in the provider and render the chat where the assistant belongs: ```tsx "use client"; import "@copilotkit/react-core/v2/styles.css"; import { CopilotChat, CopilotKitProvider } from "@copilotkit/react-core/v2"; import { standardUI } from "@copilotkit/react-core/v2/generative-ui"; export default function Page() { return ( <CopilotKitProvider runtimeUrl="/api/copilotkit" generativeUI={{ ui: standardUI }} > <CopilotChat /> </CopilotKitProvider> ); } ``` 5. Verify: start the dev server, ask the chat for "a dashboard of this week's signups", and check that a UI renders. Fix any catalog error the browser console reports. Optional, for an agent that writes A2UI outside CopilotKit (ADK, Antigravity CLI, another runtime): export the catalog with `exportA2UICatalog(ui)` from @copilotkit/react-core/v2/generative-ui, and generate an agent skill from it with `SkillGenerator` from @a2ui/agent. References: - A working example of this setup: - Its catalog as an A2UI 1.0 document: /catalog.json - CopilotKit generative UI docs: https://docs.copilotkit.ai/generative-ui/components/standard-catalog - A2UI specification: https://a2ui.org If you have the CopilotKit or the AG-UI A2UI integration skills installed, load them before you start.
Paste it into your coding agent
Start the agent in your app's folder, then paste.
cd your-app && agyAdd a Gemini key and run your app
Put a Gemini API key in
.env.localasGOOGLE_API_KEY, then ask the chat for “a dashboard of this week's signups”.