Zero-Cost Infrastructure: Running AI Completely in Client Browsers

How Cloudflare Pages static hosting and Chrome's Gemini Nano local prompt API combine into a fully serverless generative-AI product with zero egress and absolute privacy.

1. Overview

Modern consumer AI products are almost universally built on a familiar but expensive pattern: an API gateway in front of an inference service, a queuing layer, GPU autoscaling, observability, and a billing loop. That model delivers extraordinary power, but it also delivers a per-request marginal cost that grows with success, and it concentrates every user's data in a server-side datastore. MooduTools was designed from the first line of code to invert that paradigm.

This document walks through the architecture that lets MooduTools operate as a generative product with zero persistent compute, zero model-inference cost, and zero network egress of user mood data. The entire intelligence payload — the model that turns words into moving art — is executed not on a rented GPU in a faraway region, but inside the visitor's own Chrome process via the window.ai API and the built-in Gemini Nano model.

2. Why Traditional AI Cloud Infrastructure Feels Heavy

To appreciate the design, it helps to name precisely what a conventional stack adds. A typical "send a prompt to an LLM" product needs: an origin server to authenticate and rate-limit, a load balancer, autoscaling worker pods, an inference runtime with GPU capacity, persistent storage for conversation logs, a caching layer, and an observability/alerting pipeline. Each stage multiplies the cost curve and, more importantly for an emotional-expressiveness product, each stage is a place where user data could be inspected, logged, or breached.

MooduTools is deliberately small: a single page, a prompt, a stylesheet. There is no login session to protect, no conversation history to encrypt at rest, and no inference cluster to schedule. Removing the server does not mean removing engineering rigor — it means relocating trust to the browser's own security model, where data can be processed and immediately discarded without ever crossing a network boundary.

3. The Static Hosting Layer (Cloudflare Pages)

The only piece of the product that is actually hosted is the code itself. Cloudflare Pages serves the HTML, CSS, and JavaScript from its global edge network with a free tier and generous traffic allowance. Because every file is immutable and content-addressed on deployment, caching behavior is deterministic: the edge and the browser both cache aggressively, so repeat visits often cost nothing more than a round trip to the nearest edge node.

From a cost-accounting perspective, Pages is ideal because it bills on delivery, not compute. There is no always-on virtual machine and no concurrency ceiling tied to inference. The deployment pipeline is a simple git push that triggers a build, which in practice means a one-developer project can ship production features with the same discipline as a large organization's CD pipeline, but without a single cloud bill line item for model usage.

It is important to separate two concerns that many products conflate: caching the static shell and serving live compute. MooduTools uses the edge only for the former. The latter — token generation — never touches the edge at all. That division is the entire financial and privacy thesis of the system.

4. The Runtime AI Layer (Chrome Gemini Nano & window.ai)

The second half of the architecture is a runtime that Chrome now ships by default for eligible devices. Gemini Nano is a compact instruction-tuned language model bundled into the browser itself. When present, it is exposed through an asynchronous factory API. A robust integration probes the compatibility surface before ever awaiting a promise:

// Compatibility layer — every factory is checked before use.
const g = window.ai || globalThis.ai || null;
let session = null;

if (g?.languageModel?.create) {
  session = await g.languageModel.create({ systemPrompts: [SYSTEM_PROMPT] });
} else if (g?.createTextSession) {
  session = await g.createTextSession({ systemPrompt: SYSTEM_PROMPT });
} else if (g?.createSession) {
  session = await g.createSession({ systemPrompts: [SYSTEM_PROMPT] });
}

Location is meaningful. Because the model runs in the rendering process, a prompt executes with millisecond-level network latency, at zero token cost, and under the browser's origin security boundary. There is no API key, no egress firewall exception, and no server it can reach even if a prompt were maliciously crafted. This is fundamentally different from a thin-client chat product: here the weight, the reasoning, and the output all live where the user already is.

5. The Zero-Egress Privacy Guarantee

Privacy claims in software are only meaningful when they can be reduced to facts about packets. MooduTools' guarantee rest on a verifiable property: a user's mood text and the generated artwork never appear in a network frame. Let us trace the packet inventory for a complete generation cycle.

• Document load. The browser fetches HTML, CSS, JS, and fonts over HTTPS. This is identical to visiting any documentation page.
• Prompt construction. The typed mood is concatenated into a system prompt string in memory. No AJAX, no WebSocket, no fetch. The strings exist only in the page's JavaScript heap.
• Inference. session.prompt() is resolved entirely by the local model. No network request is initiated by the call.
• Rendering. The returned HTML fragment is sanitized and injected into the DOM. Everything renders within the same origin.

This is where the architecture earns its privacy language in a way that a server-side product cannot. A remote LLM provider can promise encryption in transit and at rest, but those promises still route the plaintext through a party that is not the user. On-device inference removes the third party from the threat model by removing the transmission itself.

6. Session Lifecycle & Fallbacks

Because products must degrade gracefully, the integration distinguishes between "no AI", "AI present but model not yet downloaded", and "AI present and ready." The code checks capability, then establishes a session with a bounded-timeout guard so that a stalled async promise can never hold the UI hostage:

function withTimeout(promise, ms, label) {
  return new Promise((resolve, reject) => {
    const t = setTimeout(() =>
      reject(new Error(`TIMEOUT [${label}] after ${ms}ms`)), ms);
    promise.then(v => (clearTimeout(t), resolve(v)),
                 e => (clearTimeout(t), reject(e)));
  });
}
session = await withTimeout(createAISession(), 6000, 'session-create');

When the runtime is absent, the product falls back to hand-curated “Live Demo” presets — deterministic CSS compositions that showcase the same rendering engine without the model. The user never sees a dead button; they see a graceful, explained transition between local-intelligence and curated-intelligence modes. This fallback is not an afterthought, but a core part of the architecture, because it keeps the surface trustworthy even on browsers that predate Gemini Nano.

7. The Cost Model: From One User to a Million

Consider a conventional hosted AI product: at a modest token price and reasonable prompt length, 100,000 monthly active users might generate tens of thousands of dollars in inference spend. Add GPU autoscaling overhead and cold-start latency, and the unit economics quietly decide what features a small team can offer. MooduTools has a structurally different ledger.

• Inference cost: $0.00. The user's own hardware performs every forward pass.
• Compute staging: $0.00. There is no runtime, no container, no worker pool.
• Hosting + egress: Static edge delivery on a free tier. Scaling is linear with bytes served, not with intelligence served.
• Privacy risk surface: Effectively zero, because no PII or mood data is collected, stored, or transmitted server-side.

The result is that marginal cost per user approaches zero, which changes product strategy. Features can be shipped for generosity rather than gatekeeping, and the free tier is not a loss-leader — it is the whole product. For an indie project this is not merely efficient; it is liberating.

8. Security & Threat Model

A serverless client architecture does not remove security work — it moves it. The surface that matters now is the browser sandbox and the integrity of the served code. Three controls deserve emphasis.

• Subresource integrity and a tight Content-Security-Policy. The page pins its own static assets so a compromised CDN cannot silently substitute a malicious script, and restricts sources so no unexpected domain can load code into the page.
• Output sanitization. The model is treated as untrusted. Generated output is scrubbed of <script>, event-handler attributes, and URL schemes like javascript: before it is ever allowed near the DOM. (The rendering side is covered in detail in the companion document on the generative CSS art engine.)
• No third-party SDKs. There are no analytics beacons, ads, or telemetry embeds in the runtime path. Fewer remote parties means a smaller supply chain and no silent data collector acting on the user's behalf.

A remote model provider could still, in principle, be compelled to log prompts. An on-device model removes that class of risk at the root: there is no remote provider holding plaintext, because there is no transmission.

9. Conclusion

MooduTools is evidence that a generative product does not have to rent intelligence. By serving static code from a free edge and letting Chrome's embedded Gemini Nano do the reasoning inside the visitor's own process, the architecture achieves what most AI startups measure but cannot honestly claim: zero marginal inference cost and zero egress of user emotions.

The trade-off is a dependency on browser capability distribution. Not every visitor's machine has Gemini Nano yet, so the product ships a curated fallback and a clear compatibility path. But for the growing population that does have it, the experience is indistinguishable from a hosted product with the privateness of a locally installed application. That inversion — where the most private option is also the most cost-effective option — is the quiet revolution this architecture represents.

Continue to the companion deep-dive to see how the raw text returned by the local model is turned into living, interactive HTML/CSS animation: From Text to Canvas: The Generative CSS Animation Pipeline.