Building a Neural Operating System with Gemini 2.5 Flash-Lite

How to generate every pixel in real time—no Figma, no JSX, just a prompt.

1. From Static GUI to Living Interface

“I clicked Save and the entire screen re-wrote itself.”
That was my first reaction to Google’s public demo released in June 2025.

1.1 The 30-second story

I typed “buy low-fat milk” into the notepad, hit Save, and within 120 ms:

• The notepad vanished
• A shopping list appeared
• A mini-map showing the nearest grocery store popped up
  All HTML was generated on the fly—zero pre-coded UI.

1.2 Why it matters

Traditional OS: every button is hand-drawn by a developer.
Neural OS: the model is the developer.
If latency keeps dropping, “product manager ➜ designer ➜ frontend” becomes “prompt engineer only”.

1.3 What you’ll get from this post

• 5 copy-paste architectures used inside Google’s prototype
• A MIT-licensed repo that runs in 5 commands
• Performance numbers (5G ➜ 90 ms first paint)
• 3 micro-use-cases you can ship tonight

2. Project at a Glance

US IP required for the official demo. Clone the repo and add your own API key—works globally.

3. Core Architecture 1 – Two-Track Prompting

3.1 The problem: style drift

Single-prompt models forget colors. One screen is dark, next is light.

3.2 The fix: split prompts

• UI Constitution – system prompt, never changes (colors, fonts, max 5 actions)
• Interaction Event – user click as JSON, always fresh

Example JSON sent to Gemini:

{
  "id": "save_note_action",
  "type": "button_press",
  "value": "buy low-fat milk\n1 L",
  "elementType": "button",
  "elementText": "Save",
  "appContext": "notepad"
}

Gemini returns full HTML respecting the constitution.

3.3 10-minute migration checklist for your app

1. Add three data-attributes to any button:

<button
  data-interaction-id="add_to_cart"
  data-interaction-type="button_press"
  data-value-from="#product-name">
  Add to Cart
</button>

2. Use the included InteractionCapture.ts—it auto-assembles JSON and POSTs to /api/generate-ui.

4. Core Architecture 2 – Interaction Tracing

4.1 Why a single click is not enough

Calculator UI should look different if the user came from Shopping Cart vs. Travel Booking.

4.2 Sliding-window context

Keep last N events (default 3-5).
Key = SHA256(constitution + trace) → value = HTML.

4.3 Quick A/B

Sweet spot: e-commerce N=3, tools N=5.

5. Core Architecture 3 – Streaming for 60 fps

5.1 Stack

Gemini stream: true ➜ SSE ➜ React startTransition.

5.2 Real-world timing

5.3 Gotcha – truncated tags

Model may send <button class="b then tn">.
Fix: bracket counter caches open tags until closed.
Package: npm i gemini-os-stream-buffer.

6. Core Architecture 4 – UI Graph Cache

6.1 Stateless ≠ user friendly

Revisiting the same folder must show identical files.

6.2 In-memory LRU

const cache = new LRU<string, string>({ max: 200 });

Key = constitution + trace.
Value = last HTML.
Hit = skip Gemini, return cached HTML in 5 ms.

6.3 Consistency rules

• Cache structure only; data placeholders refilled client-side
• Version hash in constitution auto-invalidates on change

7. Tonight-Shippable Use-Cases

7.1 Floating widget example

One-line injection:

<script src="https://cdn.jsdelivr.net/gh/yourname/gemini-os-lite@1.0.0/dist/inject.min.js"
        data-api-key="AIza..."></script>

The script:

• Captures clicks on .buy-button
• Sends product name + price as trace
• Receives HTML for a floating panel with “Price History” and “Compare” buttons
• Uses Shadow DOM for style isolation

8. Limitations & Road-Map

9. Quick-Start – 5 Commands

# 1. Clone
git clone https://github.com/yourname/gemini-os-lite.git
cd gemini-os-lite

# 2. Install
npm i

# 3. Add key
echo "GEMINI_API_KEY=AIza..." > .env.local

# 4. Dev
npm run dev

# 5. Open
open http://localhost:3000

One-click deploy to Vercel:

10. FAQ – What People Also Ask

Q1: Do I need AI knowledge to use this?
A: No. Treat /api/generate-ui as a smart template engine.

Q2: Cost?
A: Flash-Lite costs US $0.075 per 1 M tokens. One screen ≈ 3 k tokens → 400 screens per dollar.

Q3: Vue/Angular support?
A: Yes. Core package is framework-agnostic; it gives you a simple subscribe(html => ...) callback.

Q4: XSS risk?
A: All HTML is sanitized by DOMPurify; <script> and <iframe> are stripped.

Q5: Offline mode?
A: Not yet. We are fine-tuning a 2 B local model—stay tuned.

11. Key Takeaway & CTA

Model is the new codebase, interaction is the new pull-request.
Star the repo, post your generative UI screenshot in the comments, and win one of three $10 Gemini API vouchers.
Let’s build the living interface—together.