Vercel's json-render lets AI build a UI from your approved components

A model asked to write UI code at run time can import any package. It can also set a class name your design system does not use.

Vercel Labs released json-render to answer that. The README pitch is to build dynamic UIs from prompts without losing reliability. The idea is called generative UI. You define a list of components and the shape of each one's props. The AI picks from that list and fills in the values. Your own React, Vue or Svelte code then paints the result. The repository is Apache-2.0 and holds 19,030 stars on GitHub. It ranks 6th on Trendshift's daily list on 7 November 2026.

What the AI is allowed to produce

The AI never writes raw UI code. It returns a JSON spec that matches a schema you wrote. The schema lists the components it can use: a Card, a Metric, a Button. The schema also lists each component's props and the allowed values. A spec that names a component outside the list is refused by the validator. A prop that misses the schema is refused the same way.

The README says this makes the output guardrailed and predictable. The effect is simple. The AI cannot use a component your design system does not have. It cannot invent a prop. The worst a model can do is pick the wrong card. That is a smaller fault than a screen that fails to render.

What it draws, and where

The README names eleven frameworks json-render has a renderer for. The list covers React, Vue, Svelte, SolidJS, React Native, Next.js, TanStack Start, Remotion, React PDF, React Email, and Ink. The same spec can paint a web page or a mobile app. It can also paint a PDF, an email, a video or a terminal screen. All of these come from one AI call.

Version 0.22.0 was released on 4 November 2026 and adds a Chat SDK renderer. The new @json-render/chat package turns the same JSON spec into a card. The card posts natively on Slack, Microsoft Teams and other chat platforms. The streamCard function streams the card into a thread. The card edits itself as elements arrive from the model.

What the project does not claim

The README does not name a model or a vendor. The example in the Chat SDK section uses a Claude Haiku 4.5 placeholder. The project says it works with any model that can return JSON.

json-render also does not publish a benchmark of how often an AI produces a usable spec. The 19,030 stars and the Trendshift ranking are the only outside signals so far. A team that wants to try it still has to write its own component list and its own schema. The guardrail is only as tight as that schema.

Source

• vercel-labs/json-render, Vercel Labs on GitHub.
• json-render v0.22.0 release, Vercel Labs.
• Trendshift daily ranking, 7 November 2026.