mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-02 12:00:58 +08:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1a51cddf3b |
@@ -1,8 +1,8 @@
|
||||
# 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
|
||||
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 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
|
||||
- **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. **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
|
||||
4. **Render fast** - stream and render progressively as the model responds
|
||||
|
||||
|
||||
@@ -2,13 +2,13 @@ export const metadata = { title: "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?
|
||||
|
||||
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?
|
||||
|
||||
@@ -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. 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
|
||||
4. Render fast - stream and render progressively as the model responds
|
||||
|
||||
@@ -10,14 +10,15 @@ 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 framework for User-Generated Interfaces
|
||||
The Generative UI Framework
|
||||
</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">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<Demo />
|
||||
@@ -68,10 +69,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">Users Generate</h3>
|
||||
<h3 className="text-lg font-semibold mb-2">AI Generates</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
End users describe what they want. AI generates JSON constrained
|
||||
to your catalog. Every interface is unique to the user.
|
||||
Describe what you want. AI generates JSON constrained to your
|
||||
catalog. Every interface is unique.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@@ -248,8 +249,8 @@ export default function Page() {
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
title: "User-Generated Interfaces",
|
||||
desc: "Dynamic, personalized UIs per user powered by Generative UI",
|
||||
title: "Generative UI",
|
||||
desc: "Generate dynamic, personalized interfaces from prompts with AI",
|
||||
},
|
||||
{
|
||||
title: "Guardrails",
|
||||
|
||||
@@ -24,13 +24,12 @@ export const metadata: Metadata = {
|
||||
template: "%s | json-render",
|
||||
},
|
||||
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: [
|
||||
"json-render",
|
||||
"UGI",
|
||||
"User-Generated Interfaces",
|
||||
"AI UI generation",
|
||||
"generative UI",
|
||||
"AI UI generation",
|
||||
"user-generated interfaces",
|
||||
"React components",
|
||||
"React Native",
|
||||
"guardrails",
|
||||
@@ -44,23 +43,23 @@ export const metadata: Metadata = {
|
||||
locale: "en_US",
|
||||
url: "https://json-render.dev",
|
||||
siteName: "json-render",
|
||||
title: "json-render | The framework for User-Generated Interfaces",
|
||||
title: "json-render | The Generative UI Framework",
|
||||
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: [
|
||||
{
|
||||
url: "/og",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "json-render - The framework for User-Generated Interfaces",
|
||||
alt: "json-render - The Generative UI Framework",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "json-render | The framework for User-Generated Interfaces",
|
||||
title: "json-render | The Generative UI Framework",
|
||||
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"],
|
||||
creator: "@verabornnot",
|
||||
},
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
*/
|
||||
export const PAGE_TITLES: Record<string, string> = {
|
||||
// Home (no slug)
|
||||
"": "The framework for\nUser-Generated Interfaces",
|
||||
"": "The Generative UI\nFramework",
|
||||
|
||||
// Top-level
|
||||
playground: "Playground",
|
||||
|
||||
Reference in New Issue
Block a user