Introduction
Introduction
A2NUI bridges AI-generated abstract UI to native Nuxt UI components.
What is A2NUI?
A2NUI is a component library and playground that implements the A2UI protocol v0.10 for Nuxt. It takes AI-generated JSONL streams and renders them as native Nuxt UI components.
The A2UI Protocol
A2UI (AI-to-UI) is a streaming JSONL protocol designed to be easily generated by LLMs. Instead of generating raw HTML or framework-specific code, the AI outputs an abstract component tree that any renderer can display natively.
{"version":"v0.10","createSurface":{"surfaceId":"demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"demo","components":[
{"id":"root","component":"Column","children":["heading","btn"]},
{"id":"heading","component":"Text","text":"Hello World","variant":"h1"},
{"id":"btn","component":"Button","label":"Click Me","variant":"primary"}
]}}
This produces a heading and a button — rendered with UButton, UInput, and other Nuxt UI components.
Standard Catalog
The v0.10 standard catalog defines 18 components across four categories:
| Category | Components |
|---|---|
| Display | Text, Image, Icon, Video, AudioPlayer |
| Layout | Row, Column, List, Card, Tabs, Divider |
| Overlay | Modal |
| Interactive | Button, TextField, CheckBox, ChoicePicker, Slider, DateTimeInput |
All 18 are implemented in A2NUI with full Nuxt UI mapping.
Architecture
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
│ LLM/AI │────▶│ A2UI JSONL │────▶│ A2NUI │
│ (Gemini) │ │ (Protocol) │ │ Renderer │
└─────────────┘ └──────────────┘ └──────┬───────┘
│
┌───────────▼──────────┐
│ Nuxt UI │
│ Native Components │
└──────────────────────┘
Quick Start
- Open the Playground — Go to /playground and try prompting the AI
- Browse Components — Explore the component catalog to see each mapping
- Paste JSONL — Use the Paste tab in the playground to test raw A2UI messages