Phase 7Intermediate8 of 16 in AI Frontend

Structured Output and Generative UI

Make the model fill a form instead of writing a paragraph: JSON with a zod schema, partial objects while they stream, AI-filled forms, and screens built from a typed registry.

So far the model has written text for a person to read. Many features need something else: an order number the screen can look up, a status that picks a badge, a list of fields that fill a form. For that the model must answer in a shape your code can check, not in a paragraph.

This phase teaches the whole path. Why "please reply with JSON" is not enough, how to describe the shape with zod, how the AI SDK's Output.object asks for it and what it throws when the answer is wrong, how to show a half-finished object while it streams, how to let the model fill a form without trusting it, and how to let the model choose which component to show from a list you control.

Every example runs the real AI SDK 7 and zod in the page, against a scripted stand-in model that you can make misbehave on purpose. The phase ends with Mitra showing cards, not paragraphs, for order status and products.

0/7 · 0%

7 topics ~3 h 20 code blocks & diagrams

Start with the first topic

7.1

When Text Isn't Enough

Code that needs a field (an order number, a status) cannot rely on prose. Asking a model for JSON works most of the time and fails in predictable ways: extra words, code fences, cut-off output, and valid JSON of the wrong shape. This topic shows each failure live, and why parsing is not the same as checking.

23 min 3 code practice

7.2

Schemas with Zod

A schema is a short, exact description of the shape you expect. With zod you write it once and use it three times: it tells the model what to produce, it checks what came back, and it gives your code a type. A failed check gives a list of issues, each with a path and a message.

24 min 3 code practice

7.3

Generating Objects with the SDK

With the AI SDK you pass output: Output.object({ schema }) to generateText or streamText and read a checked, typed result.output. When the reply is wrong the SDK throws NoObjectGeneratedError, which keeps the raw text and the finish reason. Retries for bad replies are yours to write, and the model needs a legal way to say no.

28 min 3 code practice

7.4

Streaming Partial Objects

A long object (a list of items, a summary with sections) can be shown while the model is still writing it. parsePartialJson closes the open brackets of half-written JSON, the SDK gives you partial objects (partialOutputStream, useObject), and your screen must cope with fields that are missing, half-written or still of the wrong type.

30 min 4 code practice

7.5

AI-Filled Forms

The model reads a free-text message and fills a form for the user. Use a lenient schema for the model (unknown is null), a strict schema for the form, show which fields the AI filled, never overwrite what the user typed, validate after the fill, and check that values really appear in the message.

32 min 2 code practice

7.6

Generative UI

In generative UI the model does not write the screen. It picks a component by name and fills in its props, from a registry you wrote. Your code looks the name up, validates the props with zod, and renders the real component, or a safe fallback. The model never sends code, and never HTML to run.

32 min 3 code practice

7.7

Build: Mitra Shows Cards, Not Paragraphs

Mitra now answers with a small typed reply: text, an order card, a product card, or an honest "I can't help". The model picks the kind and an id, the cards load their own facts from the shop's data, and every failure has its own state on screen.

32 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Check the Reply Before You Show It

The route /api/order answers with text that should be JSON like {"orderId":"ORD-1042","status":"shipped"}. Three buttons ask for a good reply (#good), a reply with a status that is not allowed (#bad) and a reply that is plain words (#prose).

Beginner

Fill the Form, Keep the User's Edits

The route /api/extract reads a customer's message and answers with JSON: { "name": …, "phone": … }. Either value can be null, meaning the message did not say.

Intermediate

Render Only What Is in the Registry

The model sent a list of specs, { component, props }. Write render(spec) so that every spec adds one element to #out when #run is clicked.