Generative UI
An AI model generates the interface — or part of it — for each request, shaped to that person and that question.
- A new layout per request
- Fits one-off, exploratory answers
- Varies run to run
- Needs sandboxing or a catalog
Guide · Composable UI
Generative UI vs composable UI: who builds the screen, and when.
Generative UI has a model produce the interface at run time, for each request. Composable UI assembles screens from ready-made parts that already know their data and behaviour.
Both promise interfaces without hand-coding every screen, and AI now drives both. They differ in what the model produces — code, a layout from a catalog, or a choice of finished parts — and that one difference decides consistency, safety, speed and how you test the result. This guide lays out the full range between them, how each works, where each fails, and how to choose.
Updated · 7 sources
Composable UI
Screens are built from self-contained parts with declared data, states and events — by people or by an AI — and then stay put.
- A stable screen people learn
- Fits daily, repeated work
- Same result every time
- Parts tested once, reused everywhere
Each time someone asksWhen the screen is decidedWhen the app is built or changed
Code, or a layout descriptionWhat the model producesA choice and arrangement of parts
Inconsistency and unsafe outputMain riskMissing the part a task needs
What is the difference between generative UI and composable UI?
Generative UI is an interface that an AI model produces at run time for each request — anything from choosing which pre-built component to show, to writing a whole interactive page. Composable UI is an interface assembled from ready-made, self-contained parts with declared data, states and events, which then stays stable for everyone who uses it. Generative UI optimises for fit to one request; composable UI for consistency, safety and reuse across thousands of people. Many systems combine them: a model composes from a trusted catalog of parts.
Five points on one line
Five ways an interface gets made, from trusted parts to generated code.
“Generative UI” covers very different systems. The useful question is what finally reaches the screen: the host’s own tested parts, a layout of those parts, or code the host did not write. Each step to the right adds flexibility — and adds something the host must now isolate or check.
The host draws its own tested partsThe host runs code it did not write
12345
- Composable UIScreens assembled from catalog parts — by a designer, or by an AI working through the same tools — then published.
- Tool results as componentsAt run time the model calls a tool; the app renders that tool’s result with a pre-built component.
- Layouts from a trusted catalogThe model sends a declarative description; the client draws it with only the components it already trusts.
- Sandboxed app panelsA tool’s server ships its own HTML and script; the host shows it in an isolated frame.
- Fully generated pagesThe model writes a complete interactive page for each prompt.
Real examples along the line
- Tool results as componentsThe Vercel AI SDK defines generative UI as connecting the result of a tool call to a React component.
- Layouts from a trusted catalogGoogle’s A2UI, introduced in December 2025: agents send a declarative JSON description, which it calls a data format rather than executable code.
- Sandboxed app panelsMCP Apps, the first official Model Context Protocol extension (January 2026): a tool points to a bundled HTML resource that the host renders in a sandboxed frame and talks to by message passing.
- Fully generated pagesGoogle’s generative UI in the Gemini app and AI Mode in Search, announced November 2025: a custom interactive experience per prompt.
Generative UI
How generative UI works: one five-step loop, and what Google’s tests found.
Every generative UI system runs the same loop: the model reads the request and its context, emits something renderable, and the client turns it into pixels. Where they differ is the middle step — and that step sets the speed, the risk and the look.
- Request and context
The person’s question, their history and the data the model may use.
- Model decides
What to show: a chart, a form, a comparison, a step-by-step guide.
- Emits a description
A tool call, a layout in JSON, or HTML and script.
- Client renders
From trusted components, or inside a sandbox for code.
- Interaction returns
Clicks and inputs go back to the model as the next turn.
The usability question. Nielsen Norman Group’s 2024 analysis of generative UI names the cost: interfaces that change constantly cause usability problems, because people must relearn them. For a one-off answer that matters little; for a screen someone uses all day, it matters most.
Composable UI
How composable UI works: parts that declare their data, states and events.
Composable UI descends from component-based design — Brad Frost’s atomic design names the levels atoms, molecules, organisms, templates and pages. The enterprise version goes further: each part knows what data it reads and what a click on it means, so parts combine without glue code.
From part to app
01
Parta chart, a queue, a form, a viewer — with its data, states and events declared
cardcomponent02
Screena layout holding parts that share one state, so a click in one filters the others
page03
Appscreens joined by readable rules, with one brand, menus and permissions
pack04
Packagethe app, its data model and its agents, moved between environments as one
versionedTested once
Each part is checked on its own — values shown match the source, empty and error states hold — and every screen using it inherits that.
Learnable
People see the same screen tomorrow as today, so they get fast at it.
AI-ready
An assistant can build screens by choosing and configuring parts — the same moves a designer makes — and a person can review the result.
Side by side
Generative UI vs composable UI on consistency, speed, safety, permissions and testing.
Catalog-based generative UI sits between the two ends, and for many products it is the practical middle: the model chooses the layout, but only from parts that were built and tested in advance.
| Generated code | Generated from a catalog | Composable UI | |
|---|---|---|---|
| What the model emits | HTML and script | A layout of approved components | A choice and arrangement of parts, at build time |
| Consistency | Varies per request | Same parts, varying layout | Same screen every time |
| Speed to show | Slowest — the page is written first | Fast — description, then native parts | Fastest — the screen already exists |
| Safety | Untrusted code: needs a sandbox | Data only, from a trusted catalog | Parts reviewed before anyone sees them |
| Permissions | Whatever the generated code fetches | The host’s components decide | Enforced by the platform on every read |
| Testing | Hard: every render is new | Test each component, sample layouts | Test each part once; screens inherit it |
| Best for | Exploratory, one-off answers | Assistant replies with rich elements | Daily operational work at scale |
Decision guide
When to use generative UI and when to compose the screen.
Two questions settle most cases: how often will people use this screen, and what happens if it shows the wrong thing?
High stakes
Catalog-based answersAn assistant answers a question about a case with a chart or a table — drawn only from approved parts, under the person’s permissions.generate from a catalog
Compose itReview queues, approvals, case files: a stable screen people learn, built from tested parts, permissions on every read.composable UI
Low stakesGenerate freelyExplaining a concept, comparing options, a learning aid. Variety is a feature here.generative UI
Compose, then let AI build itDashboards and internal tools: an assistant assembles the screen from parts, a person approves, and it stays put.AI-composed
Asked onceUsed every dayIf you do generate interfaces
- Treat output as untrustedOWASP lists improper handling of model output as a top risk for LLM applications: escape it, never run it unchecked.
- Prefer a catalogLet the model choose from components you built and tested, not write new ones.
- Sandbox any codeGenerated script runs isolated from the page, its cookies and its network.
- Check permissions on the serverA generated screen must not reach data the person could not open anyway.
- Keep what was shownLog the description that produced each screen, for support and audit.
On Botminds
How Botminds combines composable UI with an AI that builds it.
Botminds takes the composable side and puts AI in the builder’s seat. Piper composes pages from the platform’s cards with the same tools a person uses in the designer, so every screen is reviewable, themed and governed from the start.
149 card types
Parts that already know your collections: charts, queues, viewers, chat with an agent.
No wiring
Cards declare what a click means; the page keeps one state and every card re-reads on its own.
Custom cards as data
A new card is built in the Card Builder, cleaned or sandboxed, with no platform release.
Permissions on every read
The server decides what each person may see, whoever built the page.
A page, by conversation
You
Add a Supplier detail page: each supplier’s invoices as a table, with a status chart. Clicking a supplier on Payables overview should open it, filtered.
Agent
Plan: 1) a new split page with a records table and a status chart over Invoices; 2) a rule on Payables overview — a click on a supplier opens Supplier detail filtered to that supplier; 3) check both pages with live data. Shall I go ahead?
Read the full design in composable UI, and build a page in the Academy lessons pages and cards and shaping the experience.
Questions people ask
Generative UI vs composable UI: common questions.
The technology behind itComposable UIPages, packs and 149 card types→What is generative UI?
Generative UI is a user interface that an AI model produces at run time for a specific request — choosing which components to show, describing a layout for the client to draw, or writing a complete interactive page. Google describes it as a model generating not only content but an entire user experience.
What is the difference between generative UI and composable UI?
Generative UI is produced by a model for each request and can differ every time. Composable UI is assembled from ready-made parts with declared data, states and events, and stays stable. Generative UI fits one-off answers; composable UI fits screens people use every day.
What are examples of generative UI?
Google’s dynamic view in the Gemini app and generative UI in AI Mode in Search; apps built with the Vercel AI SDK that render tool results as React components; agents using A2UI to send layouts that a client draws from its own components; and MCP Apps, which show a tool server’s own HTML in a sandboxed frame.
Is generative UI safe?
It depends on what the model emits. A layout drawn from a trusted catalog sends data, not code, and is far safer than generated HTML and script, which must be treated as untrusted output and run in a sandbox. In every case, data access must be checked on the server.
What is A2UI?
An open-source project from Google under the Apache 2 licence, introduced in December 2025, that defines a declarative format for agent-generated interfaces. Agents describe components by reference to a catalog the client already trusts, and the client renders them with its own native widgets.
What is composable UI architecture?
Screens built from independent parts with declared inputs, outputs and events, joined by a shared state rather than direct references between parts, and grouped into apps with readable rules between screens.
Can generative UI and composable UI work together?
Yes. The common pattern is a stable composed app for daily work, with an assistant that answers questions using catalog components, and an AI builder that composes new screens from tested parts for a person to approve.
Does generative UI replace designers?
It moves their work. Nielsen Norman Group describes a shift to outcome-oriented design: designers set the goals, the required and excluded information, and the constraints the model works within, and test what it produces.
Sources
- Google Research: Generative UI — a rich, custom, visual interactive user experience for any prompt (November 2025)research.google
- Nielsen Norman Group: Generative UI and Outcome-Oriented Design (2024)nngroup.com
- Vercel AI SDK: Generative user interfacesai-sdk.dev
- Google Developers: Introducing A2UI (December 2025)developers.googleblog.com
- Model Context Protocol blog: MCP Apps — bringing UI capabilities to MCP clients (January 2026)blog.modelcontextprotocol.io
- Brad Frost: Atomic Design, chapter 2atomicdesign.bradfrost.com
- OWASP Top 10 for LLM Applications 2025: LLM05 Improper Output Handlinggenai.owasp.org
Read next
How to build internal tools with AIThree ways to do it, a five-step method, and the checks before go-live→Vibe coding vs low codeGenerated source code or a platform’s parts: what each gives you to run→AI agent vs chatbotWhat changes when the thing you chat with can act in your systems→All guidesEvery explainer, by topic→
See it on
your own work.
Bring one process and its documents. We’ll show you the agents, the controls and the record, running on your data.