JSON Render — The Generative UI Framework by Vercel

Introduction

JSON Render is a framework from Vercel Labs that bridges LLM outputs and interactive UI. Instead of returning plain text, an LLM produces a JSON schema describing a component tree, and JSON Render turns that schema into fully interactive React components on the client.

What JSON Render Does

• Renders interactive React components from JSON schemas produced by LLMs
• Maps schema nodes to your own component library for consistent design
• Handles nested layouts, event handlers, and dynamic data binding
• Supports streaming schemas so the UI builds progressively as the LLM generates
• Provides a type-safe component registry for mapping schema keys to React components

Architecture Overview

The framework operates as a rendering layer between an LLM backend and a React frontend. The LLM generates structured JSON describing the desired UI (component types, props, children, layout). JSON Render walks this tree, resolves each node against a developer-defined component map, and renders the result as a live React tree. Streaming mode allows partial schemas to render incrementally.

Self-Hosting & Configuration

• Install via npm and add to any React or Next.js project
• Define a component map linking schema keys to your React components
• Configure the LLM prompt to output the expected JSON schema format
• Works with any LLM provider that supports structured output (OpenAI, Anthropic, etc.)
• No additional backend infrastructure required beyond your existing LLM API

Key Features

• Decouples UI rendering from LLM logic so models describe intent, not code
• Streaming support renders UI progressively as tokens arrive
• Type-safe component registry prevents runtime mismatches
• Works with any React component library (shadcn/ui, Material UI, custom)
• Lightweight with no heavy runtime dependencies

Comparison with Similar Tools

• Vercel AI SDK — general AI streaming vs. dedicated generative UI rendering
• Streamlit — Python-first data apps vs. React-first generative interfaces
• Gradio — ML demo builder vs. production-grade component rendering from schemas
• Chainlit — chat-focused AI UI vs. arbitrary component tree generation

FAQ

Q: Do I need to use Next.js? A: No. JSON Render works with any React application, though it integrates well with Next.js and the Vercel AI SDK.

Q: Can the LLM generate arbitrary HTML? A: No. The LLM generates JSON schemas that map to your pre-registered components, which prevents injection risks and ensures design consistency.

Q: Does it support non-React frameworks? A: Currently React is the primary target. Community adapters for other frameworks may emerge.

Q: How do I handle user interactions in generated UIs? A: Components in your registry can include event handlers. The schema can reference handler keys that your app resolves at render time.

Sources

• https://github.com/vercel-labs/json-render
• https://json-render.vercel.app/