The best answer to "recommend a cafe near me" might not be a sentence at all — it might be a card with a photo, rating, distance, and a "get directions" button. Generative UI has the model decide not just the content of an answer but the shape to present it in — a card, a list, a comparison table, a form — and a real interface component renders to match.
The usual implementation has the model return structured data (JSON) against a fixed schema instead of free-form text, which the client then slots into a pre-built component matching that shape. The model isn't generating raw HTML/CSS from scratch — it's closer to choosing "use this component, filled with this data" — which is what keeps the result inside a consistent design system.
The pattern is only complete if pressing a button inside it (say, "add to cart") feeds that action back into the conversation so the model's next response can react to it. A pretty card whose interactions are disconnected from the conversation is only half the pattern.
When to use
Use it when the answer is inherently structured — comparing products, booking, scheduling, location. Forcing a card onto an answer that reads naturally as prose — an explanation, an opinion — just makes it harder to read.