# JSON Render — The Generative UI Framework by Vercel

> A framework for rendering dynamic, interactive UI components from JSON schemas generated by LLMs. Build generative user interfaces that adapt to AI outputs in real time.

## Install

Save as a script file and run:

# JSON Render — The Generative UI Framework by Vercel

## Quick Use
```bash
npm install @vercel/json-render
# Import and render AI-generated UI schemas in your React app
# import { JsonRender } from "@vercel/json-render";
# <JsonRender schema={aiGeneratedSchema} components={componentMap} />
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-b083378d
Author: Script Depot