Environment Variables
Store API keys, secrets and configuration as environment variables in Settings → Env Vars, instead of writing them into the code.
Preview and Production
Section titled “Preview and Production”Each variable has a value for one or both targets:
- Preview — used in the project’s sandbox: the dev server, the terminal, the agents, and share previews.
- Production — used when you deploy to production.
Use this to keep test keys in previews and live keys in production, for example Stripe’s sk_test_… and sk_live_….
Public and server-only variables
Section titled “Public and server-only variables”Variables are server-only unless their name has your framework’s public prefix, which exposes them to browser code:
| Framework | Public prefix |
|---|---|
| Next.js | NEXT_PUBLIC_ |
| Vite, Vite + Hono, TanStack Start, React Router | VITE_ |
| Astro | PUBLIC_ |
Never give a secret a public prefix: anything public ends up in the JavaScript your visitors download.
Variables Frontend sets for you
Section titled “Variables Frontend sets for you”FRONTEND_API_KEY— the project’s Frontend API key, used by Frontend Cloud and the Frontend MCP server.- Integration variables — connecting Supabase, Stripe, Shopify or Contentful writes the variables your app needs, with the right prefix for its framework. Disconnecting removes them.
Using variables in MCP servers
Section titled “Using variables in MCP servers”Custom MCP servers can reference variables as ${NAME} in their URL and headers, so their keys live in one place.
Manage variables over HTTP with the Environment Variables API.