export const metadata = { title: "Introduction" }

# Introduction

The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability.

## What is json-render?

json-render is a **Generative UI** framework: AI generates interfaces from natural language prompts, constrained to components you define. You set the guardrails -- what components exist, what props they take, what actions are available. AI generates JSON that matches your schema, and your components render it natively on web or mobile.

Every generated interface is safe and predictable.

## Why json-render?

### Guardrailed

AI can only use components in your catalog. No arbitrary code generation. Predefined components and actions for safe, predictable output.

### Predictable

JSON output matches your schema, every time. Actions are declared by name, you control what they do.

### Fast

Stream and render progressively as the model responds. No waiting for completion.

### Cross-Platform

Render on web with React and on mobile with React Native from the same catalog and spec format.

## How it works

1. Define the guardrails - what components, actions, and data bindings AI can use
2. Prompt - describe what you want in natural language
3. AI generates JSON - output is always predictable, constrained to your catalog
4. Render fast - stream and render progressively as the model responds