JSON Render -- Generative UI Framework

The Generative UI framework. AI generates JSON specs constrained to a component catalog you define. Guardrailed, predictable, streamable, cross-platform. 15.3K stars. Actively maintained by Vercel Labs (Chris Tate). github.com/vercel-labs/json-render

Siblings in the agent-driven-UI space: json-render owns AI-generated UI through JSON specs and broad renderer packages; OpenUI -- Generative UI Language and Runtime owns a compact streaming UI language plus component-library prompt generation; Plate (PlateJS) (Plate) owns the human rich-text editing surface (Slate document model) with its own shadcn-CLI registry, AI, and MCP. Source: platejs.org/docs, 2026-06-10; Source: thesysdev/openui, 2026-07-03

Why This Matters

Traditional AI UI generation is unconstrained -- the model can hallucinate any HTML/JSX. json-render inverts this: you define the catalog of allowed components, actions, and data bindings. AI generates JSON within those guardrails. The renderer handles the rest.

This is the missing layer between AI SDK (text/tool generation) and your component library (shadcn, custom). Instead of parsing markdown or hoping the model outputs valid JSX, you get typed JSON that maps 1:1 to your components.

Packages

@json-render/directives

Ready-made directives for computed values at render time. Import only what you need.

import { format, t, math, pluralize, concat, join, count } from "@json-render/directives";

const catalog = defineCatalog(schema, {
  components: { /* ... */ },
  directives: { $format: format, $t: t, $math: math, $pluralize: pluralize },
});

Current package snapshot: @json-render/directives@0.19.0, published 2026-05-07 from vercel-labs/json-render/packages/directives; npm describes it as pre-built directives for $format, $math, $concat, $count, $truncate, $pluralize, $join, and $t. The reviewed local video thumbnail shows the directive carousel ($format, $t, $math, $pluralize, $concat, $join, $count), so the durable evidence is the package metadata plus the launch artifact, not the dark thumbnail alone. Source: npm registry, 2026-07-03; Source: X/@ctatedev and local artifact review, 2026-07-03

Core Pattern

// 1. Define catalog (guardrails)
const catalog = defineCatalog(schema, {
  components: {
    Card: { props: z.object({ title: z.string() }), description: "A card container" },
    Metric: { props: z.object({ label: z.string(), value: z.string() }), description: "Display a metric" },
  },
  actions: { refresh_data: { description: "Refresh all metrics" } },
});

// 2. Register component implementations
const { registry } = defineRegistry(catalog, {
  components: {
    Card: ({ props, children }) => <div className="card"><h3>{props.title}</h3>{children}</div>,
    Metric: ({ props }) => <div><span>{props.label}</span><span>{props.value}</span></div>,
  },
});

// 3. Render AI-generated specs
<Renderer spec={spec} registry={registry} />

Streaming

const compiler = createSpecStreamCompiler<MySpec>();
const { result, newPatches } = compiler.push(chunk);
setSpec(result); // progressive rendering as AI responds

Dynamic Props and State

{
  "type": "Icon",
  "props": {
    "name": {
      "$cond": { "$state": "/activeTab", "eq": "home" },
      "$then": "home",
      "$else": "home-outline"
    }
  }
}

Expression forms: $state (read state), $cond/$then/$else (conditional), $template (interpolation), $computed (registered functions).

Where This Fits in the Stack

Generative UI in the agent harness (Jun 2026)

@ctatedev (Chris Tate, json-render's creator) launched Generative UI for Claude Code, Codex, and Pi: the coding agent renders real UI for the user — charts, forms, 3D, anything — while it works in a sandbox, instead of only streaming text. It is powered by the Vercel AI SDK's experimental HarnessAgent (Vercel AI SDK) plus json-render, with a harness-chat reference implementation. Source: X/@ctatedev, 2026-06-15

This is the loop json-render was built for, closed end-to-end: the AI SDK drives the agent, HarnessAgent opens a UI channel back to the user, and json-render's catalog constrains what the agent may render — guardrailed generative UI inside an agent harness, not free-form JSX. Directly relevant to Sigil UI (agent-native design as a catalog/token layer the agent edits) and to Loop (an operator desk where agents could render status UI mid-run).

The reviewed video shows why this is not a decorative chat widget. The UI starts with selectable agent runtimes (Claude Code, Codex, Pi) and prompt cards such as "Build & test a library" or "Benchmark something." The resulting agent output becomes rendered comparison UI: sections, charts, tables, and bars for Zig/Rust/Go tradeoffs, instead of a wall of markdown. Treat this as a default route for agent result surfaces that need structured visual proof. Source: local video artifact review, 2026-07-01

Current version/status snapshot: @json-render/core, @json-render/react, and @json-render/shadcn are all 0.19.0 on npm, published 2026-05-07. Repository vercel-labs/json-render default HEAD is e2d00faeaabe2871ca18a4594a9ec39a245f9b6c; the v0.19.0 tag is 0bbe6ed6394b23b5aee25320d03c9b7ac717e5b7. Source: npm registry; git ls-remote, 2026-07-01

---

Timeline

• 2026-07-03 | Deep-reviewed the @json-render/directives launch artifact and refreshed package authority: @json-render/directives@0.19.0, packages/directives, repo HEAD e2d00faeaabe2871ca18a4594a9ec39a245f9b6c, v0.19.0 tag 0bbe6ed6394b23b5aee25320d03c9b7ac717e5b7. Source: X/@ctatedev, 2026-05-07; Source: npm/GitHub, 2026-07-03
• 2026-06-15 | @ctatedev launched Generative UI for Claude Code, Codex, and Pi on top of json-render + the AI SDK experimental HarnessAgent — agents render real UI (charts, forms, 3D) in-sandbox; harness-chat reference implementation. json-render at 15.3K stars. Source: X/@ctatedev, 2026-06-15
• 2026-07-01 | Deep-reviewed the Generative UI demo video and refreshed version authority: npm @json-render/* core packages at 0.19.0; repo HEAD e2d00faeaabe2871ca18a4594a9ec39a245f9b6c; v0.19.0 tag 0bbe6ed6394b23b5aee25320d03c9b7ac717e5b7. Source: npm/GitHub, 2026-07-01
• 2026-05-07 | Page created from the json-render launch — catalog-constrained generative UI, @json-render/directives, multi-renderer packages (React/Vue/Svelte/Solid/RN/Remotion/PDF/email/3D/MCP). Source: github.com/vercel-labs/json-render, 2026-05-07