export const metadata = { title: "Introduction" }

# Introduction

The framework for User-Generated Interfaces (UGI). Dynamic, personalized UIs per user without sacrificing reliability.

## What is json-render?

json-render is the framework for **User-Generated Interfaces**: dynamic UIs that end users generate through natural language prompts, powered by Generative UI. You define 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 interface is unique to the user, but every 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. Users generate - end users describe what they 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