Skip to content

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.

  1. Copy the prompt

    setup-prompt.md
    Add 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.
  2. Paste it into your coding agent

    Start the agent in your app's folder, then paste.

    cd your-app && agy
  3. Add a Gemini key and run your app

    Put a Gemini API key in .env.local as GOOGLE_API_KEY, then ask the chat for “a dashboard of this week's signups”.

Go further