Frontend personalization without frontend customization.
Fluid runs a dual-path engine: preset archetypes return instantly without LLM calls, while novel intents compile through Claude Opus 4.7 into Zod-validated IR and render with FluidView.
See the Compiler in Action
Select a schema and intent, then watch the engine build an intent hash, check 1-hour IR cache, and only call Claude on misses before validating JSON IR with Zod and rendering via FluidView.
The Personalization Dilemma
Traditional frontend stacks require writing separate layouts or maintaining massive bundles of conditions to customize UI for different users. Fluid ends the code sprawl.
Conditional Rendering Bloat
Adding dynamic features means stuffing codebase with A/B testing flags, feature toggles, device checks, and localizations. The output? Heavy JS files, slow compile times, and spaghetti code.
// ❌ Legacy Frontend Conditional Rendering
if (user.isMobile && user.geo === 'JP') {
return <TokyoMobileCheckout methods={JP_PAYMENTS} />;
} else if (user.plan === 'enterprise' && user.role === 'admin') {
return <EnterpriseDesktopCheckout />;
} else {
// 12 more conditions...
}Declarative Schema Renderer
Define what the interface is capable of doing once. Fluid handles the evaluation, constraints, and dynamic generation of the view layer at the edge. Clean client codebase with 0kb layout engine overhead.
// Fluid Edge Architecture
// Single React component resolves context and renders valid IR
<FluidView
schema={paymentSchema}
intent={userIntent}
data={runtimeData}
/>The Boundary-Safe Cycle
How Fluid enforces schema-to-engine, LLM-to-IR, and IR-to-renderer boundaries while keeping latency low.
Schema Defines Capability
Define entities, fields, and endpoints once. The prompt builder uses this schema so generation can only reference declared capability boundaries.
Normalize Intent, Then Cache
Normalize user intent, derive the key ir:{schema}:{sha256(intent)[:16]}, and short-circuit to cached IR when available.
Generate, Validate, Render
On cache miss, stream IR from Claude, strip code fences, parse JSON, validate with Zod, retry once on validation errors, then render via recursive FluidView nodes.
Minimal Integration. Maximum Control.
Look under the hood at the schema declaration, the Intermediate Representation (IR), and client-side rendering.
import { defineSchema } from "@fluid/core";
export const feedbackSchema = defineSchema({
id: "user-feedback",
entities: {
Feedback: {
rating: { type: "integer", required: true },
message: { type: "string", required: true },
email: { type: "string", required: false }
}
},
endpoints: {
submit: {
path: "/api/feedback",
method: "POST"
}
}
});{
"$schema": "https://fluid.dev/ir/v1.json",
"id": "user-feedback",
"layout": {
"style": "glassmorphic",
"spacing": "compact"
},
"components": [
{
"type": "header",
"props": { "title": "Outage Feedback", "alert": true }
},
{
"type": "stars-selector",
"binding": "rating",
"props": { "label": "Rate your outage experience" }
},
{
"type": "textarea",
"binding": "message",
"props": { "placeholder": "What went wrong?" }
},
{
"type": "submit-btn",
"action": "submit",
"props": { "variant": "danger", "text": "Escalate Feedback" }
}
]
}import { FluidView } from "@fluid/react";
import { feedbackSchema } from "./schema";
export default function App() {
const userIntent = "Emergency outage feedback on mobile screen";
return (
<main className="dark bg-black p-12">
<FluidView
schema={feedbackSchema}
intent={userIntent}
data={{}}
/>
</main>
);
}Why an IR Compiler Wins
Generating JavaScript directly from AI is slow, insecure, and breaks on updates. Fluid uses an Intermediate Representation (IR) to ensure speed, security, and predictability.
Deterministic Sandbox
Since the output is a JSON-based schema, it runs within a sandbox with strict boundaries. Code injections, script runs, and unexpected crashes are mathematically impossible.
Dual-Layer Caching
Saves resolved layouts in Map/Redis edge cache for 1 hour. Normalizes client-side spaces and case options to resolve intents inside 2ms, bypassing the LLM entirely.
Cross-Platform Native
You aren't locked to HTML. The same Fluid IR compiles natively into React Components, Swift UI for iOS apps, Jetpack Compose for Android, or Flutter views. Code once, personalize everywhere.
Engineered for Reliability
Fluid was built to satisfy security teams, performance budgets, and developer workflows alike.
1.4ms Cache Resolution
Hot path resolution hits edge Map/Redis cache under 2ms. Cold path uses Ephemeral prompt caching to lower streaming time to 5s while reducing Anthropic API input costs.
Zod Constraints
Enforce strict layer boundaries. Every JSON output from the LLM is validated against schemas with Zod, throwing errors if non-declared fields are used.
Malicious Safe
LLMs cannot run script code, read environment secrets, or execute arbitrary HTTP fetches. Only developer-authored endpoints can run from the React client.
Unified SDK Suite
Deliver identical personalization schemas to React, Solid, iOS Swift, and Android Jetpack layouts. Ensure perfect architectural cohesion across mobile, desktop and web apps.
Recursive renderNode()
Map JSON elements to native React element structures using a clean switch statement. Easily register custom components into the registry without modifying core validation.
Built for Developer Flow
Fluid integrates seamlessly into your terminal, CI pipelines, and version control. Push schemas just like you push code.
We are moving beyond the static interface era. Fluid decouples layout design from user capability, enabling software to morph around human intent in real time.
Ready to ship fluid interfaces?
Deploy your first capability schema in 5 minutes. Start personalizing experiences without frontend refactoring cycles.
npm install @fluid/react