Wire one seam at a time.
Each screen ships finished on mock data behind a typed seam. Set the env var and it flips to live with no code change.
The seam map
| Seam | Service | Skill | Env var(s) |
|---|---|---|---|
| Auth / sign-in | Supabase Auth | wire-auth.md | VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, VITE_SITE_URL |
| Billing (/app/billing) | Stripe | wire-billing.md | VITE_STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, STRIPE_PRICE_* |
| Assistant (/app/chat) | Vercel AI SDK (your model) | wire-ai-chat.md | provider key, e.g. OPENAI_API_KEY / ANTHROPIC_API_KEY (secret) |
| Search (/app/search) | Embeddings over your content | wire-ai-search.md | embeddings provider key + vector store URL/key (secret) |
| Files (/app/files) | S3-compatible storage | wire-file-uploads.md | STORAGE_BUCKET, STORAGE_REGION, STORAGE_ENDPOINT, STORAGE_ACCESS_KEY_ID, STORAGE_SECRET_ACCESS_KEY |
| Notifications | Supabase Realtime | wire-notifications.md | VITE_REALTIME_NOTIFICATIONS (reuses wire-auth project) |
| Newsletter | Resend | wire-newsletter.md | RESEND_API_KEY, RESEND_AUDIENCE_ID (secret) |
| Contact form (/contact) | Resend or Formspree | wire-contact-form.md | VITE_CONTACT_FORM_ENDPOINT, or reuse RESEND_API_KEY |
| Analytics (overview) | your analytics provider | add-analytics.md | provider script / site id (VITE_* if client-side) |
Full table with notes and per-seam verify lives in agent-skills/integration-points.md.
Env var rules
VITE_-prefixed vars are public, inlined into the client bundle at build time. Use them for URLs and publishable keys only. Changing one needs a rebuild.- Non-prefixed vars (
STRIPE_SECRET_KEY,RESEND_API_KEY, …) are server-only secrets. Never give a secret aVITE_prefix. - All live in
.envlocally (gitignored) and in the host dashboard in production.
# .env (local only, gitignored) VITE_SUPABASE_URL=... # public, inlined VITE_SUPABASE_ANON_KEY=... # public STRIPE_SECRET_KEY=... # secret, server only
Order of operations
wire-auth.mdfirst, most gated screens assume a signed-in user.- Then the screen you care about most: billing, chat, search, or files.
wire-notifications.mdafter auth (it reuses the same Supabase project).- Newsletter, contact, and analytics any time, they're independent.
How to actually wire one
You don't follow these steps by hand. Ask your AI agent in plain language ("take payments") and it loads the matching skill, which carries the provider, the seam location, the env vars, and the security defaults. The Agent skills page is the full trigger table. After a seam is live, remove its StarterNote and 🔌 INTEGRATION comment per Make it yours.