Workshop Day / Session 5

Deploy to
Vercel

Import your repo, point Vercel at the right folder, set your Supabase secrets, and ship.

Session 5 · Wire & deploy
Have these ready

Five env vars from Supabase.

The five Supabase variables already staged in Infisical from Session 3
NEXT_PUBLIC_SUPABASE_URL
Project base URL. The NEXT_PUBLIC_ prefix exposes it to the browser.
NEXT_PUBLIC_SUPABASE_ANON_KEY
Anon/public key. Safe for client-side code with RLS on.
SUPABASE_URL
Same URL, server-side (no NEXT_PUBLIC_ prefix).
SUPABASE_ANON_KEY
Anon key again, server-side.
SUPABASE_SERVICE_ROLE_KEY
Server-side only. Bypasses RLS — handle carefully.
All five come from Supabase → Project Settings → API Keys (covered in Session 3).
Phase 1 / Create a project

Dashboard → Add New → Project.

Vercel dashboard with the Add New dropdown open and Project highlighted
Top-right of your Vercel dashboard: click Add New... and choose Project. This opens the import page where you connect your GitHub repo.
Phase 1 / Connect your repo

Pick your account. Import the repo.

GitHub account picker with the personal account selected Repo list with agent-native-os-private and its Import button highlighted
In Import Git Repository, select your personal GitHub account (not the org). Find agent-native-os-private and click Import.
Repo not showing? Grant Vercel access to it via GitHub → Settings → Applications.
Phase 2 / The monorepo gotcha

Set root to apps/morning-brief.

New Project form with the Edit button on Root Directory highlighted Root Directory tree picker with apps/morning-brief selected
Root Directory defaults to ./ — the repo root, which is wrong for a monorepo. Click Edit, navigate to apps/morning-brief, and click Continue.
Deploy from the root and the build fails — Vercel can't find the Next.js app. The root must be the app subfolder.
Phase 2 / Confirm the framework

Vercel detects Next.js automatically.

New Project form with Next.js preset detected and root set to apps/morning-brief
After picking the subfolder, Application Preset should read Next.js and Root Directory should read apps/morning-brief — both highlighted here. Leave Build and Output Settings on the defaults.
Phase 3 / Wire in secrets

Add the five Supabase variables.

New Project form with the Environment Variables section expanded A variable being filled in: Key, Value, and the Add More button Vercel project env vars showing all five Supabase variables present
Expand the Environment Variables section (left), then add each one: type the name in Key, paste its value in Value, leave Environments on Production and Preview, and click + Add More (center). Repeat until all five are present (right).
Phase 4 / Ship it

Click Deploy.

Completed New Project form with the Deploy button highlighted
Once all five variables are in, click Deploy. Vercel clones the repo, builds from apps/morning-brief, and injects your env vars. First deploy takes about a minute.
Build failed? Check the logs — usually a missing env var, the wrong root directory, or a TypeScript error.
Session 5 complete

You're live.

Vercel congratulations screen showing the deployed Morning Brief app
Your Morning Brief is deployed from apps/morning-brief with all five Supabase keys wired in. Every push to main re-deploys automatically, so you only do this setup once. Open your live URL and run /build-morning-brief to fill it.
AI Build Lab · Workshop Day