Chris Tate vor 5 Monaten
Ursprung
Commit
3f3fb81cd1
5 geänderte Dateien mit 40 neuen und 38 gelöschten Zeilen
  1. 14 12
      README.md
  2. 15 15
      apps/web/app/docs/page.tsx
  3. 9 9
      apps/web/app/page.tsx
  4. 1 1
      packages/core/README.md
  5. 1 1
      packages/react/README.md

+ 14 - 12
README.md

@@ -1,6 +1,8 @@
 # json-render
 
-**JSON becomes real things.** Define your catalog, register your components, let AI generate.
+**Predictable. Guardrailed. Fast.**
+
+Let end users generate dashboards, widgets, apps, and data visualizations from prompts — safely constrained to components you define.
 
 ```bash
 npm install @json-render/core @json-render/react
@@ -8,11 +10,11 @@ npm install @json-render/core @json-render/react
 
 ## Why json-render?
 
-Unlike vibe-coding tools that generate arbitrary code, json-render gives AI a **constrained vocabulary**. Perfect for enterprise apps where you need:
+When users prompt for UI, you need guarantees. json-render gives AI a **constrained vocabulary** so output is always predictable:
 
-- **Consistency** — AI only uses your approved components
-- **Safety** — Actions are declared by name, you control what they do
-- **Flexibility** — Works for UI, backend, anything
+- **Guardrailed** — AI can only use components in your catalog
+- **Predictable** — JSON output matches your schema, every time
+- **Fast** — Stream and render progressively as the model responds
 
 ## Quick Start
 
@@ -208,20 +210,20 @@ json-render/
 
 ```
 ┌─────────────┐     ┌──────────────┐     ┌─────────────┐
-│   Prompt    │────▶│  AI + Catalog│────▶│  JSON Tree  │
-│ "dashboard" │     │  (constrained)    │  (safe)     
+│ User Prompt │────▶│  AI + Catalog│────▶│  JSON Tree  │
+│ "dashboard" │     │ (guardrailed)│     │(predictable)
 └─────────────┘     └──────────────┘     └─────────────┘
                     ┌──────────────┐            │
                     │  Your React  │◀───────────┘
-                    │  Components  │
+                    │  Components  │ (streamed)
                     └──────────────┘
 ```
 
-1. **You define the catalog** — what components exist, what props they take
-2. **AI generates JSON** — constrained to your catalog
-3. **You render it** — with your own components
-4. **Actions are safe** — AI declares intent (`"refund"`), you implement it
+1. **Define the guardrails** — what components, actions, and data bindings AI can use
+2. **Users prompt** — 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
 
 ## License
 

+ 15 - 15
apps/web/app/docs/page.tsx

@@ -7,45 +7,45 @@ export default function DocsPage() {
     <article>
       <h1 className="text-3xl font-bold mb-4">Introduction</h1>
       <p className="text-muted-foreground mb-8">
-        json-render is a library for building AI-powered UIs with enterprise-grade guardrails.
+        Predictable. Guardrailed. Fast. Let users generate dashboards, widgets, apps, and data visualizations from prompts.
       </p>
 
       <h2 className="text-xl font-semibold mt-12 mb-4">What is json-render?</h2>
       <p className="text-sm text-muted-foreground mb-4 leading-relaxed">
-        Unlike vibe-coding tools that let AI generate arbitrary code, json-render gives AI a 
-        constrained vocabulary. You define what components exist, what props they take, and 
-        what actions are available. AI generates JSON that matches your schema, and your 
-        components render it natively.
+        json-render lets end users generate UI from natural language prompts — safely 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.
       </p>
 
       <h2 className="text-xl font-semibold mt-12 mb-4">Why json-render?</h2>
       <div className="space-y-4 mb-8">
         <div>
-          <h3 className="font-medium mb-1">Consistency</h3>
+          <h3 className="font-medium mb-1">Guardrailed</h3>
           <p className="text-sm text-muted-foreground">
-            AI only uses your approved components. No random UI patterns.
+            AI can only use components in your catalog. No arbitrary code generation.
           </p>
         </div>
         <div>
-          <h3 className="font-medium mb-1">Safety</h3>
+          <h3 className="font-medium mb-1">Predictable</h3>
           <p className="text-sm text-muted-foreground">
-            Actions are declared by name, you control what they do.
+            JSON output matches your schema, every time. Actions are declared by name, you control what they do.
           </p>
         </div>
         <div>
-          <h3 className="font-medium mb-1">Flexibility</h3>
+          <h3 className="font-medium mb-1">Fast</h3>
           <p className="text-sm text-muted-foreground">
-            Define a catalog, let AI generate JSON, render it your way.
+            Stream and render progressively as the model responds. No waiting for completion.
           </p>
         </div>
       </div>
 
       <h2 className="text-xl font-semibold mt-12 mb-4">How it works</h2>
       <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
-        <li>You define the catalog — what components exist, what props they take</li>
-        <li>AI generates JSON — constrained to your catalog</li>
-        <li>You render it — with your own components</li>
-        <li>Actions are safe — AI declares intent, you implement it</li>
+        <li>Define the guardrails — what components, actions, and data bindings AI can use</li>
+        <li>Users prompt — end users describe what they want in natural language</li>
+        <li>AI generates JSON — output is always predictable, constrained to your catalog</li>
+        <li>Render fast — stream and render progressively as the model responds</li>
       </ol>
     </article>
   );

+ 9 - 9
apps/web/app/page.tsx

@@ -9,11 +9,11 @@ export default function Home() {
     <>
       {/* Hero */}
       <section className="max-w-5xl mx-auto px-6 pt-24 pb-16 text-center">
-        <h1 className="text-4xl sm:text-5xl md:text-7xl font-bold tracking-tighter mb-6">
-          JSON becomes UI
+        <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tighter mb-6">
+          Predictable. Guardrailed. Fast.
         </h1>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-12 leading-relaxed">
-          Define a catalog. AI generates JSON. Your components render natively.
+          Let users generate dashboards, widgets, apps, and data visualizations from prompts — safely constrained to components you define.
         </p>
 
         <Demo />
@@ -52,23 +52,23 @@ export default function Home() {
           <div className="grid md:grid-cols-3 gap-12">
             <div>
               <div className="text-xs text-muted-foreground font-mono mb-3">01</div>
-              <h3 className="text-lg font-semibold mb-2">Define Catalog</h3>
+              <h3 className="text-lg font-semibold mb-2">Define Your Catalog</h3>
               <p className="text-sm text-muted-foreground leading-relaxed">
-                Specify which components AI can use with Zod schemas. Full type safety and validation.
+                Set the guardrails. Define which components, actions, and data bindings AI can use.
               </p>
             </div>
             <div>
               <div className="text-xs text-muted-foreground font-mono mb-3">02</div>
-              <h3 className="text-lg font-semibold mb-2">Register Components</h3>
+              <h3 className="text-lg font-semibold mb-2">Users Prompt</h3>
               <p className="text-sm text-muted-foreground leading-relaxed">
-                Map catalog types to your React components. Use your own design system.
+                End users describe what they want. AI generates JSON constrained to your catalog.
               </p>
             </div>
             <div>
               <div className="text-xs text-muted-foreground font-mono mb-3">03</div>
-              <h3 className="text-lg font-semibold mb-2">Let AI Generate</h3>
+              <h3 className="text-lg font-semibold mb-2">Render Instantly</h3>
               <p className="text-sm text-muted-foreground leading-relaxed">
-                AI outputs JSON matching your schema. Stream it. Render progressively.
+                Stream the response. Your components render progressively as JSON arrives.
               </p>
             </div>
           </div>

+ 1 - 1
packages/core/README.md

@@ -1,6 +1,6 @@
 # @json-render/core
 
-Enterprise-grade JSON-driven UI library with conditional visibility, rich actions, and enhanced validation.
+**Predictable. Guardrailed. Fast.** Core library for safe, user-prompted UI generation.
 
 ## Features
 

+ 1 - 1
packages/react/README.md

@@ -1,6 +1,6 @@
 # @json-render/react
 
-React renderer for @json-render/core - JSON becomes React components.
+**Predictable. Guardrailed. Fast.** React renderer for user-prompted dashboards, widgets, apps, and data visualizations.
 
 ## Features