Development · Web app
json-render
Generative UI framework rendering LLM JSON streams into predefined components safely
json-render is an open-source framework from Vercel Labs for building generative user interfaces. Instead of returning raw markdown or arbitrary code, LLMs output structured JSON constrained to a predefined catalog of components, actions, and data bindings. The client progressively streams and renders the interface across React or React Native, with support for exporting the output as standalone Next.js code.
What it's for
- Render AI tool results and chat responses into structured, interactive dashboards and forms
- Constrain LLM interface generation to an approved set of design system components
- Stream dynamic user interfaces progressively as JSON arrives from language models
- Export AI-generated UI prototypes as standalone Next.js and Tailwind source code
Features
- Catalog guardrails defining allowed components, props schemas, and actions
- Progressive streaming renderer for React and React Native
- catalog.prompt() utility to generate AI system prompts directly from component schemas
- Two-way state management and data binding ($state, $item, $index, $bindState)
- Standalone code export via @json-render/codegen into Next.js and Tailwind projects
- Comprehensive UI catalog including metrics, graphs, tables, forms, and dialogs
Pricing
Open source. Free and open source
Details
- Type
- Web app
- Category
- Development
- Topic
- Generative UI
- Open source
- Yes
- Platforms
- Code library, Web, iOS, Android
- For
- React and React Native developers building AI chat, agent, or prompt-driven interfaces
- Alternative to
- Vercel AI SDK Generative UI
- Tags
- generative ui, react, react native, llm, ai sdk, structured outputs, ui components
Why it was saved
- @rauchg: Building block for LLM-driven UI: instead of free-form output, the model emits a guardrailed component schema (Card, Badge, Heading, Select, Textarea, Button, Stack, Text, etc.) that renders predictably and fast.
- @ctatedev: Pairs the predictability and guardrails of Generative UI with traditional code generation: you can prompt a dashboard, form or widget, watch it render from a safe component set, then export editable Next.js + Tailwind source instead of being locked into runtime JSON.
- @meabed: Shows a concrete pattern for turning AI tool results into structured, interactive UI instead of plain markdown text.
- @ctatedev: Lets a builder constrain generative AI UI to a custom component catalog with minimal prompt engineering — the AI gets a complete, up-to-date system prompt straight from the schema.
- @ctatedev: Enables dynamic, personalized per-user UIs (UGI) without sacrificing reliability — a pattern for building prompt-driven interfaces in apps; the video demos a GitHub-style interface generated on an iPhone from prompts like "Github" and "Only show issues on the first day".
- @ctatedev: A new way to surface agent work as interactive UI; powered by AI SDK's experimental HarnessAgent + json-render. Reference implementation is called `harness-chat`.
Related
Curated directory of crafted React, Tailwind, and shadcn UI components.
Refined, copy-paste React and Tailwind CSS components with micro-interactions
Auto-generates pixel-perfect skeleton screens directly from your real rendered DOM
Modern UI component library built on top of Base UI
React component library for Apple-style liquid glass and blur effects.
Free copy-paste React and CSS micro-interactions for modern web interfaces
Updated