Lesson 2: AI Product Architecture — Three Boundaries That Protect Your App
A true-to-life scenario: a startup gets a $14,000 monthly bill from Anthropic — because the API key was in the React bundle. Correct architectural boundaries aren't just 'best practice' — they're what separates a production project from a vulnerable one.
An architectural boundary is like a locked door. On one side — the user. On the other — the sensitive data. The key always stays behind the door.
- auth boundary
- The boundary between anonymous requests (anon key) and authenticated requests (JWT). After this boundary, the user is identified.
- data boundary
- The boundary where RLS enforces who can see which data — at the database level, not the React level.
- AI boundary
- The boundary protecting LLM API keys. Anthropic/Gemini keys must stay server-side (Supabase edge function) — never in React.
- anon key
- A public Supabase key that allows unauthenticated operations. Safe to store in the client because RLS protects the data.
