vercel-labs/json-render

json-render is a framework from Vercel Labs for what the README calls Generative UI. The idea is to let an AI model produce user interfaces from natural-language prompts, but only by picking from components and actions the developer has defined ahead of time. The AI does not write raw markup. It outputs a JSON spec that has to match a schema, and the framework renders that spec using your real components. The README sets out the trade-off plainly. The model is guardrailed so it can only use components that exist in your catalog. The output is predictable because the JSON must match the schema every time. Specs can stream and render progressively while the model is still responding. The same catalog can drive multiple platforms. Getting started is three steps. First, define a catalog with defineCatalog, declaring components such as Card, Metric, or Button along with Zod schemas for their props and a list of named actions like export_report or refresh_data. Second, define how each component actually renders by calling defineRegistry. Third, pass the AI-generated spec into a Renderer and the framework draws the tree. The project is split across many packages. There is a core package for schemas, catalogs, and stream utilities, plus framework-specific renderers for React, Vue, Svelte 5, SolidJS, and React Native. Other renderers cover Next.js apps with routing and SSR, Remotion video, react-pdf documents, React Email, Ink terminal UIs, Satori-based images, and react-three-fiber 3D scenes. There are also adapters for Redux, Zustand, Jotai, and XState, a devtools panel, an MCP integration, and a YAML wire format.