AI ClubhouseVibe Coding Guide
Integrations · Chapter 2 of 3

API keys

What they are, where they live, and how not to leak them.

When your app asks a service for data, the service needs three facts before answering: who's asking, what they're allowed, and whose bill this goes on. An API key is all three compressed into one long, random string:

sk-abc123xyz789… and your app attaches it to every request it makes.

It's like a password, but doing more jobs. When you log in somewhere as a human, you present two things: an email (who) and a password (proof). An API key collapses identity, proof, permissions, and billing into a single credential:

Human login
Who:you@email.com
Proof:••••••••••
Two pieces: identifier plus secret.
API request
Who + proof:sk-abc123xyz789…
One piece: the key does every job.

Which is exactly why leaking one is expensive: whoever holds your key is you, as far as the service knows, spending on your card and reading your data. Leaked keys on GitHub get found by scanner bots in minutes, not days. So the rules below aren't optional etiquette; they're the guardrail.

Where keys live

Never in your code. Keys go in one special file, .env.local, at the root of your project (the top level, next to package.json):

trailhead/
├── .env.local ← your secret keys live here
├── .gitignore ← tells Git to never upload .env.local
├── package.json
├── src/
├── App.tsx
└── main.tsx
└── public/

Inside, it's one key per line: a name your code uses on the left, the secret on the right.

.env.local
WEATHER_API_KEY=abc123xyz789
TWILIO_AUTH_TOKEN=tw_456def
ANTHROPIC_API_KEY=sk-ant-789ghi

The .gitignore file beside it is the other half of the system. It lists files Git should never upload, and .env.local must be on that list. That's what lets you push your project to GitHub while your secrets stay home.

Three habits, and you'll never be the cautionary tale:

  • –1. Delegate the setup. Tell the agent “add my weather API key to the env file and make sure it's gitignored.” It knows this drill cold.
  • –2. Set a spending limit. Every provider's billing page has one. Set it the day you create the key, while you're thinking about it.
  • –3. If a key leaks, rotate it. Revoke in the dashboard, issue a new one, update your env file. Five minutes, then it's over.

One more that matters once you deploy: your live site on Vercel can't see the .env.local on your laptop. You paste the same values into Vercel → Project → Settings → Environment Variables, which is how the deployed app gets its secrets without them ever touching GitHub.

← PreviousAPIs, explainedNext →Picking an API
AI Clubhouse · Vibe Coding Guide