Deploy to Vercel

✓ Reviewed August 2026 — Vercel Hobby limits current as of mid-2026

Part 4

Steps 12–16

Get your API key, import the project, add environment variables, and go live.

Get Your Gemini API Key from AI Studio

Return to aistudio.google.com and open the API Keys page (or the Secrets panel inside your Build-mode project). If you don't already have one, click Create API key. Copy the resulting key — it starts with AIzaSy...

🔐

Never commit this key to GitHub. Anyone with it can use your API quota and, on a paid Cloud project, run up charges. Store it in a password manager immediately, and prefer keys restricted to the Generative Language API only.

Import Your Project to Vercel

Go to vercel.com → Add New… → Project. Vercel shows your GitHub repos — click Import next to your new repo. If it doesn't appear, click "Adjust GitHub App Permissions" and grant repository access.

Add Environment Variables MOST CRITICAL

🚨

Your app won't work without this step.AI Studio kept your key server-side automatically while you were inside its own preview — on Vercel, you must add it yourself. Add the same key under a few common variable names so it's picked up regardless of how your code reads it.

GEMINI_API_KEY→AIzaSy… (your key)

API_KEY→same key

VITE_API_KEY→same key

GOOGLE_GENERATIVE_AI_API_KEY→same key

The three green dots = Production + Preview + Development. Leave all checked for each variable.

💡

Why several names? GEMINI_API_KEY is the name AI Studio's own runtime and the current Google GenAI SDKs read by default. VITE_-prefixed variables are what Vite exposes to client-side code at build time. Adding all four covers you regardless of exactly how your exported code references the key — check your src folder for the variable name actually used and prioritize that one.

Deploy & Go LiveFinal click

Scroll to the bottom of the Vercel configuration page and click the big Deploy button. The build typically takes 1–3 minutes. Watch the status:

⏳ Building… ✅ Ready ❌ Error → see troubleshooting

On success you'll get your live URL: your-project-name.vercel.app, served over HTTPS automatically — a requirement for installing as a PWA.

📊

Free tier reminder: Vercel's Hobby plan currently includes around 100 GB of bandwidth and roughly 1 million function invocations per month, at no cost — comfortably enough for a personal project or demo, but it's for non-commercial use. See the Best Practices page for the full free-tier comparison.