Vercel's answer to 'what if LLMs could only use your UI kit'
A framework that lets AI generate interfaces by picking from a pre-approved component catalog, outputting JSON you render safely.

What it does
json-render is a generative UI framework where you define a catalog of components and actions with Zod schemas, then let an LLM generate JSON specs that reference only those approved building blocks. You render the resulting tree with framework-specific renderers. It is essentially a contract layer between AI models and UI code: the model never emits raw HTML or arbitrary logic, only structured references to components you already shipped.
The interesting bit
The breadth is the point. The same catalog definition can target React, Vue, Svelte, Solid, React Native, Next.js apps with routes and SSR, Remotion videos, React PDF documents, React Email, terminal UIs via Ink, and even 3D scenes via React Three Fiber (Gaussian splatting included). There are also adapters for Redux, Zustand, Jotai, and XState stores, plus MCP integration for Claude, ChatGPT, Cursor, and VS Code. The framework tries to own the entire pipeline from prompt to pixels across every surface Vercel cares about.
Key highlights
- 36 pre-built shadcn/ui components available out of the box, plus 25+ standard React Native components
- Streaming JSON parser with progressive rendering as the model responds
- Flat spec format with root key and elements map, designed for deterministic tree reconstruction
- Built-in directives for formatting, math, i18n, and string manipulation ($format, $math, $t, etc.)
- Framework-agnostic devtools with React, Vue, Svelte, and Solid adapters
- YAML wire format alternative with streaming parser and AI SDK transform
Caveats
- The README is thorough on package listings but light on how the AI prompting actually works, how streaming handles partial or malformed JSON, and what happens when a model hallucinates a component name outside the catalog
- The “batteries included” claim is accurate for shadcn/ui, but other renderers like Vue, Svelte, and Solid show placeholder snippets rather than full implementations, suggesting varying maturity
- No visible benchmarks or comparisons against simpler approaches like structured output with React Server Components
Verdict
Worth evaluating if you are building AI-generated dashboards, reports, or multi-surface content and need a single schema to span web, mobile, video, and documents. Probably overkill if you just need an LLM to emit a few React components with strict JSON mode.