json-render

下面这些要点就可以直接填进图片里的「For Example」结构，用来介绍 json-render.org 这个网站的内容： json-render

• Overview
  json-render is an open-source React library that lets AI generate real UIs (dashboards, widgets, data visualizations) from natural language prompts, with strict guardrails on components and data bindings. json-render

• Key Features

  • Catalog-based guardrails: you define the allowed React components, props, actions, and data bindings using TypeScript and Zod so AI output stays predictable and safe. json-render
  • Streaming UI rendering: JSON from the AI model streams in and your React components render progressively for instant visual feedback. json-render
  • Strong typing and validation: Zod schemas and TypeScript types ensure props, actions, and data paths are validated at build time and runtime. json-render
  • Data binding & actions: supports two-way data binding via JSON Pointer paths and typed actions handled in your own app logic. json-render

• Use Cases

  • AI-generated analytics dashboards combining metrics, charts, and filters.
  • Configurable internal tools and admin panels assembled from a safe component catalog.
  • Interactive widgets or mini‑apps embedded in SaaS products where AI lays out the UI but you keep control.
  • Rapid prototyping of product ideas by letting AI draft UI structure in JSON, then refining it in React. json-render

• Getting Started

  • Install the core and React packages with npm install @json-render/core @json-render/react. json-render
  • Define a catalog using createCatalog with components, actions, and Zod-based prop schemas.
  • Call your AI model to generate JSON constrained to that catalog, then render it with json-render’s React primitives.
  • Follow the official “Read Documentation” and “Quick Start Guide” links on the site for step‑by‑step examples. json-render

• Pricing & Plans

  • json-render itself is free and open-source under the Apache-2.0 license, so there is no library license fee for personal or commercial projects. json-render
  • Any costs come from the AI models or infrastructure you choose (e.g., OpenAI, Claude, Gemini, or self-hosted models); json-render works with any provider that can output JSON. json-render