Learning Center

Generative UI

Generative UI builds the interface for each visit at request time instead of shipping one fixed layout. These explainers cover what it is, how it differs from server-driven UI and A/B testing, and why it needs real-time state to be worth doing.

The real engine · no card · no sales call

In this topic

What is generative UI?

Generative UI is an interface assembled for each request rather than shipped as one fixed layout. The app decides what to render from data about the visit, so two people can see different screens from the same code.

Generative UI vs server-driven UI

Server-driven UI and generative UI both move layout decisions to the server. The difference is what drives the decision. Server-driven UI picks from a fixed set of components, while generative UI chooses based on live data about the visit.

What is an adaptive experience?

An adaptive experience changes in response to what a person is doing, as they do it. It is the outcome generative UI exists to deliver, a product that adjusts within the session instead of waiting for the next one.

Why generative UI needs real-time state

Generative UI decides what to render from data about the visit. If that data is stale, the interface is generated from yesterday's picture of the visitor. Real-time state is what makes a generated interface worth generating.

json-render explained

json-render is a library from Vercel for generative UI. You describe a catalog of your own components, a model returns a JSON spec that uses only those components, and json-render draws the result.

Generative UI vs static A/B testing

A/B testing splits traffic between a few pre-built variants and measures which wins. Generative UI composes the interface per visit from live data, so it is not limited to the handful of variants a team can build and maintain.

Building generative UI with an AI agent

One way to drive generative UI is to let an AI agent choose what to render from live state. The agent reads a current picture of the visit and returns a layout; the quality of that layout depends on the quality of the context it is given.

Start with the free tier

Read the ideas, then put them to work: add the SDK, define one attribute, and see an attribute updating against your own traffic in the first session. The free tier runs on the real engine: no card, no sales call.