Environment Variables

Securely manage API keys and configuration settings for your projects

Environment variables allow you to securely store sensitive information and configuration settings that your application needs, without exposing them in your code.

Environment Variables Panel

What are Environment Variables?

Environment variables are secure key-value pairs that store configuration and secrets your app needs to function. When you're building applications that connect to external services like OpenAI, Stripe, or databases, you need a safe place to store API keys and passwords. That's exactly what environment variables provide.

Common Use Cases

Capacity's AI will automatically use environment variables for:

  • AI Service Keys: OPENAI_API_KEY, ANTHROPIC_API_KEY for AI-powered features
  • Payment Processing: STRIPE_API_KEY, STRIPE_SECRET_KEY for payment integrations
  • Database Connections: DATABASE_URL, MONGODB_URI for database access
  • Email Services: SENDGRID_API_KEY, SMTP_PASSWORD for sending emails
  • Third-party APIs: Any external service your app connects to
  • Feature Flags: Toggle features on/off without code changes

Managing Environment Variables

Adding a New Variable

  1. Open the Environment Variables panel in your project sidebar
  2. Click the "Add Variable" button
  3. Enter the variable name following the naming convention (e.g., OPENAI_API_KEY)
  4. Enter the value - it will be securely hidden by default
  5. Press Enter or click the checkmark to save
Adding an API Key

Naming Convention

Environment variable names must:

  • Start with an uppercase letter
  • Use only uppercase letters, numbers, and underscores
  • Follow common patterns like SERVICE_API_KEY or DATABASE_URL

 Good examples: OPENAI_API_KEY, DATABASE_URL, MAX_RETRIES
L Invalid names: openai-key, api.key, 2FA_SECRET

Editing and Managing

  • Update Values: Click on any variable to expand it, then type in the value field - changes save automatically
  • Show/Hide Values: Click the eye icon to toggle value visibility
  • Delete Variables: Use the trash icon to remove variables you no longer need
  • Visual Indicators: Variables with missing values are highlighted in orange with a notification dot

How Capacity Uses Your Variables

When you add environment variables to your project, Capacity's AI automatically:

  1. Recognizes when they're needed - If you ask to "add OpenAI integration", the AI will look for OPENAI_API_KEY
  2. Uses them securely - The AI injects variables into your app without exposing the actual values in code
  3. Prompts when missing - If a required variable is missing, you'll see an orange indicator
  4. Handles configuration - The AI configures services using your environment variables automatically

Security Features

  • Encrypted Storage: All environment variables are encrypted at rest
  • Hidden by Default: Values are masked in the UI for security
  • Project Isolation: Each project has its own isolated set of variables
  • No Code Exposure: Variables are never written into your actual code files
  • Secure Transmission: All data is transmitted over encrypted connections

Best Practices

  1. Add variables before asking for integrations - Set up your OPENAI_API_KEY before asking the AI to add OpenAI features
  2. Use standard naming - Stick to common conventions like SERVICE_API_KEY so the AI recognizes them
  3. Keep values updated - Rotate API keys regularly and update them in Capacity
  4. Don't share screenshots - Be careful not to expose values when sharing your screen
  5. Set all required variables - Orange indicators show you which variables need values

Important Notes

Server Restart Required
Environment variables are applied when your development server starts. If you add or change variables while your app is running, Capacity may restart it.

Security Warning
Never share your environment variable values with others. Each developer should use their own API keys and credentials.

Troubleshooting

Variable not working?

  • Ensure the name follows the uppercase convention
  • Check that the value is set (no orange indicator)
  • Restart your development server after adding new variables

AI not recognizing your variable?

  • Use standard naming conventions (e.g., OPENAI_API_KEY not MY_OPENAI_KEY)
  • Make sure the variable is saved (green checkmark appeared)
  • Try being explicit: "Use the OPENAI_API_KEY environment variable I've set"

Can't see your variable value?

  • Click the eye icon to temporarily reveal the value
  • Values are hidden by default for security