json-render

json-render: AI-Generated UI with Guardrails

Build AI-powered dashboards, widgets, apps, and data visualizations from prompts — safely constrained to React components you define. Open source, fast, and predictable.

Try: "Create a login form" or "Build a feedback form with rating"
render
waiting...
npm install @json-render/core @json-render/react
Get StartedGitHub

How json-render Works

01

Define Your Catalog

Set the guardrails. Define which components, actions, and data bindings AI can use in your json-render application.

02

Users Prompt

End users describe what they want. AI generates JSON constrained to your catalog for safe, predictable output.

03

Render Instantly

Stream the response. Your React components render progressively as JSON arrives from the AI model.

Define Your json-render Catalog

Use TypeScript and Zod to define components, actions, and validation functions.

import { createCatalog } from '@json-render/core';
import { z } from 'zod';

export const catalog = createCatalog({
  components: {
    Card: {
      props: z.object({
        title: z.string(),
        description: z.string().nullable(),
      }),
      hasChildren: true,
    },
    Metric: {
      props: z.object({
        label: z.string(),
        valuePath: z.string(),
        format: z.enum(['currency', 'percent']),
      }),
    },
  },
  actions: {
    export: { params: z.object({ format: z.string() }) },
  },
});

AI Generates JSON

Constrained output that your React components render natively with json-render.

{
  "key": "dashboard",
  "type": "Card",
  "props": {
    "title": "Revenue Dashboard",
    "description": null
  },
  "children": [
    {
      "key": "revenue",
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "valuePath": "/metrics/revenue",
        "format": "currency"
      }
    }
  ]
}

json-render Features

Everything you need to build AI-powered UIs with confidence and control.

Guardrails

AI can only use components you define in the catalog. No unexpected outputs.

Streaming

Progressive rendering as JSON streams from the AI model for instant feedback.

Data Binding

Two-way binding with JSON Pointer paths for dynamic data updates.

Actions

Named actions handled by your application with full type safety.

Visibility

Conditional show/hide based on data state or authentication.

Validation

Built-in and custom validation functions using Zod schemas.

Frequently Asked Questions

What is json-render?

json-render is an open-source library that enables AI-generated UIs with guardrails. It lets you define a catalog of React components that AI can use, ensuring predictable and safe output for dashboards, widgets, and data visualizations.

Is json-render free to use?

Yes, json-render is completely free and open-source under the Apache-2.0 license. You can use it in both personal and commercial projects without any restrictions.

Which AI models work with json-render?

json-render works with any AI model that can output JSON, including OpenAI GPT-4, Anthropic Claude, Google Gemini, and open-source models. It integrates seamlessly with the Vercel AI SDK for easy implementation.

Does json-render support streaming?

Yes, json-render fully supports progressive streaming. Components render incrementally as JSON arrives from the AI model, providing instant visual feedback to users and improving perceived performance.

Start Building with json-render

Install json-render and create your first AI-powered UI in minutes.

npm install @json-render/core @json-render/react
Read DocumentationQuick Start Guide

Last updated: January 2026 • Version 0.2.0