Environment Variables
Environment variables let you configure your frontend without hardcoding values in your source code. Use them for API URLs, public keys (Stripe publishable, Google Maps, etc.), feature flags, and anything that changes between projects or environments.
Client-side variables are public
Frontend env vars are bundled into your build and shipped to the browser. Never put secrets here — no private API keys, no database credentials, no JWT secrets. For secrets, use backend credentials on your endpoints.
Add variables
Open the Environment Variables tab
In your project dashboard, go to Frontend → Environment Variables.
Add key-value pairs
Click Add variable. Enter the key (for example VITE_STRIPE_KEY) and the value. Most frameworks require a specific prefix — see the table below.
Redeploy
Env vars are baked in at build time. Click Redeploy (or trigger a new deploy from your IDE) to apply changes.
Required prefix by framework
Your framework only exposes env vars with a specific prefix to the browser. This prevents accidentally leaking backend variables.
| Parameter | Type | Description |
|---|---|---|
Vite / Vue / SvelteKit | VITE_* | Accessed as import.meta.env.VITE_MY_KEY in your code |
Create React App | REACT_APP_* | Accessed as process.env.REACT_APP_MY_KEY |
Next.js (client) | NEXT_PUBLIC_* | Accessed as process.env.NEXT_PUBLIC_MY_KEY |
Astro | PUBLIC_* | Accessed as import.meta.env.PUBLIC_MY_KEY |
Variables without the correct prefix are not included in the build — they'll be undefined in the browser.
Automatic variables
DYPAI sets a few variables for you automatically. You don't need to add these manually:
| Variable | Value |
|---|---|
VITE_DYPAI_URL | Your project's API base URL |
VITE_DYPAI_PROJECT_ID | Your project UUID |
The @dypai-ai/client-sdk reads these automatically when you call createClient().
Typical setup
# API endpoints and public keys
VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
VITE_GOOGLE_MAPS_KEY=AIza...
VITE_POSTHOG_KEY=phc_...
# Feature flags
VITE_ENABLE_BETA_DASHBOARD=true
# Third-party URLs
VITE_SUPPORT_URL=https://help.yourapp.com
Then in your code:
const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY
const mapsKey = import.meta.env.VITE_GOOGLE_MAPS_KEY
Edit or delete variables
- Edit: Click the pencil icon next to a variable, change the value, save. Redeploy to apply.
- Delete: Click the trash icon. The variable is removed on the next deploy.
Limits
- Up to 50 environment variables per project
- Keys must be
UPPER_SNAKE_CASE - Values are stored encrypted at rest but are exposed in the client bundle at build time
Where NOT to use env vars
| Type of value | Put it in… |
|---|---|
| Public API key (Stripe pk_, Google Maps, PostHog) | ✅ Frontend env var |
| API base URL | ✅ Frontend env var |
| Feature flag | ✅ Frontend env var |
| Stripe secret key (sk_) | ❌ Backend credentials |
| Database password | ❌ Never needed — DYPAI handles this |
| OpenAI API key | ❌ Backend credentials (used by Agent nodes) |
| JWT signing secret | ❌ Never needed — DYPAI handles this |