json-render: The Generative UI Framework for Dynamic Interfaces

Introduction

json-render is an innovative Generative UI framework developed by Vercel Labs. It empowers developers to build dynamic and personalized user interfaces by leveraging AI to generate UI specifications from natural language prompts. The framework ensures reliability and predictability by allowing developers to define a catalog of components and actions, effectively setting guardrails for the AI's output. This approach combines the flexibility of AI generation with the control and safety of structured UI development.

Installation

Getting started with json-render is straightforward. You can install the core package along with specific renderers for your chosen framework:

# for React
npm install @json-render/core @json-render/react
# for React with pre-built shadcn/ui components
npm install @json-render/shadcn
# or for React Native
npm install @json-render/core @json-render/react-native
# or for Vue
npm install @json-render/core @json-render/vue
# or for Svelte
npm install @json-render/core @json-render/svelte
# or for SolidJS
npm install @json-render/core @json-render/solid
# for full Next.js apps
npm install @json-render/core @json-render/react @json-render/next
# for 3D scenes
npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three
# for terminal UIs
npm install @json-render/core @json-render/ink ink react
# for PDF documents
npm install @json-render/core @json-render/react-pdf
# for HTML email
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
# for video
npm install @json-render/core @json-render/remotion

Examples

json-render boasts extensive cross-platform support, allowing you to render AI-generated UI specifications across a wide array of environments. Here are some of the supported renderers:

Web Frameworks: React, Vue, Svelte, SolidJS, with pre-built shadcn/ui components available.
Mobile: React Native for native mobile applications.
Full-stack: Next.js for building complete applications with routes, layouts, and SSR.
3D Scenes: React Three Fiber for creating immersive 3D experiences, including Gaussian Splatting.
Video: Remotion for generating dynamic videos.
Documents: React PDF for creating PDF documents from UI specs.
Email: React Email for generating HTML/plain-text emails.
Images: Render to SVG/PNG output for OG images or social cards.
Terminal UIs: Ink for interactive command-line interfaces.

The framework's core idea involves defining a component catalog, implementing these components, and then rendering AI-generated JSON specifications. For instance, a basic React setup looks like this:

import { defineRegistry, Renderer } from "@json-render/react";
// ... catalog definition ...

const spec = {
  root: "card-1",
  elements: {
    "card-1": {
      type: "Card",
      props: { title: "Hello" },
      children: ["button-1"],
    },
    "button-1": {
      type: "Button",
      props: { label: "Click me" },
      children: [],
    },
  },
};

// defineRegistry creates a type-safe component registry
const { registry } = defineRegistry(catalog, { components });
<Renderer spec={spec} registry={registry} />;

Why Use json-render?

json-render stands out as a Generative UI framework due to several key advantages:

Guardrailed: AI can only utilize components defined in your custom catalog, ensuring controlled and safe output.
Predictable: The JSON output consistently matches your predefined schema, guaranteeing reliable results every time.
Fast: It supports streaming, allowing UIs to render progressively as the AI model responds, leading to a faster user experience.
Cross-Platform: Build UIs for web (React, Vue, Svelte, Solid), mobile (React Native), video, PDF, email, 3D, and even terminal interfaces from the same component catalog.
Batteries Included: Comes with 36 pre-built shadcn/ui components, ready for immediate use in web projects.