Overview
json-render is an open-source library developed by Vercel Labs that provides a constrained runtime for AI-generated user interfaces. Rather than generating UIs directly, json-render requires developers to integrate an LLM (such as OpenAI GPT-4 or Anthropic Claude via Vercel AI SDK) that produces structured JSON output. The library then validates, parses, and renders this output as React components based on a developer-defined catalog.
The core design philosophy centers on guardrails: developers create a catalog that defines which components AI can reference, what props they accept, and what actions are available. When AI generates JSON output conforming to this catalog, json-render limits outputs to the predefined whitelist, reducing unexpected behavior. The library supports progressive JSONL patch streaming, allowing React components to render incrementally as patch operations arrive from the AI model.
json-render currently provides official React runtime and renderers through the @json-render/react package. Released under Apache-2.0 license, the project is maintained by Vercel Labs on GitHub. As of January 2026, the official documentation indicates version 0.2.0, though the GitHub repository has not published formal releases.
For adjacent research, compare AI design tools, AI UI design tools, AI website design tools.
Key Features
Catalog-Based Guardrails — Developers define a catalog of permitted components, their prop schemas using Zod, available actions with parameter types, and validation rules. AI-generated output must conform to this catalog whitelist, limiting outputs to controlled ranges. Final security depends on component implementations, action handlers, and authentication policies.
Progressive Streaming Rendering — Supports JSONL patch streaming where AI models output patch operations (set, add, replace, remove) line by line. The useUIStream hook applies patches incrementally, allowing React components to render progressively rather than waiting for complete responses. This approach improves perceived performance and enables immediate user feedback during generation.
Type-Safe Actions — Actions are declared by name in the catalog with parameter schemas validated through Zod. AI only declares action intent with parameters; your application implements handlers. This approach provides runtime validation and prevents AI from generating arbitrary executable code, improving controllability.
Two-Way Data Binding — Provides data binding through DataProvider and hooks like useDataValue and useDataBinding, using JSON Pointer (RFC 6901) paths for data access. This simplifies state management and path-based reads/writes, though developers still need to design data structures and component interactions.
Conditional Visibility — Components support visibility conditions based on data state, user authentication, or other runtime factors. This enables context-aware interfaces where UI elements appear or hide dynamically based on application state.
Built-In and Custom Validation — Includes common validators for email, patterns, minimum length, required fields, and other standard input validation. Developers can extend with custom validation functions defined in the catalog and provided via ValidationProvider.
Code Export Capability — Using @json-render/codegen, developers can build project-specific code generators that export UIs as standalone React code without json-render runtime dependencies. Official examples include Next.js export implementations, though generators require custom development for each project's structure and framework.
Pricing & Plans
json-render is completely free and open-source under the Apache License 2.0. There are no licensing fees, usage limits, or premium tiers.
Developers can use, modify, and distribute json-render for both personal and commercial projects, though Apache-2.0 compliance requirements apply (including copyright notices, license text, and NOTICE file preservation). The source code is publicly available on GitHub under the vercel-labs organization, and community contributions are welcomed.
While the library itself is free, operational costs depend on your implementation. Organizations using json-render are responsible for expenses related to AI model usage, API calls to LLM providers, infrastructure hosting, and compute resources. Different AI providers have varying pricing structures, and costs scale with prompt complexity and generation frequency.
Official documentation does not mention commercial support or service-level agreements. Support is available through GitHub issues, discussions, and documentation at json-render.dev. Organizations requiring enterprise-level support should evaluate partnership options independently.
Best For
- React developers building AI-powered dashboards and data visualization tools
- Product teams creating conversational interfaces where users generate UIs through natural language
- Developers who prioritize runtime validation and want schema-enforced constraints for AI-generated interfaces
- Organizations building internal tools where controlled UI generation reduces security risks
- Teams prototyping AI applications who want to export generated code for production refinement
- Open-source contributors interested in AI-generated interface technologies
- Developers integrating with Vercel AI SDK who want native compatibility with streaming responses
FAQ
Is json-render completely free to use?
Yes, json-render is completely free and open-source under the Apache License 2.0. You can use, modify, and distribute it for any purpose including commercial applications without licensing fees. However, you must comply with Apache-2.0 requirements including copyright attribution, license text inclusion, and NOTICE file preservation.
Which AI models work with json-render?
In principle, any AI model can be used, but outputs must conform to the structure defined by generateCatalogPrompt. For streaming rendering, models must output JSONL patch operations (set, add, replace, remove) line by line. Major models including OpenAI GPT-4, Anthropic Claude, and Google Gemini are compatible. Integration with Vercel AI SDK is recommended for streamlined implementation.
What are the technical requirements?
json-render declares peer dependencies of react ^19.0.0 and zod ^4.0.0. Projects using older versions may need to upgrade or isolate dependencies. You need to install @json-render/core and @json-render/react packages. For AI integration, Vercel AI SDK is recommended but optional. Developers should have familiarity with React component patterns, TypeScript, and schema validation concepts.
Does streaming work with all AI providers?
Streaming is supported through Vercel AI SDK, but the underlying AI model must support streaming responses. Most major providers including OpenAI, Anthropic, and Google support streaming, though specific implementation details vary by provider. Non-streaming models can still be used but without progressive rendering capabilities.
How do I define a component catalog?
Catalogs are defined using the createCatalog function from @json-render/core. For each component, you specify the component name, prop schema using Zod objects, whether it accepts children, available actions with parameter schemas, and validation functions. The catalog serves as both TypeScript types and runtime validation schema.
Can I use json-render in production?
json-render is at version 0.2.0, indicating early-stage development. While the library is functional with comprehensive documentation, the 0.x version suggests APIs may evolve. Teams should evaluate carefully for mission-critical applications, as long-term stability guarantees are not explicitly documented. Thorough testing and contingency planning are recommended for production deployments.
What happens if AI generates invalid JSON?
If output is syntactically invalid (unparseable JSON or malformed JSONL), the streaming parser will throw errors immediately. If output is syntactically valid but does not conform to catalog schemas, Zod validation will reject it during the validation phase. The library provides error handling hooks, but specific fallback behaviors and recovery strategies depend on your implementation. Invalid content will not render.
Is there support for server-side rendering?
Official examples demonstrate Next.js integration using App Router API routes for streaming output with client-side useUIStream rendering. Whether UI Trees can be directly rendered in SSR or Server Components is not explicitly confirmed in documentation. Developers requiring SSR should test compatibility with their specific framework and deployment environment.
How mature is the project?
Official documentation indicates version 0.2.0 as of January 2026. The GitHub repository has not published formal releases; version information primarily comes from npm packages and documentation. The project is actively maintained by Vercel Labs with comprehensive documentation at json-render.dev. Given the 0.x version number, developers should expect potential API changes and evolving best practices as the project matures.
