Generative UI Gets Practical with json-render and jev

Most AI products still put the model inside a fixed chat window. That works for answers. It is a weak fit for booking flows, support checklists, or ops dashboards that need cards, forms, tables, and actions.

Generative UI means the model helps compose the interface. The useful version is not freeform pixels or unreviewed React. It is a model that selects from a catalog of components and actions your team already owns.

This post covers Vercel Labs' json-render, the experimental jev pairing, where AI Gateway fits, and a small interactive demo you can try below.

Why jev is getting attention on Vercel AI Gateway

Vercel reported that Jev was adopted faster than any other model in AI Gateway history. In the first day, TypeSafe AI reached about 13% of teams, roughly 2x the GPT-5.6 family and 6x Fable 5.1.

Source: Vercel on X.

Jev is free on Vercel AI Gateway until September 25, which is a practical window to try typesafe-ai/jev on real composition workloads.

Source: Vercel Developers on X.

Adoption is not the same as production fitness. It does show demand for models that are good at structured decisions, not only long text.

Fixed chat vs Generative UI

Fixed:   request -> LLM text -> chat bubble
Generative UI: request -> choose composition -> render approved components

The application still owns components, data access, handlers, validation, and permissions. A catalog gives the model room to compose without owning the product.

What json-render contributes

json-render is a Generative UI framework from Vercel Labs:

1. You define a catalog (components, actions, Zod props).
2. The model emits a JSON Spec constrained to that catalog.
3. Your real React (or RN) components render it.
4. SpecStream can stream JSONL patches so UI appears progressively.

The catalog is a product boundary. Creativity stays inside the design system.

Why token-by-token UI trees get slow

Classic structured output asks a large model to write a full JSON tree token by token. For UI that tree can be wide and deep. Time to first useful render suffers.

Chris Tate's public experiment paired json-render with jev (TypeSafe AI), a structured decision model, via experimental_composeSpec and experimental_createEvaluator.

Demo from Chris Tate on X.

jev focuses on which components and where they go. Your renderer still draws the UI.

Architecture with Vercel AI Gateway

Client -> your API (server) -> AI Gateway (typesafe-ai/jev) -> Spec -> React

import { experimental_createEvaluator } from "@json-render/core";
 
const evaluate = experimental_createEvaluator({
  apiKey: process.env.AI_GATEWAY_API_KEY!,
  model: "typesafe-ai/jev",
});

Treat experimental_* APIs as unreleased and pin versions. Confirm Gateway permits TypeSafe AI for your team. Validate every Spec before render. Handle finish, limit, and unavailable.

Try a catalog composition (interactive)

The playground below sends its prompt to a server route that composes a Spec with live jev through Vercel AI Gateway. The API key stays on the server and never enters the browser bundle. If the route is unavailable, the playground shows an inline error state.

When to use which approach

Checklist before shipping

• Keep AI_GATEWAY_API_KEY server side only
• Confirm Gateway access for typesafe-ai/jev
• Validate catalog + Spec with Zod
• Cap maxElements / maxSteps / maxDepth
• Provide a fixed UI fallback
• Measure your own latency and cost (do not copy the demo timings)

Generative UI does not replace frontend engineering. It makes catalog quality, actions, and validation more important. The model becomes a layer between intent and capabilities you already shipped.

References

1. json-render and @json-render/core API
2. vercel-labs/json-render
3. Chris Tate: json-render + jev demo (X)
4. Vercel: Jev fastest adoption on AI Gateway (X)
5. Vercel Developers: Jev free on AI Gateway until Sept 25 (X)