flux/crepes-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Provider wrapper - wrap entire app once
Some checks failed
Build and Push Docker Image / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
OpenClaw
2026-02-09 09:44:04 +01:00
parent e1b6cc96ab
commit 75fd255841
2 changed files with 90 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
app/page.tsx
View File

@@ -24,94 +24,94 @@ export default function Home() {
} }
return ( return (
<div className="min-h-screen bg-gradient-to-br from-orange-100 via-amber-50 to-yellow-100"> <Provider>
<header className="bg-white shadow-lg sticky top-0 z-50 border-b-4 border-orange-400"> <div className="min-h-screen bg-gradient-to-br from-orange-100 via-amber-50 to-yellow-100">
<div className="container mx-auto px-4 py-6"> <header className="bg-white shadow-lg sticky top-0 z-50 border-b-4 border-orange-400">
<h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 text-center"> <div className="container mx-auto px-4 py-6">
🥞 Les Crêpes de Maîtres <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 text-center">
</h1> 🥞 Les Crêpes de Maîtres
<p className="text-center text-gray-600 mt-2 text-lg"> </h1>
Famous French Chefs&apos; Crêpe Recipes <p className="text-center text-gray-600 mt-2 text-lg">
</p> Famous French Chefs&apos; Crêpe Recipes
<p className="text-center text-gray-500 mt-1 text-sm">
Powered by <span className="font-mono font-semibold">json-render</span> ✨
</p>
</div>
</header>
<main className="container mx-auto px-4 py-12 max-w-6xl">
<div className="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg shadow-md mb-12">
<h2 className="text-2xl font-bold text-gray-900 mb-3 flex items-center gap-2">
ℹ️ About This Demo
</h2>
<p className="text-gray-700 mb-2">
This application demonstrates <strong>json-render</strong> by Vercel Labs —
a library that enables AI-generated UIs with guardrailed components.
</p>
<p className="text-gray-700 mb-2">
Below, each recipe is defined as a <strong>JSON specification</strong> and
rendered through the <code className="bg-gray-200 px-2 py-1 rounded">Renderer</code> component
using our type-safe component catalog.
</p>
<p className="text-gray-700 mb-4">
In production, AI would generate these specs from user prompts—safely constrained
to only use components we&apos;ve defined (RecipeHeader, ChefInfo, IngredientList, etc.).
</p>
<div className="bg-white p-4 rounded-lg shadow-sm mb-4">
<h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
<span className="text-green-600">✓</span> Guardrailed
</h3>
<p className="text-sm text-gray-600 mb-3">
AI can only use components in your catalog
</p> </p>
<h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2"> <p className="text-center text-gray-500 mt-1 text-sm">
<span className="text-green-600">✓</span> Predictable Powered by <span className="font-mono font-semibold">json-render</span> ✨
</h3>
<p className="text-sm text-gray-600 mb-3">
JSON output matches your schema, every time
</p>
<h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
<span className="text-green-600">✓</span> Fast
</h3>
<p className="text-sm text-gray-600">
Stream and render progressively as the model responds
</p> </p>
</div> </div>
<div className="mt-4 pt-4 border-t border-blue-200"> </header>
<p className="text-sm text-gray-600 flex items-center gap-2">
<span>🔗</span>
<a
href="https://github.com/vercel-labs/json-render"
target="_blank"
rel="noopener noreferrer"
className="underline hover:text-blue-700 font-semibold"
>
github.com/vercel-labs/json-render
</a>
</p>
</div>
</div>
{recipes.map((recipe, index) => ( <main className="container mx-auto px-4 py-12 max-w-6xl">
<div key={index} className="mb-8"> <div className="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg shadow-md mb-12">
<Provider> <h2 className="text-2xl font-bold text-gray-900 mb-3 flex items-center gap-2">
ℹ️ About This Demo
</h2>
<p className="text-gray-700 mb-2">
This application demonstrates <strong>json-render</strong> by Vercel Labs —
a library that enables AI-generated UIs with guardrailed components.
</p>
<p className="text-gray-700 mb-2">
Below, each recipe is defined as a <strong>JSON specification</strong> and
rendered through the <code className="bg-gray-200 px-2 py-1 rounded">Renderer</code> component
using our type-safe component catalog.
</p>
<p className="text-gray-700 mb-4">
In production, AI would generate these specs from user prompts—safely constrained
to only use components we&apos;ve defined (RecipeHeader, ChefInfo, IngredientList, etc.).
</p>
<div className="bg-white p-4 rounded-lg shadow-sm mb-4">
<h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
<span className="text-green-600">✓</span> Guardrailed
</h3>
<p className="text-sm text-gray-600 mb-3">
AI can only use components in your catalog
</p>
<h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
<span className="text-green-600">✓</span> Predictable
</h3>
<p className="text-sm text-gray-600 mb-3">
JSON output matches your schema, every time
</p>
<h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
<span className="text-green-600">✓</span> Fast
</h3>
<p className="text-sm text-gray-600">
Stream and render progressively as the model responds
</p>
</div>
<div className="mt-4 pt-4 border-t border-blue-200">
<p className="text-sm text-gray-600 flex items-center gap-2">
<span>🔗</span>
<a
href="https://github.com/vercel-labs/json-render"
target="_blank"
rel="noopener noreferrer"
className="underline hover:text-blue-700 font-semibold"
>
github.com/vercel-labs/json-render
</a>
</p>
</div>
</div>
{recipes.map((recipe, index) => (
<div key={index} className="mb-8">
<Renderer spec={recipe as any} registry={registry} /> <Renderer spec={recipe as any} registry={registry} />
</Provider> </div>
</div> ))}
))} </main>
</main>
<footer className="bg-gray-900 text-white py-8 mt-20"> <footer className="bg-gray-900 text-white py-8 mt-20">
<div className="container mx-auto px-4 text-center"> <div className="container mx-auto px-4 text-center">
<p className="text-lg font-semibold mb-2">🇫🇷 Bon Appétit!</p> <p className="text-lg font-semibold mb-2">🇫🇷 Bon Appétit!</p>
<p className="text-gray-400 text-sm"> <p className="text-gray-400 text-sm">
Built with Next.js, Tailwind CSS, and json-render Built with Next.js, Tailwind CSS, and json-render
</p> </p>
<p className="text-gray-500 text-xs mt-4"> <p className="text-gray-500 text-xs mt-4">
Recipe sources linked in each chef&apos;s information card Recipe sources linked in each chef&apos;s information card
</p> </p>
</div> </div>
</footer> </footer>
</div> </div>
</Provider>
); );
} }

14
lib/registry.tsx
View File

@@ -113,15 +113,15 @@ export const { registry } = defineRegistry(catalog, {
}, },
}); });
// Provider wrapper for all required contexts // Provider wrapper for all required contexts - wraps entire app once
export function Provider({ children }: { children: ReactNode }) { export function Provider({ children }: { children: ReactNode }) {
return ( return (
<ActionProvider> <DataProvider>
<DataProvider> <VisibilityProvider>
<VisibilityProvider> <ActionProvider>
{children} {children}
</VisibilityProvider> </ActionProvider>
</DataProvider> </VisibilityProvider>
</ActionProvider> </DataProvider>
); );
} }