Generative UI
This section now focuses on the runtime composition contract instead of mixing primitives, artifacts, AI elements, and chat chrome on one page. Use the subpages below to inspect the system at the right level.
Section Map
Choose the layer you want to inspect rather than scrolling through one oversized catch-all page.
GenUI Primitives
Atomic cards, text, list, progress, and decision controls used by the runtime renderer.
Open page
Renderers
The two runtime rendering systems: expression-based GenUI specs and typed JSON artifact specs.
Open page
Runtime Flow
How chat, tool progress, side panels, and breakpoints work together during a live agent turn.
Open page
What Stays Out Of This Section
The goal is clearer boundaries. These surfaces already have dedicated homes elsewhere in the design system.
Messaging
Plain transcript presentation, streaming ornament, quick actions, and suggestion rails live on the Messaging page.
Use this page when you are evaluating the transcript itself.
Artifacts
Standalone artifact cards, media previews, references, and focused-edit cards live on the Artifacts page.
Keep artifact-card review separate from renderer-contract review.
AI Elements
Tool cards, confirmations, reasoning, prompt input, code/image/jsx previews, and persona live on AI Elements.
Provider-aligned UI should stay in its own section.
App Surfaces
Inline cards, carousel, PiP, inspector, sheet, and fullscreen workspace belong under App Surfaces.
Presentation mode is a separate concern from runtime composition grammar.