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

# Environment Variables

> Configure environment variables for your Canvas app — available in both the browser runtime and server functions.

## Overview

Canvas apps have two ways to access configuration:

1. **Browser runtime** — `window.__MIXPEEK__` (injected into every HTML response)
2. **Server functions** — `ctx.env` (available in your handler's context)

***

## Browser runtime variables

Canvas automatically injects a `window.__MIXPEEK__` object into every HTML page. This includes system variables and any custom environment variables you configure.

### System variables (always available)

| Variable                         | Description                                                   |
| -------------------------------- | ------------------------------------------------------------- |
| `window.__MIXPEEK__.apiBaseUrl`  | The API proxy URL (`/api`)                                    |
| `window.__MIXPEEK__.appId`       | Your app's ID                                                 |
| `window.__MIXPEEK__.slug`        | Your app's slug                                               |
| `window.__MIXPEEK__.environment` | Current environment (`production`, `staging`, or `preview-N`) |

### Accessing in your app

```jsx theme={null}
// React example
function App() {
  const mixpeek = window.__MIXPEEK__

  async function search(query) {
    const res = await fetch(`${mixpeek.apiBaseUrl}/v1/retrievers/ret_abc/execute`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ inputs: { query } }),
    })
    return res.json()
  }

  return <SearchBar onSearch={search} />
}
```

<Note>
  Use `window.__MIXPEEK__.apiBaseUrl` (which resolves to `/api`) instead of hardcoding `https://api.mixpeek.com`. The Canvas proxy injects your API key and namespace header server-side, keeping credentials out of the browser.
</Note>

***

## Custom environment variables

Set custom environment variables on your app via the API:

```bash theme={null}
curl -X PATCH https://api.mixpeek.com/v1/apps/$APP_ID \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "build_config": {
      "env_vars": {
        "FEATURE_FLAG_NEW_UI": "true",
        "ANALYTICS_ID": "UA-12345"
      }
    }
  }'
```

Custom env vars are:

* Injected into `window.__MIXPEEK__` for browser access
* Available as `ctx.env` in [server functions](/canvas/apps/server-functions)
* Stored encrypted and never exposed in build logs

***

## Server function environment

Server functions receive all environment variables through `ctx.env`:

```typescript theme={null}
// api/config.ts
export default async function handler(ctx) {
  return {
    body: {
      feature_flag: ctx.env.FEATURE_FLAG_NEW_UI,
      api_key_set: !!ctx.env.MIXPEEK_API_KEY,
    },
  }
}
```

Server functions also have access to system environment variables like `MIXPEEK_API_KEY` and `MIXPEEK_NAMESPACE_ID` — these are injected server-side and never reach the browser.

***

## Environment-specific variables

Since Canvas supports multiple environments (production, staging, preview), you can set different variables per environment by deploying with different configurations.

***

## Related

* [Server Functions](/canvas/apps/server-functions)
* [Deploy from Code](/canvas/apps/deploy)
* [Apps Overview](/canvas/apps)