> ## Documentation Index
> Fetch the complete documentation index at: https://docs.helloleo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Environment Variables

> Store frontend configuration and public API keys

Environment variables let you store configuration and public API keys for your project's frontend code.

## What Are Environment Variables?

Environment variables are:

* **Frontend-only** - Exposed to browser/client code
* **Project-specific** - Each project has its own
* **Accessible in code** - Use them in your frontend application
* **Public** - Visible in frontend code (use only for non-sensitive data)

## Common Uses

* **Public API keys** - Store public keys for services (e.g., Supabase public keys)
* **Configuration** - App settings and preferences
* **Feature flags** - Enable/disable features
* **Public URLs** - API endpoints and service URLs

**⚠️ Important:** Never store sensitive data like passwords, private API keys, or secrets in environment variables. They are exposed to the frontend and visible to anyone who inspects your code.

## Adding Variables

1. Go to **Project Settings** → **Environment Variables**
2. Click **Add Variable**
3. Enter:
   * **Name** - Variable name (e.g., `API_KEY`)
   * **Value** - The actual value
4. Save

Variables are automatically available in your code.

## Using Variables

In your frontend code, reference variables using the `VITE_` prefix:

* Frontend: `import.meta.env.VITE_API_KEY`

**Note:** Environment variables must start with `VITE_` to be accessible in your frontend code.

Leo knows how to use environment variables when you mention them in prompts.

## Security Considerations

* **Frontend-exposed** - Variables are visible in browser/client code
* **Not encrypted** - Stored as plain text
* **Public access** - Anyone can see them by inspecting your frontend code
* **Project-specific** - Isolated per project
* **Access control** - Only project members can view/edit

**For sensitive data:** Use [Integrations](/integrations/overview) instead. Integration credentials (like Odoo, Airtable, Notion API keys) are encrypted and stored securely on the backend, never exposed to the frontend.

## Best Practices

* **Use descriptive names** - `VITE_SUPABASE_URL` not `VITE_URL1`
* **Only public data** - Never store secrets or private keys
* **Document usage** - Note what each variable is for
* **Use integrations for secrets** - Store sensitive credentials via [Project Integrations](/features/project-settings)

## Integration Credentials vs Environment Variables

**Environment Variables (Frontend):**

* Public API keys (e.g., Supabase public keys)
* Public URLs and endpoints
* Feature flags
* Non-sensitive configuration

**Integration Credentials (Backend - Secure):**

* Private API keys (Odoo, Airtable, Notion, Klaviyo, etc.)
* Authentication tokens
* Database passwords
* Any sensitive credentials

When you add an integration, credentials are stored securely and encrypted on the backend, never exposed to the frontend.

<CardGroup cols={2}>
  <Card title="Project Settings" icon="settings" href="/features/project-management">
    Configure your project
  </Card>

  <Card title="Integrations" icon="plug" href="/integrations/overview">
    Learn about integrations
  </Card>
</CardGroup>