vercel-labs/json-render

The Generative UI framework

What it solves

json-render is a Generative UI framework that allows AI to create dynamic, personalized user interfaces from natural language prompts. It solves the problem of unpredictability in AI-generated UIs by constraining the AI to a predefined catalog of components and actions, ensuring that the output is safe, predictable, and matches a specific schema.

How it works

Developers define a Catalog (the set of available components and their prop schemas using Zod) and a Registry (the actual UI implementations of those components). The AI generates a JSON specification (spec) based on the catalog's prompt, and the framework's Renderer transforms that JSON into a live interface across various platforms.

Who it’s for

Frontend developers and AI engineers building applications where the UI needs to adapt based on AI responses, across web (React, Vue, Svelte, Solid), mobile (React Native), 3D (Three.js), terminal (Ink), or document formats (PDF, Email, Images).

Highlights

  • Cross-Platform Support: A single component catalog can render to web, mobile, 3D scenes, PDFs, HTML emails, and terminal UIs.
  • Guardrailed AI: AI is restricted to using only the components and actions defined in the developer's catalog.
  • Streaming Support: Includes SpecStream to progressively render the UI as the AI model responds.
  • Batteries Included: Provides 36 pre-built shadcn/ui components for rapid deployment.
  • Dynamic Logic: Supports conditional visibility and data-driven props using expressions (e.g., $state, $cond).
  • Developer Tooling: Includes a framework-agnostic devtools panel for inspecting the spec tree and state.

Related

  • Project
    thesysdev/openui

    A full-stack Generative UI framework that uses a compact, streaming-first language to let LLMs render structured, interactive components with high token efficiency.

  • Dispatch
    UIGen: Automating Production UI Generation from API Specifications

    Explore UIGen, a tool designed to generate production-ready user interfaces directly from API specs, offering full override control for developers.

  • Project
    AGenUI/AGenUI

    AGenUI is an open‑source SDK that implements Google’s A2UI protocol, enabling iOS, Android, and HarmonyOS apps to render UI components streamed in real time from LLMs. A shared C++ core parses incremental JSON updates, diffs the component tree, and dispatches native drawing commands to platform‑specific renderers. The repo includes a full component catalog, a generation Skill for LLM agents, a local “Studio” workbench, and sample playground apps for each platform.

  • Project
    sceneview/sceneview

    A multi-platform 3D and AR framework that provides a declarative, node-based API for building immersive experiences on Android, iOS, Web, and more.

  • Project
    assistant-ui/assistant-ui

    A TypeScript/React library for building production-grade AI chat interfaces with composable primitives and seamless integration with various AI backends.