mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-04 04:48:17 +08:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1a51cddf3b |
@@ -1,8 +1,8 @@
|
|||||||
# json-render
|
# json-render
|
||||||
|
|
||||||
**The framework for User-Generated Interfaces (UGI).**
|
**The Generative UI framework.**
|
||||||
|
|
||||||
Dynamic, personalized UIs per user without sacrificing reliability. Predefined components and actions for safe, predictable output.
|
Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install @json-render/core @json-render/react
|
npm install @json-render/core @json-render/react
|
||||||
@@ -14,7 +14,7 @@ npm install @json-render/core @json-render/remotion
|
|||||||
|
|
||||||
## Why json-render?
|
## Why json-render?
|
||||||
|
|
||||||
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:
|
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:
|
||||||
|
|
||||||
- **Guardrailed** - AI can only use components in your catalog
|
- **Guardrailed** - AI can only use components in your catalog
|
||||||
- **Predictable** - JSON output matches your schema, every time
|
- **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
|
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
|
2. **Prompt** - describe what you want in natural language
|
||||||
3. **AI generates JSON** - output is always predictable, constrained to your catalog
|
3. **AI generates JSON** - output is always predictable, constrained to your catalog
|
||||||
4. **Render fast** - stream and render progressively as the model responds
|
4. **Render fast** - stream and render progressively as the model responds
|
||||||
|
|
||||||
|
|||||||
@@ -2,13 +2,13 @@ export const metadata = { title: "Introduction" }
|
|||||||
|
|
||||||
# Introduction
|
# Introduction
|
||||||
|
|
||||||
The framework for User-Generated Interfaces (UGI). Dynamic, personalized UIs per user without sacrificing reliability.
|
The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability.
|
||||||
|
|
||||||
## What is json-render?
|
## 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.
|
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 interface is unique to the user, but every interface is safe and predictable.
|
Every generated interface is safe and predictable.
|
||||||
|
|
||||||
## Why json-render?
|
## 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
|
## How it works
|
||||||
|
|
||||||
1. Define the guardrails - what components, actions, and data bindings AI can use
|
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
|
2. Prompt - describe what you want in natural language
|
||||||
3. AI generates JSON - output is always predictable, constrained to your catalog
|
3. AI generates JSON - output is always predictable, constrained to your catalog
|
||||||
4. Render fast - stream and render progressively as the model responds
|
4. Render fast - stream and render progressively as the model responds
|
||||||
|
|||||||
@@ -10,14 +10,15 @@ export default function Home() {
|
|||||||
{/* Hero */}
|
{/* Hero */}
|
||||||
<section className="max-w-5xl mx-auto px-6 pt-24 pb-16 text-center">
|
<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">
|
<p className="text-xs sm:text-sm font-medium text-muted-foreground tracking-widest uppercase mb-4">
|
||||||
The framework for User-Generated Interfaces
|
The Generative UI Framework
|
||||||
</p>
|
</p>
|
||||||
<h1 className="text-4xl sm:text-6xl md:text-7xl font-bold tracking-tighter mb-6">
|
<h1 className="text-4xl sm:text-6xl md:text-7xl font-bold tracking-tighter mb-6">
|
||||||
AI → json-render → UI
|
AI → json-render → UI
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-12 leading-relaxed">
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-12 leading-relaxed">
|
||||||
Dynamic, personalized UIs per user without sacrificing reliability.
|
Generate dynamic, personalized UIs from prompts without sacrificing
|
||||||
Predefined components and actions for safe, predictable output.
|
reliability. Predefined components and actions for safe, predictable
|
||||||
|
output.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Demo />
|
<Demo />
|
||||||
@@ -68,10 +69,10 @@ export default function Home() {
|
|||||||
<div className="text-xs text-muted-foreground font-mono mb-3">
|
<div className="text-xs text-muted-foreground font-mono mb-3">
|
||||||
02
|
02
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold mb-2">Users Generate</h3>
|
<h3 className="text-lg font-semibold mb-2">AI Generates</h3>
|
||||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
End users describe what they want. AI generates JSON constrained
|
Describe what you want. AI generates JSON constrained to your
|
||||||
to your catalog. Every interface is unique to the user.
|
catalog. Every interface is unique.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -248,8 +249,8 @@ export default function Page() {
|
|||||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
title: "User-Generated Interfaces",
|
title: "Generative UI",
|
||||||
desc: "Dynamic, personalized UIs per user powered by Generative UI",
|
desc: "Generate dynamic, personalized interfaces from prompts with AI",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Guardrails",
|
title: "Guardrails",
|
||||||
|
|||||||
@@ -24,13 +24,12 @@ export const metadata: Metadata = {
|
|||||||
template: "%s | json-render",
|
template: "%s | json-render",
|
||||||
},
|
},
|
||||||
description:
|
description:
|
||||||
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
|
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
|
||||||
keywords: [
|
keywords: [
|
||||||
"json-render",
|
"json-render",
|
||||||
"UGI",
|
|
||||||
"User-Generated Interfaces",
|
|
||||||
"AI UI generation",
|
|
||||||
"generative UI",
|
"generative UI",
|
||||||
|
"AI UI generation",
|
||||||
|
"user-generated interfaces",
|
||||||
"React components",
|
"React components",
|
||||||
"React Native",
|
"React Native",
|
||||||
"guardrails",
|
"guardrails",
|
||||||
@@ -44,23 +43,23 @@ export const metadata: Metadata = {
|
|||||||
locale: "en_US",
|
locale: "en_US",
|
||||||
url: "https://json-render.dev",
|
url: "https://json-render.dev",
|
||||||
siteName: "json-render",
|
siteName: "json-render",
|
||||||
title: "json-render | The framework for User-Generated Interfaces",
|
title: "json-render | The Generative UI Framework",
|
||||||
description:
|
description:
|
||||||
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
|
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
|
||||||
images: [
|
images: [
|
||||||
{
|
{
|
||||||
url: "/og",
|
url: "/og",
|
||||||
width: 1200,
|
width: 1200,
|
||||||
height: 630,
|
height: 630,
|
||||||
alt: "json-render - The framework for User-Generated Interfaces",
|
alt: "json-render - The Generative UI Framework",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
twitter: {
|
twitter: {
|
||||||
card: "summary_large_image",
|
card: "summary_large_image",
|
||||||
title: "json-render | The framework for User-Generated Interfaces",
|
title: "json-render | The Generative UI Framework",
|
||||||
description:
|
description:
|
||||||
"The framework for User-Generated Interfaces (UGI). Let users generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
|
"The Generative UI framework. Generate dashboards, widgets, and apps from prompts — safely constrained to components you define.",
|
||||||
images: ["/og"],
|
images: ["/og"],
|
||||||
creator: "@verabornnot",
|
creator: "@verabornnot",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
*/
|
*/
|
||||||
export const PAGE_TITLES: Record<string, string> = {
|
export const PAGE_TITLES: Record<string, string> = {
|
||||||
// Home (no slug)
|
// Home (no slug)
|
||||||
"": "The framework for\nUser-Generated Interfaces",
|
"": "The Generative UI\nFramework",
|
||||||
|
|
||||||
// Top-level
|
// Top-level
|
||||||
playground: "Playground",
|
playground: "Playground",
|
||||||
|
|||||||
Reference in New Issue
Block a user