Environment Variables

The Dev Tool's Environment Variables page (/variables) is a visual manager for every .env variable the apps/web project uses. It scans all of your .env* files, resolves the effective value per mode, validates each value against its schema, and lets you edit values inline.

Open it from the sidebar, or run pnpm --filter dev-tool dev and visit http://localhost:3010/variables.

Where Variables Live

For the web app, variables are read from apps/web/.env*:

• apps/web/.env — public, non-sensitive defaults (committed). See apps/web/.env.template for the full list.
• apps/web/.env.development / apps/web/.env.production — mode-specific, non-secret overrides.
• apps/web/.env.local — secrets and local overrides (git-ignored).
• apps/web/.env.development.local / apps/web/.env.production.local — mode-specific secrets (git-ignored, highest precedence).

Public variables use the VITE_ prefix and are inlined into the client bundle at build time (import.meta.env.VITE_*). Unprefixed variables are server-only (process.env.*). For the complete variable reference and security notes, see Environment Variables Reference.

Modes and Precedence

The mode selector at the top-left switches between development and production. Each mode loads a different chain of files, and later files override earlier ones:

• development: .env → .env.development → .env.local → .env.development.local
• production: .env → .env.production → .env.local → .env.production.local

The manager shows the effective (winning) value for the selected mode, and the Override Chain under each variable shows exactly which files define it and which one wins. A variable defined in more than one file is tagged Overridden.

Reading the Page

Each variable card shows:

• The variable name, with a Required badge when the schema marks it required and an Overridden badge when multiple files define it.
• A short description of what the variable does.
• An editable input (with a copy button) pre-filled with the effective value. Secret variables are masked until revealed.
• The example value and the Override Chain.
• Whether it is a Public (VITE_-prefixed, client-exposed) or Private (server-only) variable, plus any .env (conflict) markers.

At the top, summary chips count how many variables are Valid, Invalid, and Overridden. Use the Filter variables dropdown or the search box to narrow the list (filter by secret, public, private, overridden, invalid, or deprecated), and toggle Display Invalid only to focus on problems.

The right-hand panel renders a live, syntax-highlighted preview of the resulting env file, grouped by category. Copy env file to clipboard copies it in KEY=value form.

Editing Values

Type a new value into any input; the change is debounced and saved automatically, and a toast confirms the write. The Dev Tool writes to the correct file for the selected mode and the variable's sensitivity:

Secrets always land in a git-ignored *.local file so you never commit them by accident.

Building a Production Config

To turn this into a correct, complete production configuration, follow the step-by-step Production Environment Variables guide.

Inspecting Values via MCP

The same functionality is exposed to AI agents through the MCP server (kit_env_schema, kit_env_read, and the update tools). Implementation lives in tooling/mcp-server/src/tools/env/. See MCP Server for setup.