AI UX & Generative UI tutorial

Design and build AI interfaces people understand, trust and control: streaming, sources, undo, confirmations, clear errors and generative UI, then export a UX kit for your own app.

Start the course

Course contents

Trustworthy AI Interfaces

  1. Where AI Belongs — The same AI feature can be a full chat, a side panel or one button. Learn the four ways AI is not a normal button, and three questions that pick the right place for each task.
  2. Streaming and Waiting — Replace a 14-second spinner with an answer that shows each step, streams as it is written, and has a Stop button that really cancels the work.
  3. Sources and Doubt — A confident wrong answer looks exactly like a right one. Add citation chips that link only to retrieved passages, a "not sure" state, and a scope note.
  4. Stop, Edit, Retry, Undo — Give users control over AI output: stop a runaway answer, fix the question, keep every version when they retry, and undo an applied suggestion to the exact state before.
  5. Ask Before Acting — An agent can refund, send and delete. Add an action preview card, ask only when the risk is high, and give a short undo window after the action.
  6. Errors, Refusals and Empty States — Timeouts, tool failures, refusals, rate limits and "I don't know" are screens you design. Give each one plain words and a next step, then export your v1 AI UX kit.

Generative UI

  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.

Reference

  1. AI UX Cheat Sheet — Every pattern from the course on one page: surfaces, streaming, trust cues, controls, risk and confirmation, designed states, the generative UI spectrum, A2UI, MCP App sandboxing, AG-UI events, feedback events, accessibility and the check list.