Skip to main content
The Starter Kit operates in project mode, which configures it as an end-user application connected to the Cloud API.

​
Project mode configuration

Your Starter Kit always uses DEVKIT4AI_MODE=project:
.env.local
DEVKIT4AI_MODE=project
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad
DEVKIT4AI_DEVELOPER_KEY=dk_your_developer_key
DEVKIT4AI_PROJECT_ID=your-project-uuid
DEVKIT4AI_PROJECT_KEY=ak_your_project_api_key

​
Environment tiers

Deploy your application across multiple environments:

​
Local development

Purpose: Testing and development on your machine Configuration:
.env.local
DEVKIT4AI_MODE=project
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad
DEVKIT4AI_DEVELOPER_KEY=dk_dev_...
DEVKIT4AI_PROJECT_ID=...
DEVKIT4AI_PROJECT_KEY=ak_dev_...
ENVIRONMENT=local
NODE_ENV=development
Access: http://localhost:3004

​
Staging

Purpose: Pre-production testing with production-like setup Configuration: 
DEVKIT4AI_MODE=project
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad
DEVKIT4AI_DEVELOPER_KEY=dk_staging_...
DEVKIT4AI_PROJECT_ID=...
DEVKIT4AI_PROJECT_KEY=ak_staging_...
ENVIRONMENT=staging
NODE_ENV=production
Access: Your staging URL (e.g., staging.yourapp.com)
Create a separate project in Cloud Admin for staging to isolate data.

​
Production

Purpose: Live application serving real users Configuration: Set via your hosting provider’s environment variable system: 
DEVKIT4AI_MODE=project
NEXT_PUBLIC_API_URL=https://api.vibecoding.ad
DEVKIT4AI_DEVELOPER_KEY=dk_prod_...
DEVKIT4AI_PROJECT_ID=...
DEVKIT4AI_PROJECT_KEY=pk_prod_...
ENVIRONMENT=production
NODE_ENV=production
Access: Your production domain (e.g., yourapp.com)
Never commit production credentials to version control.

​
Environment-specific features

​
Development mode features

if (process.env.NODE_ENV === 'development') {
  // Enable debug logging
  console.log('Debug:', data)
  
  // Show development-only UI
  return <DevTools />
}

​
Production optimizations

if (process.env.NODE_ENV === 'production') {
  // Enable production features
  - Error tracking (Sentry, etc.)
  - Analytics (Vercel Analytics)
  - Performance monitoring
  - Aggressive caching
}

​
Configuration validation

The Starter Kit validates environment configuration on startup:
lib/deployment-mode.ts
export async function hydrateDeploymentMode() {
  const issues: ConfigIssue[] = []
  
  // Mode must be "project"
  if (process.env.DEVKIT4AI_MODE !== 'project') {
    issues.push({
      severity: 'error',
      message: 'DEVKIT4AI_MODE must be "project" for Starter Kit'
    })
  }
  
  // Validate required credentials
  if (!process.env.DEVKIT4AI_DEVELOPER_KEY) {
    issues.push({
      severity: 'error',
      message: 'DEVKIT4AI_DEVELOPER_KEY is required'
    })
  }
  
  return {
    mode: 'project',
    issues,
    isReady: issues.filter(i => i.severity === 'error').length === 0
  }
}

​
Deployment checklist

1

Create environment-specific project

In Cloud Admin, create a project for each environment:
  • my-app-dev
  • my-app-staging
  • my-app-prod
2

Generate API keys

Generate and copy API keys for each project. Store securely.
3

Configure hosting provider

Set environment variables in Vercel, Netlify, or your chosen platform.
4

Deploy and test

Deploy to each environment and verify:
  • Authentication works
  • API calls succeed
  • Data is isolated between environments

​
Environment isolation

Each environment should have: Separate projects in Cloud Admin
  • Prevents test data mixing with production
  • Allows independent API key rotation
  • Enables environment-specific permissions
Different API keys
  • Development: Unrestricted testing
  • Staging: Production-like restrictions
  • Production: Strict rate limits and security
Isolated user data
  • Register test users in dev/staging
  • Never use production data in testing

​
Next steps

Environment Variables

Complete variable reference

Deployment Guides

Deploy to hosting platforms