Skip to content
A2UI v1.0

Quickstart

A2UI lets an AI agent answer with an interface instead of a paragraph: cards your users can tap, dates they can drag, a panel that keeps up with them.

This quickstart runs Travel A2UI, a small trip planner built on the official A2UI SDKs. It is simple on purpose: one Python server holds the agent, and a React client (web) and a Flutter client (mobile) draw what it sends.

Web + Mobile
View prompt → Or follow the step-by-step walkthrough

Paste it into Antigravity, Claude Code, Codex, Cursor or any coding agent that can read a web page. It runs three commands, then explains how A2UI works with the apps open.

How A2UI fits into this app

A2UI is an SDK for your agent and a renderer for your app. Here is where each part lives in Travel A2UI:

A2UI Architecture & Pipeline Overview

SERVER · YOUR AGENT
SDK CONFIG
Component catalog

catalog.json: the UI components and functions available to render on the client.

catalogs/a2ui-travel/catalog.json
AGENT INPUT
Domain tools

Your APIs and data, such as flight search and booking.

data/tools.json
A2UI AGENT SDK Python, in this app
Skill generator

Turns the catalog into an A2UI skill with prompt instructions and grammar rules.

scripts/build_skills.py → skills/
Compiler & validator

Parses model output, checks it against the catalog, and emits wire messages.

apps/server/src/travel_a2ui/brain/catalog.py
Your agent code + LLM runtime Outside the SDK

Calls your tools and the model (GenAI SDK, ADK, A2A, Anthropic, OpenAI, LangChain), then hands the model's UI output to the compiler.

apps/server/src/travel_a2ui/brain/
TRANSPORT Server-sent events, in this app
↓ updateComponents ↓ updateDataModel ↑ action
CLIENT · YOUR APP
What the user sees
Your app

The screen, navigation, and chat. Everything outside the surface is yours.

apps/web/ · apps/flutter/
A2UI RENDERER
React and Flutter, in this app

Draws the surface with native widgets. Bound values update locally; taps send action messages.

renderers/react/ · renderers/flutter/

One server serves the API, the React app at / and the Flutter app at /flutter/. The clients know nothing about travel: each knows how to draw the catalog’s components. You, the builder, decide what is in the catalog; the agent decides what to draw from it. How A2UI works walks through the same picture for any A2UI app.

What you will learn

Once it runs, your agent (or the step-by-step walkthrough) explains, with the app open:

  1. What on screen is A2UI and what is ordinary app code: surfaces, the components in them, and the data they show.
  2. The catalog: the components and client functions the agent may use, and why it is the guardrail.
  3. Agent skills: how the model is taught to write A2UI for the catalog.
  4. What the model writes versus what the client receives: A2UI Express, the A2UI messages the agent SDK turns it into, and the MessageProcessor that applies them.
  5. Renderers: the two here, and the others A2UI has.

Other fast paths

To try A2UI without cloning anything:

  • Agent skills: run npx skills add a2ui-project/a2ui in your project to give your coding agent A2UI’s protocol rules, SDK integration guides and catalog authoring workflows (see Get Help).
  • A2UI Composer (source): a visual workspace for prompting an assistant, inspecting streamed messages and dataModel updates, and editing surfaces side by side.
  • A2UI Playground: a browser sandbox for trying A2UI prompts and component catalogs with no local setup.