json-render

json-render is an open Generative UI stack from Vercel Labs. You define a catalog of components and actions with Zod schemas, map each type to real React (or Vue, Svelte, Solid, React Native) code, and let the model stream a JSON UI tree. The renderer only mounts types you registered, so free-form HTML and random props never hit the page. The monorepo also covers Next.js full apps, shadcn packs, Remotion video, React PDF, email, terminal Ink UIs, and MCP app surfaces from the same catalog idea.

Most AI UI demos still dump raw JSX or markdown and hope nothing breaks. Founders shipping agent dashboards, copilots, and personalized product surfaces need the opposite: dynamic screens that stay on-brand and type-checked. json-render is the practical middle path — AI fills the tree, you own the design system — and it is already packaged for the stacks product teams actually ship.

Install @json-render/core plus a renderer package. defineCatalog with your components and actions, defineRegistry to bind real UI, then pass the model’s JSON spec into Renderer. Specs stream as they arrive. Use @json-render/shadcn for a ready catalog, or @json-render/next when the JSON should become routes and layouts. Actions stay first-class so buttons and agent tools share one schema.

Not another chat UI kit and not free-form codegen into your repo. Guardrails are the product: catalogs, schemas, progressive stream render. Complementary to shadcn/lint (keep agents inside your design system) — this one is how the agent draws the screen inside those rails.

• Public demo available

• shadcn/lint