|
@@ -7,45 +7,45 @@ export default function DocsPage() {
|
|
|
<article>
|
|
<article>
|
|
|
<h1 className="text-3xl font-bold mb-4">Introduction</h1>
|
|
<h1 className="text-3xl font-bold mb-4">Introduction</h1>
|
|
|
<p className="text-muted-foreground mb-8">
|
|
<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>
|
|
</p>
|
|
|
|
|
|
|
|
<h2 className="text-xl font-semibold mt-12 mb-4">What is json-render?</h2>
|
|
<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">
|
|
<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>
|
|
</p>
|
|
|
|
|
|
|
|
<h2 className="text-xl font-semibold mt-12 mb-4">Why json-render?</h2>
|
|
<h2 className="text-xl font-semibold mt-12 mb-4">Why json-render?</h2>
|
|
|
<div className="space-y-4 mb-8">
|
|
<div className="space-y-4 mb-8">
|
|
|
<div>
|
|
<div>
|
|
|
- <h3 className="font-medium mb-1">Consistency</h3>
|
|
|
|
|
|
|
+ <h3 className="font-medium mb-1">Guardrailed</h3>
|
|
|
<p className="text-sm text-muted-foreground">
|
|
<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>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
<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">
|
|
<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>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
<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">
|
|
<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>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<h2 className="text-xl font-semibold mt-12 mb-4">How it works</h2>
|
|
<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">
|
|
<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>
|
|
</ol>
|
|
|
</article>
|
|
</article>
|
|
|
);
|
|
);
|