A meta-runtime for building reactive execution engines.
Components can declare anything you want, for example infrastructure, side effects, and AI calls using JSX. The runtime handles lifecycle, state persistence, and dependency tracking.
Working demo at https://github.com/creact-labs/ai-powered-aws-website-generator
This is a multi-site platform that generates websites with AI and deploys them to AWS. An HTTP API accepts prompts, Claude generates HTML, and each site gets its own S3 bucket. State persists across restarts.
export function App() {
const [sites, setSites] = createSignalSiteConfig[]>([]);
const [initialized, setInitialized] = createSignal(false);
const persistence = useAsyncOutput{ sites: SiteConfig[] }>(
() => ({ sites: sites() }),
async (props, setOutputs) => {
setOutputs(prev => {
if (!initialized() && prev?.sites && prev.sites.length > 0) {
setSites(prev.sites);
setInitialized(true);
return prev;
}
setInitialized(true);
return { sites: props.sites };
});
}
);
const {
shouldCleanup, pendingGeneration,
handleList, handleGenerate, handleUpdate,
handleCleanupSite, handleCleanupAll,
updateSiteContent, onDeployed, onCleanupComplete,
clearPendingGeneration,
} = useSites(sites, setSites);
return (
>
Channel
port={3000}
onList={handleList}
onGenerate={handleGenerate}
onUpdate={handleUpdate}
onCleanupSite={handleCleanupSite}
onCleanupAll={handleCleanupAll}
/>
HttpServer port={8080} path="./resources/admin" />
Claude>
Show when={() => pendingGeneration()}>
{(gen) => {
const { id, path, prompt } = gen();
const [content, setContent] = createSignal('');
return (
>
Read path={path} file="index.html">
{(existingContent) => (
GenerateHtml
existingContent={existingContent}
prompt={prompt}
onGenerated={setContent}
/>
)}
Read>
Show when={() => content()}>
{() => (
Write
path={path}
file="index.html"
content={() => content()}
onWritten={() => {
updateSiteContent(id, content());
clearPendingGeneration();
}}
/>
)}
Show>
>
);
}}
Show>
Claude>
AWS region="us-east-1" shouldCleanup={() => shouldCleanup()} onCleanupComplete={onCleanupComplete}>
For each={() => persistence.sites() ?? []} keyFn={(s) => s.id}>
{(site) => (
Show when={() => site().content}>
{() => (
WebSite
name={() => site().path}
content={() => site().content}
onDeployed={(url) => onDeployed(site().id, url)}
/>
)}
Show>
)}
For>
AWS>
>
);
}
npm install @creact-labs/creact
Build the app above from scratch across five chapters:
- Your First CReact App — State persistence with a counter
- Hello World — Components, handlers, and AWS deployment
- AI-Powered Website — Claude integration and HTML generation
- Creating the Control Plane — HTTP API, multi-site management
- Giving It a Pretty Face — Admin dashboard and static file serving
Apache-2.0