Environment Variables

Overview

Canvas apps have two ways to access configuration:

Browser runtime — window.__MIXPEEK__ (injected into every HTML response)
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

// 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} />
}

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.

Custom environment variables

Set custom environment variables on your app via the API:

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
Stored encrypted and never exposed in build logs

Server function environment

Server functions receive all environment variables through ctx.env:

// 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.

Get started

Connect your data

Extract features

Build retrievers

Enrich & organize

Integrate & operate

Resources

Environment Variables

Overview

Browser runtime variables

System variables (always available)

Accessing in your app

Custom environment variables

Server function environment

Environment-specific variables

​Overview

​Browser runtime variables

​System variables (always available)

​Accessing in your app

​Custom environment variables

​Server function environment

​Environment-specific variables

​Related

Overview

Browser runtime variables

System variables (always available)

Accessing in your app

Custom environment variables

Server function environment

Environment-specific variables

Related