Back to Home

Client-Side Architecture

Simplest architecture + most interactive UX

What is it?

AI runs entirely in the browser. Users provide their own API keys, state is stored simply (usually in Firebase or local storage), and there's no backend complexity to manage.

This pattern enables fast, interactive, and playful experiences. The browser gives you rich inputs for free: speech, images, drawing, instant feedback loops. Perfect for creative, exploratory, and personal tools.

💡 Key Insight

"If you can keep it client-only, you get a simpler architecture and a more interactive product by default. The operational surface stays tiny while enabling sophisticated AI interactions."

Tradeoffs

Advantages

  • Minimal operational overhead - no servers to manage
  • Instant feedback loops - no network latency
  • Rich multimodal interactions - leverage browser APIs
  • No backend complexity - faster development
  • Privacy-first - data never leaves the user's browser

Tradeoffs

  • User manages API keys - requires setup step
  • Limited to browser capabilities - no heavy computation
  • Client-side security constraints - API keys exposed
  • Cost scales with usage - user pays directly

Technical Deep Dive

Architecture

The client-side pattern is deceptively simple but powerful. The browser handles everything: UI rendering, AI inference calls, state management, and even persistence.

  • •Frontend: React/Next.js with browser-native APIs
  • •AI Layer: Direct API calls to OpenAI, Anthropic, etc.
  • •State: Firebase for sync, localStorage for cache
  • •Auth: Simple user authentication (Firebase Auth)

When to Use This Pattern

  • ✓Interactive, creative tools (recipe assistants, storytelling)
  • ✓Personal productivity apps (note-taking, planning)
  • ✓Prototypes and MVPs where speed matters
  • ✓Privacy-sensitive applications
  • ✓Apps where multimodal input is key (voice, images, drawing)

When NOT to Use This Pattern

  • ✗Enterprise apps where you need to control API costs
  • ✗Apps requiring sensitive backend logic or secrets
  • ✗Heavy data processing or complex workflows
  • ✗When you need server-side scheduling or automation

Apps Using This Pattern

Cook with Otto

Browser-native agent with user-provided API keys

Visit Live Demo

Storytime with Otto

Multimodal storytelling environment

Coming Soon

Tunes with Otto

Music discovery and playlist generation

Visit Live Demo

Want to explore other architecture patterns?

View All Patterns