ai··7 min read

Building an on-device AI assistant with Gemini Nano

How I built a Chrome extension that summarizes, translates, and chats—fully offline with Gemini Nano.

Most AI browser tools burn tokens, need API keys, and break when Wi‑Fi dies. I wanted the opposite: an assistant that lives in the browser, works offline, and keeps your data local.

What the extension does

  • Summarize any page in a click, optimized for scanning.
  • Translate selected text without sending it to a server.
  • Converse in-context inside the popup—zero tabs, zero latency.

Why Gemini Nano

Gemini Nano ships on-device in Chrome. No key management, no cloud dependency, no privacy trade-offs. The constraint is model size and hardware variance—so the design had to embrace graceful degradation.

Designing micro-UX for a tiny viewport

  • Three clear modes with minimal chrome.
  • One primary action per mode; secondary actions tucked away.
  • Aggressive state clarity: listening, thinking, ready, error.

Technical notes

  • Manifest V3 + service worker orchestrating tab messaging.
  • Lightweight UI: plain HTML/CSS + vanilla JS to keep bundle small.
  • Caching recent summaries so back/forward feels instant.

Teaching it at Google I/O Extended

Turning the build into a workshop forced polish. I delivered it in Sucre, Santa Cruz, and Cochabamba—live coding the popup and walking through on-device constraints. The best QA I could ask for.

Takeaways

  • On-device AI = trust by default.
  • Design the failure states first (hardware limits, blocked mics).
  • Extension UX is micro-UX: every pixel must earn its place.

If you want the slides or the repo, send me a note.