AI builder glossary
Generative UI
An interface pattern where the model chooses which of your components to render, and with what data, instead of replying only with text.
Generative UI lets a model respond with interface, not just prose. Asked about an order, it can show an order card with a refund button; asked to compare plans, it can render a comparison table. The model picks the component and supplies identifiers or parameters; your app renders a real component with real data.
The usual implementation treats components as tools. Each component has a schema for its inputs, the model calls it like any other tool, your server fetches the actual data scoped to the user, and the client renders the matching component. A more flexible version lets the model return a layout spec from a closed set of block types, which you validate before rendering.
The principle that keeps it safe is a split of responsibilities: the model supplies choices and identifiers, your server supplies the data, and your components supply the pixels. If the model names an order that doesn't exist, you render not found rather than a fabricated card. Letting a model write raw HTML or JSX that you render live is a different and much riskier thing, inviting injection and invented numbers.
Use generative UI where a component genuinely beats text, like actions, data, and comparisons.
In a help-desk sidebar, asking about a customer shows a customer card with plan, open tickets, and recent orders fetched from the database, rather than a paragraph describing them.
Learn more in the course
Related terms
Go from definitions to doing
Learn to build AI-powered apps in 132 practical lessons.