mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Ran Shem Tov
91 lines
3.1 KiB
Plaintext
91 lines
3.1 KiB
Plaintext
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";
|
|
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
|