Environment Configuration

Set up your development environment to work with the Cloud API and local services.

Environment variables

Create .env.local in your project root:

.env.local

# Required - Set deployment mode
DEVKIT4AI_MODE=project

# Required - Cloud API URL
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad

# Required - Your credentials from Cloud Admin
DEVKIT4AI_DEVELOPER_KEY=dk_your_developer_key_from_cloud_admin
DEVKIT4AI_PROJECT_ID=your-project-uuid-from-cloud_admin
DEVKIT4AI_PROJECT_KEY=ak_your_project_api_key_from_cloud_admin

# Optional - Deployment environment identifier
ENVIRONMENT=local

Get your credentials

Log into Cloud Admin and create a project. Copy your:

Developer Key (starts with dk_)
Project ID (UUID format)
Project API Key (starts with ak_)

Create .env.local file

Copy the template above and replace placeholders with your actual credentials.

Never commit .env.local to version control. It’s already in .gitignore.

Verify configuration

Start the dev server:

npm run dev

If configuration is invalid, you’ll see an amber banner at the top of the page with specific errors.

Configuration validation

The Starter Kit automatically validates your environment on startup: Error-level issues (blocks API calls):

Missing required environment variables
Invalid Project ID format (must be UUID)
Invalid API URL format

Warning-level issues (app works but review recommended):

Using default values
Non-standard configuration

Check the browser console and terminal output for detailed validation messages.

Multiple environments

Create environment-specific files:

.env.local          # Local development
.env.development    # Development server
.env.staging        # Staging environment  
.env.production     # Production (use hosting provider secrets)

Next.js loads these automatically based on NODE_ENV.

Environment-specific API URLs

For testing against different API environments:

.env.local

# Production Cloud API (default)
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad

# Or alternative deployment
NEXT_PUBLIC_API_URL=https://api.devkit4ai.com

Security best practices

Never expose sensitive credentials:

Don’t commit .env.local or .env.production
Don’t log environment variables in client code
Don’t share developer or API keys publicly
Rotate keys if accidentally exposed

For production:

Use your hosting provider’s secret management (Vercel, Netlify, etc.)
Enable environment variable encryption when available
Restrict API keys to specific domains in Cloud Admin

Troubleshooting

Configuration errors on startup

Check that:

.env.local exists in project root
All required variables are set
Project ID is valid UUID format
No extra spaces or quotes around values

API calls failing with 401

Verify:

Developer key is correct and active
Project ID matches your Cloud Admin project
Project API key hasn’t been revoked
Restart dev server after changing .env.local

Can't find .env.local file

The file might be hidden in your file browser:

# Create it from terminal
touch .env.local

# Open in editor
code .env.local

Environment variables

Configuration validation

Multiple environments

Environment-specific API URLs

Security best practices

Troubleshooting

Next steps

Frontend Development

Cloud Admin

​Environment variables

​Configuration validation

​Multiple environments

​Environment-specific API URLs

​Security best practices

​Troubleshooting

​Next steps

Frontend Development

Cloud Admin

Environment variables

Configuration validation

Multiple environments

Environment-specific API URLs

Security best practices

Troubleshooting

Next steps