Compare commits

..
Author SHA1 Message Date
Chris Tate 36d232fda5 fix 2026-02-11 11:38:32 -06:00
Chris Tate ee301bf038 sidebar 2026-02-11 11:29:51 -06:00
Chris Tate a2701cb598 fixes 2026-02-10 16:54:46 -06:00
Chris Tate 599897f974 fixes 2026-02-10 16:44:47 -06:00
Chris Tate a745d9eda6 fixes 2026-02-10 16:35:04 -06:00
Chris Tate 7e2aadca1e fix chat height 2026-02-10 16:33:30 -06:00
5 changed files with 26 additions and 26 deletions
+4 -4
View File
@@ -1,8 +1,8 @@
# json-render
**The Generative UI framework.**
**The framework for User-Generated Interfaces (UGI).**
Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
Dynamic, personalized UIs per user without sacrificing reliability. Predefined components and actions for safe, predictable output.
```bash
npm install @json-render/core @json-render/react
@@ -14,7 +14,7 @@ npm install @json-render/core @json-render/remotion
## Why 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, AI generates within them:
json-render enables **User-Generated Interfaces**: dynamic UIs that end users create through natural language prompts, powered by Generative UI. You define the guardrails, AI generates within them:
- **Guardrailed** - AI can only use components in your catalog
- **Predictable** - JSON output matches your schema, every time
@@ -285,7 +285,7 @@ flowchart LR
```
1. **Define the guardrails** - what components, actions, and data bindings AI can use
2. **Prompt** - describe what you want in natural language
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
+4 -4
View File
@@ -2,13 +2,13 @@ export const metadata = { title: "Introduction" }
# Introduction
The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability.
The framework for User-Generated Interfaces (UGI). Dynamic, personalized UIs per user 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.
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 generated interface is safe and predictable.
Every interface is unique to the user, but every interface is safe and predictable.
## Why json-render?
@@ -31,6 +31,6 @@ Render on web with React and on mobile with React Native from the same catalog a
## 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
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
+8 -9
View File
@@ -10,15 +10,14 @@ export default function Home() {
{/* Hero */}
<section className="max-w-5xl mx-auto px-6 pt-24 pb-16 text-center">
<p className="text-xs sm:text-sm font-medium text-muted-foreground tracking-widest uppercase mb-4">
The Generative UI Framework
The framework for User-Generated Interfaces
</p>
<h1 className="text-4xl sm:text-6xl md:text-7xl font-bold tracking-tighter mb-6">
AI → json-render → UI
</h1>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-12 leading-relaxed">
Generate dynamic, personalized UIs from prompts without sacrificing
reliability. Predefined components and actions for safe, predictable
output.
Dynamic, personalized UIs per user without sacrificing reliability.
Predefined components and actions for safe, predictable output.
</p>
<Demo />
@@ -69,10 +68,10 @@ export default function Home() {
<div className="text-xs text-muted-foreground font-mono mb-3">
02
</div>
<h3 className="text-lg font-semibold mb-2">AI Generates</h3>
<h3 className="text-lg font-semibold mb-2">Users Generate</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
Describe what you want. AI generates JSON constrained to your
catalog. Every interface is unique.
End users describe what they want. AI generates JSON constrained
to your catalog. Every interface is unique to the user.
</p>
</div>
<div>
@@ -249,8 +248,8 @@ export default function Page() {
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{
title: "Generative UI",
desc: "Generate dynamic, personalized interfaces from prompts with AI",
title: "User-Generated Interfaces",
desc: "Dynamic, personalized UIs per user powered by Generative UI",
},
{
title: "Guardrails",
+9 -8
View File
@@ -24,12 +24,13 @@ export const metadata: Metadata = {
template: "%s | json-render",
},
description:
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
keywords: [
"json-render",
"generative UI",
"UGI",
"User-Generated Interfaces",
"AI UI generation",
"user-generated interfaces",
"generative UI",
"React components",
"React Native",
"guardrails",
@@ -43,23 +44,23 @@ export const metadata: Metadata = {
locale: "en_US",
url: "https://json-render.dev",
siteName: "json-render",
title: "json-render | The Generative UI Framework",
title: "json-render | The framework for User-Generated Interfaces",
description:
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
images: [
{
url: "/og",
width: 1200,
height: 630,
alt: "json-render - The Generative UI Framework",
alt: "json-render - The framework for User-Generated Interfaces",
},
],
},
twitter: {
card: "summary_large_image",
title: "json-render | The Generative UI Framework",
title: "json-render | The framework for User-Generated Interfaces",
description:
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
images: ["/og"],
creator: "@verabornnot",
},
+1 -1
View File
@@ -7,7 +7,7 @@
*/
export const PAGE_TITLES: Record<string, string> = {
// Home (no slug)
"": "The Generative UI\nFramework",
"": "The framework for\nUser-Generated Interfaces",
// Top-level
playground: "Playground",