Generative UI in AI UX & Generative UI

Lessons in this section

1. Controlled Generative UI

   Stop the agent writing walls of text. Let it pick from your own typed components, such as an order card or a refund form, and fall back safely when it asks wrongly.

2. Declarative UI with A2UI

   The agent sends a JSON description of the UI. Build a renderer that only draws catalogue components with valid props, renders parts as they stream, and sends user events back with IDs.

3. Open-ended UI and MCP Apps

   A partner's MCP App arrives as full HTML. Host it in a sandboxed iframe with a CSP and message checks, so a malicious app cannot escape and a real one still works.

4. The AG-UI Channel

   Wire the agent and the UI over an AG-UI-style event stream: text, tool calls, state deltas, interrupts and human-in-the-loop, without losing what the user typed.

5. Feedback That Improves the Product

   Capture thumbs, corrections and regenerate signals as structured events with a trace ID and output version, so they become test cases in your evals.

6. Accessible AI UI

   Make streaming answers work with screen readers, keyboard-only use and reduced motion, and give citation chips labels that make sense out loud.

7. Capstone: Your AI UX Kit

   Bring every lesson together on the surface you chose: streaming, trust cues, controls, confirmations, designed states and one generative UI pattern, graded against 15 scenarios. Then export your kit.