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 and lack of safety in AI-generated UIs by constraining the AI to a predefined catalog of components and actions, ensuring the output is reliable, predictable, and matches a specific schema.

How it works

The framework operates by separating the UI definition from the implementation:

  1. Catalog Definition: Developers define a "catalog" using Zod schemas to specify which components (and their required properties) and actions the AI is allowed to use.
  2. Registry Mapping: Developers create a registry that maps these catalog definitions to actual UI components (e.g., in React, Vue, Svelte, or SolidJS).
  3. Rendering: The AI generates a JSON specification (spec) based on the catalog. The Renderer then takes this JSON spec and the registry to safely render the final UI on the target platform.

Who it’s for

Frontend developers and AI engineers who want to build AI-driven interfaces that can be streamed and rendered progressively across multiple platforms (web, mobile, video, PDF, email, and 3D) without sacrificing design consistency or reliability.

Highlights

  • Cross-Platform Support: Works with React, Vue, Svelte, SolidJS, React Native, Remotion (video), React PDF, React Email, and Three.js (3D).
  • Guardrailed Output: AI is restricted to a specific component catalog, preventing it from generating invalid or unsupported UI elements.
  • Batteries Included: Includes 36 pre-built shadcn/ui components for rapid development.
  • Full App Capabilities: Specialized renderers for Next.js and TanStack Start allow JSON specs to become full applications with routes, layouts, and SSR.
  • Developer Tooling: Provides a framework-agnostic devtools core with a spec tree, state editor, and DOM picker.

Related

  • Project
    vercel/ai-elements

    A React component library built on shadcn/ui that provides pre-built, customizable UI elements for building AI-native applications faster.

  • 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
    thesysdev/openui

    A full-stack Generative UI framework that uses a compact, streaming-first language to render structured UI components from LLMs more efficiently than JSON.

  • Project
    miurla/morphic

    An AI-powered search engine that uses a generative UI to render rich, interactive components and cited answers instead of plain text.

  • Project
    steedos/steedos-platform

    An AI-native infrastructure that uses a universal metadata standard to enable the instant generation of enterprise software from text descriptions.