✨ Deep Dive · Advanced

GenUI and A2UI: agents that compose widgets, not markdown

Chat UIs trained users to accept walls of markdown. Generative UI (GenUI) flips the contract: the model proposes UI structure — lists, forms, cards — and Flutter renders real widgets with real state.

Diagram: GenUI and A2UI

What A2UI is

A2UI is an open protocol describing how an agent and a client collaborate on UI composition and state. Flutter’s GenUI SDK implements the client side. Package downloads grew sharply through 2026 as teams shipped beyond demos (for example language-learning apps that compose lesson UI on the fly).

Architecture sketch

  1. User intent goes to your backend/agent.
  2. Agent emits A2UI structure (not free text).
  3. GenUI maps structure → Flutter widgets in a constrained catalog.
  4. Events flow back as structured actions the agent can handle.

Design constraints that make it work

  • Catalog over chaos. Allow only widgets you designed; do not let the model invent layout physics.
  • Critic loop. Validate agent output before paint (empty states, overflow, a11y labels).
  • Templates for speed. Hybrid: strong templates + model-filled slots beats pure generation for reliability.

Pitfalls

  • Treating GenUI as a theming engine — it is a composition protocol.
  • Skipping offline/error UI because “the model will fix it.”
  • Shipping without human-readable fallbacks when the catalog cannot express the answer.
#Flutter#GenUI#A2UI#AI#UX