Add A2UI to your app

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. Create app/genui.tsx: `"use client";` then `export { standardUI as ui } from "@copilotkit/react-core/v2/generative-ui";`. That is CopilotKit's standard catalog (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 { ui } from "./genui";

export default function Page() {
  return (
    <CopilotKitProvider runtimeUrl="/api/copilotkit" generativeUI={{ ui }}>
      <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, Gemini 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.