import Image from "next/image";

# A2UI - Google's Generative UI Spec

**A2UI** is Google's declarative, LLM-friendly Generative UI specification that enables agents to generate dynamic user interfaces.

<Image
  src="/images/gen-ui-specs-light.png"
  alt="Generative UI Specs"
  width={4096}
  height={2304}
  className="block dark:hidden mb-8"
/>
<Image
  src="/images/gen-ui-specs-dark.png"
  alt="Generative UI Specs"
  width={4096}
  height={2304}
  className="hidden dark:block mb-8"
/>

## What is A2UI?

A2UI is a declarative generative UI specification launched by Google. It's designed to be:

- **JSONL-based** - Uses JSON Lines format for streaming
- **LLM-friendly** - Easy for language models to generate
- **Platform-agnostic** - Can be rendered on any platform
- **Streaming-first** - Built for real-time, progressive rendering

## Why A2UI?

### Declarative Approach

A2UI allows agents to describe UI components declaratively, making it easier for LLMs to generate dynamic interfaces without needing to understand implementation details.

### Streaming Support

Built with streaming in mind, A2UI enables progressive rendering as the agent generates responses, providing a better user experience.

### Platform Agnostic

A2UI specifications can be rendered on web, mobile, or any other platform, making your agent's UI truly universal.

## Setup with CopilotKit

### Backend

Enable A2UI in `CopilotRuntime` by passing `a2ui: {}`:

```ts title="app/api/copilotkit/route.ts"
import {
  CopilotRuntime,
  ExperimentalEmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";

const runtime = new CopilotRuntime({
  agents: { default: myAgent },
  a2ui: {},
});
```

This automatically applies `A2UIMiddleware` to all registered agents. To scope it to specific agents, you can specify agents with the `agents` property: `a2ui: { agents: ["my-agent"] }`.

Once configured, any A2UI output returned from your agent will automatically be rendered in the chat interface — no additional frontend code required.

### Frontend

The A2UI renderer activates automatically — no extra configuration needed on the frontend. Optionally, pass a custom theme:

```tsx
import { CopilotKit } from "@copilotkit/react-core/v2";
import { myCustomTheme } from "@copilotkit/a2ui-renderer";

<CopilotKit runtimeUrl="/api/copilotkit" a2ui={{ theme: myCustomTheme }}>
  {children}
</CopilotKit>;
```

The `a2ui` prop on `<CopilotKit>` is only needed if you want to override the default theme provided.

## Using A2UI with CopilotKit

[Get started with A2UI](/a2a/generative-ui/declarative-a2ui) and A2A with CopilotKit

Check out the [A2UI Composer](https://a2ui-editor.ag-ui.com/gallery) to create and find widgets

## Learn More

- [Generative UI Specs Overview](/generative-ui/specs) - Compare all supported specifications
- [Generative UI Guide](/generative-ui) - Build with Generative UI in CopilotKit
- [A2UI Site](https://a2ui.org/) - Visit the A2UI site
- [AG-UI Protocol](/ag-ui-protocol) - Learn about the protocol that supports A2UI
- [Open-JSON-UI](/generative-ui/specs/open-json-ui) - OpenAI's alternative approach
- [MCP Apps](/generative-ui/specs/mcp-apps) - Iframe-based Generative UI extending MCP
