json-render

json-render is a TypeScript framework for building Generative UI: interfaces that AI models generate from natural language prompts but that render through components you control. Instead of letting a model emit raw HTML or arbitrary code, you define a catalog of components and actions, the model produces JSON matching that catalog's schema, and a renderer turns the JSON into real UI. It's aimed at developers building AI-driven dashboards, chat apps, or agents that need to produce interfaces dynamically without giving up control over what gets rendered.

The project is maintained by Vercel Labs and ships as a set of scoped npm packages (@json-render/core plus framework-specific renderers), so you install only what your stack needs.

Key features

• Guardrailed output: AI can only use components and actions you've defined in the catalog, so generated UIs can't escape your schema.
• Predictable JSON: output is validated against a Zod-based schema every time, which avoids the brittleness of parsing free-form model text.
• Streaming rendering: specs can be rendered progressively as the model streams its response, instead of waiting for the full payload.
• Cross-platform renderers: the same catalog can target React, Vue, Svelte, SolidJS, and React Native from a single source of truth.
• Pre-built component sets: 36 shadcn/ui components, 25+ React Native components, and 20 React Three Fiber components are ready to use out of the box.
• Format-specific renderers: beyond web and mobile UI, there are renderers for video (Remotion), PDF documents (react-pdf), HTML email (react-email), terminal UIs (Ink), OG images (Satori), and 3D scenes (React Three Fiber, including Gaussian splatting).
• Full app generation: the Next.js and TanStack Start renderers can turn specs into full apps with routes, layouts, SSR, and metadata.
• State and devtools integrations: adapters exist for Redux, Zustand, Jotai, and XState, plus a devtools package with panel UI, event store, and stream taps across React, Vue, Svelte, and Solid.
• Directives: pre-built helpers like $format, $math, $concat, $count, $truncate, $pluralize, $join, and $t for i18n reduce the need for custom prop transformation logic.
• MCP integration: a dedicated package connects json-render output to MCP-compatible clients like Claude, ChatGPT, Cursor, and VS Code.

Ideal use cases

json-render fits when you're building an AI feature that needs to produce structured, interactive UI rather than plain text, for example an AI dashboard builder, a chat agent that renders cards and charts instead of markdown, a report generator that outputs PDFs or emails from a prompt, or an MCP app that needs to render UI inside Claude, ChatGPT, or an IDE. It also works well if you need the same AI-generated spec to render across multiple surfaces (web, mobile, video, email) without rewriting generation logic for each.

It's not a good fit if you need the model to produce truly open-ended, arbitrary UI (custom layouts, novel components, free-form styling) since output is constrained to your predefined catalog by design. It's also overkill for static UIs that don't need AI generation at all, or for teams that just want a quick low-code form builder without the AI generation layer. If your app doesn't involve a model producing the spec, a simpler renderer or existing component library is probably a better fit.

Installation

Install the core package plus the renderer for your framework or output target. Examples:

# React
npm install @json-render/core @json-render/react

# React with pre-built shadcn/ui components
npm install @json-render/shadcn

# React Native
npm install @json-render/core @json-render/react-native

# Video (Remotion)
npm install @json-render/core @json-render/remotion

# PDF documents
npm install @json-render/core @json-render/react-pdf

# HTML email
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render

# Vue
npm install @json-render/core @json-render/vue

# Svelte
npm install @json-render/core @json-render/svelte

# SolidJS
npm install @json-render/core @json-render/solid

# Terminal UIs
npm install @json-render/core @json-render/ink ink react

# Next.js (routes, layouts, SSR, metadata)
npm install @json-render/core @json-render/react @json-render/next

# 3D scenes
npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three

After installing, define a catalog with defineCatalog (components and actions, described with Zod schemas), then build a registry with defineRegistry that maps catalog entries to actual component implementations. Pass an AI-generated or hand-written spec plus the registry to <Renderer /> to render it. The README includes full examples for React, Vue, Svelte, Solid, shadcn/ui, React Native, Remotion, React PDF, React Email, and React Three Fiber.