← All posts

2026-07-13 · engineering · ai

Why Stack Sketch's AI runs in your browser, not on our servers

Most AI features in SaaS products follow the same shape: your input goes to the vendor's backend, the vendor calls a model with their key, and you pay for the privilege through a subscription tier. Stack Sketch's AI diagram generation works differently — there is no server endpoint at all. Your browser talks straight to the model provider with your own API key.

The architecture

When you type "a Next.js app on Vercel with Postgres, Redis and Stripe" and hit generate, everything happens client-side:

  1. The prompt, the diagram schema, and your current canvas (for append mode) are assembled in the browser.
  2. The browser calls your chosen provider directly — Google Gemini, OpenAI, Anthropic Claude, or any OpenAI-compatible endpoint like OpenRouter or a local proxy. You pick the exact model.
  3. The response is validated against the diagram schema and, if the model returned something malformed, retried — then drafted onto the canvas as real nodes and edges.

Our servers never see the prompt, the response, or your key. There is nothing to log, nothing to train on, and nothing to breach.

What this buys you

  • Privacy that's structural, not contractual. "We don't store your prompts" is a policy; not having an endpoint is architecture. For people diagramming internal infrastructure — exactly our users — that difference matters.
  • Your rates, your models. You pay the provider directly at API prices, and new models work the day they ship. Local proxies work too: point the OpenAI-compatible provider at localhost and generate diagrams entirely offline from a model on your own hardware.
  • AI on the free tier. Because generation costs us nothing to serve, we don't have to gate it. Free accounts get full AI generation.

What it costs us

Honesty section. Bring-your-own-key has real trade-offs:

  • Setup friction. You need to create an API key at your provider and paste it into Settings once. That's a step a hosted endpoint wouldn't have.
  • Key custody in the browser. If keys live client-side, they must be stored carefully. Keys are encrypted with AES-GCM, and the encryption key itself is generated non-extractable and held by the browser's crypto subsystem — scripts can use it to decrypt, but the raw key material can never be read out of storage, so an exfiltrated browser profile doesn't leak your provider key.
  • CORS quirks. Not every provider loves browser calls; we maintain provider-specific handling so the happy path stays happy.

We think the trade is obviously right for a tool whose whole job is drawing your infrastructure. Try it on the free tier — 10 diagrams, all 640+ icons, and AI generation included — at app.stacksketch.site.