GENERATIVE UI

The Model Picks the Component

Building Generative UI

Build interfaces where the model chooses from developer-owned components, fills typed contracts, and returns results people can inspect and act on.

Ask about this workshop

Format and fit

Full day · Half-day version available

Who it's for

Frontend and full-stack engineers building what comes after chat: AI products where models respond with interactive, structured interfaces people can inspect and act on.

Preparation

Comfortable building web interfaces in a modern component framework; no prior agent-SDK experience needed.

Workshop abstract

An AI feature can compute a structured answer and still flatten it into a wall of markdown. Generative UI lets the model answer with interface: metrics, tables, diagrams, artifacts, and actions selected for the question in front of it.

The model does not invent the interface. It picks from a registry of components the development team owns and fills one typed schema per block. Every result is validated before it reaches the screen.

The workshop maps the wider generative-UI field, then builds one dependable pattern from first principles: typed blocks emitted through tool calls, streamed and patched by id, with versioned artifacts, structural diffs, interactive actions, and approval decisions that return to the model as structured context.

The rendering layer works for a single model call. Agent-shaped mechanics are added only where work persists across turns and produces changes worth tracing, versioning, or stopping for approval.

The architecture stays open to any web stack that renders components and consumes a stream, and to any model that can call tools.

What the team will be able to do

Decide which answers deserve a component, which are better as prose, and which mechanics need an agent loop.

Build a component registry with one schema per block type.

Stream typed blocks through tool calls and patch them by id on the client.

Persist artifacts as versioned objects with structural diffs.

Return edits, approvals, and suggested actions as structured input for the next turn.

Workshop content

Module 1

Map the field

Compare the main generative-UI patterns by how much freedom the model receives, study the relevant open protocols, and decide when interface earns its cost.

Module 2

Registry and block protocol

Build the typed component map, schema contracts, fail-closed validation, bounded retries, streaming turn state, and the first set of reusable blocks.

Module 3

Artifacts as objects

Persist artifacts with identity and versions, render them in a live-bound canvas, serialize them canonically, and show structural changes between revisions.

Module 4

The round-trip

Send action chips, inline edits, and approval decisions back into the next model turn, then expose the activity trace only when there is durable work to trace.

Module 5

Diagrams from a contract

Represent nodes and edges as model output and let a graph renderer handle layout, grouping, icons, and change highlighting.

Module 6

Make it dependable

Design trust cues, test every block contract with valid and malformed fixtures, expose failure states, budget the token cost of components, and keep the registry bounded.

Threaded lab

Build the full loop: prompt, streamed typed blocks, a versioned artifact opened in the canvas, and a refinement that updates the open artifact with its version and visible delta.

Conference editions

CONFERENCE EDITION