Skip to main content

​
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)

VariableDescription
window.__MIXPEEK__.apiBaseUrlThe API proxy URL (/api)
window.__MIXPEEK__.appIdYour app’s ID
window.__MIXPEEK__.slugYour app’s slug
window.__MIXPEEK__.environmentCurrent 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.