webcake-landing-mcp 1.0.8 → 1.0.10

package/README.md

@@ -54,15 +54,18 @@ valid element/page skeletons, a page validator, and tools to create or edit page
 The AI agent produces the full `{ page, popup, settings, options, cartConfigs }` JSON; `create_page`
 persists it (source-only — the page opens in the editor where re-saving renders it).
 
-## Two ways to run
+## Setup methods (pick one)
 
-| Mode | Command | When |
-|------|---------|------|
-| **CDN / npx** (no clone) | `npx -y webcake-landing-mcp` | Fastest start — npm fetches & runs it, no clone or build. Auto-updates to the latest published version. |
-| **Local** (cloned build) | `node /abs/path/dist/index.js` | Hacking on the server, offline, or pinning a specific build. Run `npm run build` first. |
+| # | Method | Best for | Auth | Jump to |
+|---|--------|----------|------|---------|
+| 1 | **Local stdio** — add to an IDE (Claude Desktop / Cursor / …) via `npx` or a built file | Daily use on your machine | env `WEBCAKE_JWT`, or `login`, or none (reference tools) | [IDE config](#configuration-by-ide--ai-tool) |
+| 2 | **`login`** — grab the token through the browser (no copy-paste) | Avoiding a manual token paste (stdio / single-user remote) | browser session → saved `auth.json` | [Connect once](#connect-once--grab-your-token-automatically-login) |
+| 3 | **Remote HTTP (`serve`)** — run as an HTTP server, test with MCP Inspector / `mcp-remote` / curl | Trying the remote transport locally | per-request `x-webcake-jwt` header, or env | [Remote](#run-as-a-remote-connector-streamable-http) |
+| 4 | **VPS + claude.ai connector** — deploy public HTTPS, add as a custom connector | Sharing one hosted server | single-account (env token); per-user needs OAuth (not implemented) | [Deploy on a VPS](#deploy-on-a-vps) |
 
-Both expose the exact same tools. Every IDE config below shows the **local** form; to use **CDN** mode,
-just swap `command`/`args` for the npx form (see [Run without cloning](#run-without-cloning-npx)).
+Two **run forms** apply to any method: **`npx -y webcake-landing-mcp …`** (no clone, auto-updates) or **`node /abs/path/dist/index.js …`** (a cloned build — run `npm run build` first). The IDE configs below show the local form; swap `command`/`args` for the npx form to use CDN mode.
+
+The **reference + generation tools** (`get_generation_guide`, `list_elements`, `validate_page`, …) work with **zero config**; only the **persistence tools** (`create_page`, `update_page`, `list_pages`, `get_page`, `list_organizations`) need a token. Credentials resolve in order: **per-request header → env var → saved `auth.json`** (`login`).
 
 ## Quick Install (Recommended)
 
@@ -144,14 +147,14 @@ npx -y github:vuluu2k/webcake-landing-mcp
 config into your IDE. The bundled `install` subcommand does that step for you, no clone needed:
 
 ```bash
-# Interactive — asks for env + which IDE(s) step by step
+# Interactive — pick environment, log in via browser (or paste a JWT), pick IDE(s)
 npx -y webcake-landing-mcp install
 
-# Non-interactive — configure every supported IDE at once
-npx -y webcake-landing-mcp install --ide all --jwt <your-jwt> --api-base http://localhost:5800
+# Non-interactive — configure every supported IDE at once (env + token via flags)
+npx -y webcake-landing-mcp install --ide all --env prod --jwt <your-jwt>
 
-# Just one IDE
-npx -y webcake-landing-mcp install --ide cursor --jwt <your-jwt>
+# Local dev — point at your local stack (localhost:5800 / :5173)
+npx -y webcake-landing-mcp install --ide cursor --env local --jwt <your-jwt>
 
 # Remove the server from every IDE config
 npx -y webcake-landing-mcp uninstall
@@ -159,8 +162,10 @@ npx -y webcake-landing-mcp uninstall
 
 It writes a `webcake-landing` entry (using the `npx` launch form below) into the right config file
 for each target: `claude-desktop`, `claude-code`, `cursor`, `windsurf`, `augment` (VS Code), `codex`,
-or `all`. Flags: `--ide`, `--api-base`, `--jwt`, `--org-id`, `--host`, `--app-base`, `--npx`/`--local`,
-`-y`. Run `npx -y webcake-landing-mcp --help` for the full list.
+or `all`. Interactively it asks for the **environment** (`local`/`staging`/`prod`, which sets the API +
+app URLs) and whether to **log in via the browser or paste a JWT**. Flags: `--ide`, `--env`, `--jwt`,
+`--org-id`, `--api-base`/`--app-base`/`--host` (advanced overrides), `--npx`/`--local`, `-y`. Run
+`npx -y webcake-landing-mcp install --help` for the full list.
 
 ### Manual config
 
@@ -173,7 +178,7 @@ The MCP config is the same as the local one, but `command`/`args` point at `npx`
       "command": "npx",
       "args": ["-y", "webcake-landing-mcp"],
       "env": {
-        "WEBCAKE_API_BASE": "http://localhost:5800",
+        "WEBCAKE_ENV": "prod",
         "WEBCAKE_JWT": "<your-jwt>"
       }
     }
@@ -202,6 +207,12 @@ host), then in Claude → **Add custom connector**:
 - **Name**: `webcake-landing`
 - **Remote MCP server URL**: `https://<your-host>/mcp`
 
+The dialog has no header field, so to pass a token through it, **put it in the URL**:
+`https://<your-host>/mcp?jwt=<ljwt>` (also accepts `&api_base=…`, `&org_id=…`, `&host=…`, `&app_base=…`).
+Give each person a URL with their own `jwt` → **per-user without OAuth**. An explicit `x-webcake-jwt` header
+still wins over the query. ⚠️ A token in a URL can land in access/proxy logs — require **HTTPS** and disable
+query-string logging on your reverse proxy; a header (or OAuth) is safer when the client supports it.
+
 ### Auth — per-request, multi-user (no shared token)
 
 In stdio mode the JWT comes from env. In HTTP mode each request carries the caller's **own** credentials
@@ -222,9 +233,54 @@ by setting `WEBCAKE_API_BASE` + `WEBCAKE_JWT` in the host's env and keeping the
 > no secret; only the persistence tools (`create_page`, `update_page`, …) use the JWT. If a request has no
 > JWT, those tools return `missing_env` instead of touching the network.
 >
-> Note: the basic claude.ai connector dialog may not let you set custom headers (it offers OAuth, which this
-> server does not implement yet). For the header-based flow, use a client/proxy that can inject headers, or
-> run single-user with env vars behind a private URL.
+> Note: the claude.ai connector dialog has **no header field** (only OAuth, which this server does not
+> implement yet). Two ways around it: put the token in the URL as `?jwt=<ljwt>` (above — per-user, but the
+> token shows up in logs), or use a header-capable client (`mcp-remote --header …`, below). A token in the
+> server's env instead gives a shared **single-account** for everyone on that URL.
+
+### Test it locally (no public URL needed)
+
+`localhost` can't be used in the claude.ai dialog (Anthropic fetches the URL from its own servers). To try the
+running `serve` server on your machine:
+
+- **MCP Inspector** (GUI — easiest): `npx @modelcontextprotocol/inspector` → Transport **Streamable HTTP** →
+  URL `http://localhost:8787/mcp` → under Headers add `x-webcake-jwt` (+ `x-webcake-api-base`) → Connect → call tools.
+- **`mcp-remote`** (use the remote server from a stdio client like Claude Desktop, with headers):
+  ```json
+  { "mcpServers": { "webcake-remote": { "command": "npx",
+    "args": ["-y", "mcp-remote", "http://localhost:8787/mcp",
+             "--header", "x-webcake-jwt:<ljwt>",
+             "--header", "x-webcake-api-base:https://api.webcake.io"] } } }
+  ```
+- **curl**: `initialize` (read the `mcp-session-id` response header) → `tools/list` → `tools/call`, all with
+  `Accept: application/json, text/event-stream`.
+
+### Deploy on a VPS
+
+1. **Build + run as a service** — `/etc/systemd/system/webcake-mcp.service`:
+   ```ini
+   [Service]
+   WorkingDirectory=/opt/webcake-landing-mcp
+   ExecStart=/usr/bin/node dist/index.js serve --port 8787
+   Environment=WEBCAKE_API_BASE=https://api.webcake.io
+   Environment=WEBCAKE_JWT=<ljwt>          # single-account only — see auth note below
+   Restart=always
+   [Install]
+   WantedBy=multi-user.target
+   ```
+   `sudo systemctl enable --now webcake-mcp` (build once: `npm install && npm run build`).
+2. **HTTPS + domain** (claude.ai requires https) — e.g. Caddy auto-TLS, `/etc/caddy/Caddyfile`:
+   ```
+   mcp.yourdomain.com { reverse_proxy localhost:8787 }
+   ```
+3. **Add to claude.ai** → Remote MCP server URL = `https://mcp.yourdomain.com/mcp`.
+
+**Auth on a shared server:**
+- **Single-account** (works with the dialog today): `WEBCAKE_JWT` in the service env → everyone using the
+  connector shares that one Webcake account. Keep the URL private / gated; the token expires (~90 days).
+- **Per-user** (each person their own account): give each person a URL with their own `?jwt=<ljwt>` (works
+  through the dialog, but the token appears in logs), or use a header-capable client (`mcp-remote --header …`),
+  or add **OAuth** (not implemented) for the cleanest flow.
 
 ## Manual Setup (local)
 
@@ -247,7 +303,11 @@ Instead of copying a JWT by hand, run:
 # Production — zero config (defaults: connect via webcake.io, API via api.webcake.io):
 npx -y webcake-landing-mcp login
 
-# Local dev — point at your local SPA (5173) + API (5800):
+# Local dev / staging — pick a named environment (see Environments below):
+node dist/index.js login --env local      # SPA :5173 + API :5800
+node dist/index.js login --env staging    # staging.webcake.io + api.staging.webcake.io
+
+# …or point at custom URLs explicitly (these override --env):
 node dist/index.js login \
   --connect-url http://localhost:5173/mcp-connect \
   --api-base http://localhost:5800
@@ -257,9 +317,9 @@ It opens your browser → (log into Webcake if needed) → the token is saved to
 `~/.webcake-landing-mcp/auth.json`, which the server then reads automatically.
 
 You're already logged in to Webcake in your browser, so `login` just opens a Webcake "connect"
-page that reads your `jwt` cookie server-side and hands the token back to a localhost callback —
+page that reads your **`ljwt`** (landing) cookie and hands the token back to a localhost callback —
 no copy-paste. The saved token is used by **both** the stdio server and a single-user `serve`
-deployment (env vars still take precedence). JWTs last 90–365 days, so you rarely reconnect.
+deployment (env vars still take precedence). The landing JWT lasts ~90 days, so you rarely reconnect.
 
 Two URLs, don't mix them up:
 
@@ -276,12 +336,14 @@ Other flags: `--org-id`, `--port`, `--no-open`. Saved-file dir: `WEBCAKE_CONFIG_
 
 ```
 GET /mcp-connect?redirect_uri=<loopback>&state=<s>
-   → read the `jwt` cookie (the logged-in user's token)
-   → 302 to  <redirect_uri>?token=<jwt>&state=<s>
+   → read the `ljwt` cookie (the logged-in user's landing token)
+   → 302 to  <redirect_uri>?token=<ljwt>&state=<s>
    (if there's no cookie: 302 to the login page first, then back here)
 ```
 
 For safety, only honor `redirect_uri` values on `http://127.0.0.1:*` / `http://localhost:*`.
+(Reference implementation: `builderx_spa/src/views/McpConnect.vue` reads `cookies.get('ljwt')` — so this
+flow can also be done entirely in the SPA, no backend route needed.)
 
 > Multi-user remote (the claude.ai connector dialog) can't do this browser loopback — there each
 > user sends their own token via the `x-webcake-jwt` header (see the remote-connector section above).
@@ -290,7 +352,8 @@ For safety, only honor `redirect_uri` values on `http://127.0.0.1:*` / `http://l
 
 | Variable | Required | Description |
 |----------|----------|-------------|
-| `WEBCAKE_API_BASE` | No* | Backend base URL, e.g. `http://localhost:5800`. Required to persist. |
+| `WEBCAKE_ENV` | No | Named environment: `local` \| `staging` \| `prod`. Fills in `WEBCAKE_API_BASE` + `WEBCAKE_APP_BASE` from a preset (see table below). Also settable with the `--env <name>` flag. Explicit vars win. |
+| `WEBCAKE_API_BASE` | No* | Backend base URL, e.g. `http://localhost:5800`. Required to persist (or set `WEBCAKE_ENV`). |
 | `WEBCAKE_JWT` | No* | Account JWT (dashboard auth). Required to persist — expires, refresh when needed. |
 | `WEBCAKE_ORG_ID` | No | Default organization id for `create_page` (overridden by its `organization_id` arg). Omit → personal page. |
 | `WEBCAKE_HOST` | No | Optional `Host` header (Phoenix routes by host, e.g. `builder.localhost`). |
@@ -304,6 +367,28 @@ For safety, only honor `redirect_uri` values on `http://127.0.0.1:*` / `http://l
 > Persisting writes a real page to whatever `WEBCAKE_API_BASE` points at, using the JWT as that account.
 > Start against local/staging.
 
+### Environments (`--env` / `WEBCAKE_ENV`)
+
+Instead of setting both base URLs by hand, pick a named environment — one source of
+truth for the API + app bases:
+
+| `--env` / `WEBCAKE_ENV` | API base (`WEBCAKE_API_BASE`) | App base (`WEBCAKE_APP_BASE`) |
+|-------------------------|-------------------------------|-------------------------------|
+| `local` | `http://localhost:5800` | `http://localhost:5173` |
+| `staging` | `https://api.staging.webcake.io` | `https://staging.webcake.io` |
+| `prod` | `https://api.webcake.io` | `https://webcake.io` |
+
+```bash
+node dist/index.js serve --env staging        # remote server on the staging backend
+node dist/index.js login --env local          # connect against your local SPA + API
+WEBCAKE_ENV=prod node dist/index.js           # stdio, prod (env var form)
+```
+
+Explicit `WEBCAKE_API_BASE` / `WEBCAKE_APP_BASE` (or `--api-base`) still override the
+preset, field by field. On the remote HTTP server a client can override the server's
+environment per request with the **`x-webcake-env`** header or **`?env=`** query
+(e.g. `…/mcp?jwt=<token>&env=staging`) — so one server can serve multiple environments.
+
 ### How to get `WEBCAKE_JWT`
 
 1. Open the WebCake builder dashboard and log in

package/README.vi.md

@@ -55,15 +55,18 @@ element/trang hợp lệ, bộ kiểm tra trang, và các tool để tạo/sửa
 `{ page, popup, settings, options, cartConfigs }`; `create_page` lưu nó (chỉ-source — trang mở trong editor,
 lưu lại sẽ render).
 
-## Hai cách chạy
+## Các cách setup (chọn một)
 
-| Chế độ | Lệnh | Khi nào |
-|------|------|------|
-| **CDN / npx** (không clone) | `npx -y webcake-landing-mcp` | Khởi động nhanh nhất — npm tự tải & chạy, không cần clone hay build. Tự cập nhật bản mới nhất. |
-| **Local** (clone & build) | `node /abs/path/dist/index.js` | Khi đang sửa server, offline, hoặc cần ghim một bản build cụ thể. Chạy `npm run build` trước. |
+| # | Cách | Hợp cho | Auth | Xem |
+|---|------|---------|------|-----|
+| 1 | **Local stdio** — gắn vào IDE (Claude Desktop / Cursor / …) qua `npx` hoặc file build | Dùng hằng ngày trên máy | env `WEBCAKE_JWT`, hoặc `login`, hoặc không cần (tool tham chiếu) | [Cấu hình IDE](#cấu-hình-theo-ide--công-cụ-ai) |
+| 2 | **`login`** — tự lấy token qua browser (khỏi copy-paste) | Khỏi dán token tay (stdio / remote 1 người) | session browser → file `auth.json` | [Kết nối một lần](#kết-nối-một-lần--tự-lấy-token-login) |
+| 3 | **Remote HTTP (`serve`)** — chạy như HTTP server, test bằng MCP Inspector / `mcp-remote` / curl | Thử transport remote ở local | header `x-webcake-jwt` mỗi request, hoặc env | [Remote](#chạy-như-remote-connector-streamable-http) |
+| 4 | **VPS + claude.ai connector** — deploy HTTPS public, thêm làm custom connector | Chia sẻ 1 server hosted | single-account (token env); per-user cần OAuth (chưa có) | [Deploy lên VPS](#deploy-lên-vps) |
 
-Cả hai cùng expose y hệt các tool. Mọi cấu hình IDE bên dưới dùng dạng **local**; để dùng **CDN**, chỉ cần
-đổi `command`/`args` sang dạng npx (xem [Chạy không cần clone (npx)](#chạy-không-cần-clone-npx)).
+Hai **dạng chạy** áp dụng cho mọi cách: **`npx -y webcake-landing-mcp …`** (không clone, tự cập nhật) hoặc **`node /abs/path/dist/index.js …`** (bản đã clone & build — chạy `npm run build` trước). Cấu hình IDE bên dưới dùng dạng local; đổi `command`/`args` sang dạng npx để dùng CDN.
+
+Các **tool tham chiếu + generation** (`get_generation_guide`, `list_elements`, `validate_page`, …) chạy **zero config**; chỉ **tool lưu trữ** (`create_page`, `update_page`, `list_pages`, `get_page`, `list_organizations`) mới cần token. Token ưu tiên theo thứ tự: **header mỗi request → biến env → file `auth.json`** (`login`).
 
 ## Cài nhanh (Khuyến nghị)
 
@@ -144,23 +147,25 @@ npx -y github:vuluu2k/webcake-landing-mcp
 Lệnh con `install` đi kèm sẽ làm hộ bạn bước đó, không cần clone:
 
 ```bash
-# Tương tác — hỏi env + chọn IDE từng bước
+# Tương tác — chọn môi trường, đăng nhập qua trình duyệt (hoặc dán JWT), chọn IDE
 npx -y webcake-landing-mcp install
 
-# Không tương tác — cấu hình mọi IDE hỗ trợ cùng lúc
-npx -y webcake-landing-mcp install --ide all --jwt <your-jwt> --api-base http://localhost:5800
+# Không tương tác — cấu hình mọi IDE hỗ trợ cùng lúc (env + token qua cờ)
+npx -y webcake-landing-mcp install --ide all --env prod --jwt <your-jwt>
 
-# Chỉ một IDE
-npx -y webcake-landing-mcp install --ide cursor --jwt <your-jwt>
+# Local dev — trỏ vào stack local của bạn (localhost:5800 / :5173)
+npx -y webcake-landing-mcp install --ide cursor --env local --jwt <your-jwt>
 
 # Gỡ server khỏi mọi cấu hình IDE
 npx -y webcake-landing-mcp uninstall
 ```
 
 Nó ghi entry `webcake-landing` (dùng dạng khởi chạy `npx` bên dưới) vào đúng file cấu hình của từng IDE:
-`claude-desktop`, `claude-code`, `cursor`, `windsurf`, `augment` (VS Code), `codex`, hoặc `all`. Cờ:
-`--ide`, `--api-base`, `--jwt`, `--org-id`, `--host`, `--app-base`, `--npx`/`--local`, `-y`. Chạy
-`npx -y webcake-landing-mcp --help` để xem đầy đủ.
+`claude-desktop`, `claude-code`, `cursor`, `windsurf`, `augment` (VS Code), `codex`, hoặc `all`. Khi tương
+tác, nó hỏi **môi trường** (`local`/`staging`/`prod` — mặc định `prod`, dùng để đặt API + app URL) và cho
+chọn **đăng nhập qua trình duyệt hay dán JWT**. Cờ: `--ide`, `--env`, `--jwt`, `--org-id`,
+`--api-base`/`--app-base`/`--host` (ghi đè nâng cao), `--npx`/`--local`, `-y`. Chạy
+`npx -y webcake-landing-mcp install --help` để xem đầy đủ.
 
 ### Cấu hình thủ công
 
@@ -173,7 +178,7 @@ Cấu hình MCP giống bản local, chỉ khác `command`/`args` trỏ tới `n
       "command": "npx",
       "args": ["-y", "webcake-landing-mcp"],
       "env": {
-        "WEBCAKE_API_BASE": "http://localhost:5800",
+        "WEBCAKE_ENV": "prod",
         "WEBCAKE_JWT": "<your-jwt>"
       }
     }
@@ -184,6 +189,97 @@ Cấu hình MCP giống bản local, chỉ khác `command`/`args` trỏ tới `n
 > npx cache lại package sau lần chạy đầu, nên các lần sau khởi động nhanh. Dùng phiên bản ghim
 > (`webcake-landing-mcp@1.0.0`) nếu cần build tái lập được.
 
+## Chạy như remote connector (Streamable HTTP)
+
+Server còn nói được transport **remote MCP** (Streamable HTTP), nên có thể thêm qua dialog
+**"Add custom connector"** của Claude bằng một URL — không chỉ stdio local.
+
+Chạy chế độ HTTP (port mặc định `8787`, hoặc đặt `PORT` / `--port`):
+
+```bash
+npx -y webcake-landing-mcp serve --port 8787
+# → endpoint MCP tại http://localhost:8787/mcp   (GET / hoặc /health trả JSON trạng thái)
+```
+
+Đưa ra **HTTPS** ở URL public (reverse proxy, tunnel như `ngrok http 8787`, hoặc host bất kỳ), rồi vào
+Claude → **Add custom connector**:
+
+- **Name**: `webcake-landing`
+- **Remote MCP server URL**: `https://<host-của-bạn>/mcp`
+
+Dialog không có ô header, nên muốn truyền token qua đó thì **để vào URL**:
+`https://<host-của-bạn>/mcp?jwt=<ljwt>` (nhận thêm `&api_base=…`, `&org_id=…`, `&host=…`, `&app_base=…`).
+Mỗi người một URL với `jwt` riêng → **per-user mà không cần OAuth**. Header `x-webcake-jwt` thật vẫn ưu tiên
+hơn query. ⚠️ Token nằm trong URL có thể lọt vào access/proxy log — **bắt buộc HTTPS** và tắt log query ở
+reverse proxy; dùng header (hoặc OAuth) an toàn hơn nếu client hỗ trợ.
+
+### Auth — mỗi request, đa người dùng (không token chung)
+
+Ở stdio JWT lấy từ env. Ở chế độ HTTP, mỗi request mang credential **riêng** của người gọi qua header,
+nên server hosted là đa người dùng và không nhúng secret chung:
+
+| Header | Tương ứng | Ghi chú |
+|--------|-----------|---------|
+| `x-webcake-jwt` (hoặc `Authorization: Bearer <jwt>`) | `WEBCAKE_JWT` | token tài khoản — gửi mỗi request |
+| `x-webcake-org-id` | `WEBCAKE_ORG_ID` | org mặc định |
+| `x-webcake-api-base` | `WEBCAKE_API_BASE` | thường set 1 lần qua env trên host |
+| `x-webcake-app-base` | `WEBCAKE_APP_BASE` | base URL editor/preview |
+
+Header nào thiếu thì fallback về biến env tương ứng — nên cũng chạy **một người dùng** được bằng cách đặt
+`WEBCAKE_API_BASE` + `WEBCAKE_JWT` trong env của host và giữ URL riêng tư.
+
+> ⚠️ Tool tham chiếu + generation (`get_generation_guide`, `list_elements`, `validate_page`, …) không cần
+> secret; chỉ tool lưu trữ (`create_page`, `update_page`, …) dùng JWT. Request không có JWT thì các tool đó
+> trả `missing_env` chứ không gọi mạng.
+>
+> Lưu ý: dialog claude.ai **không có ô header** (chỉ có OAuth, mà server này **chưa làm**). Hai cách lách:
+> để token vào URL dạng `?jwt=<ljwt>` (như trên — per-user, nhưng token lộ trong log), hoặc dùng client hỗ trợ
+> header (`mcp-remote --header …`, bên dưới). Đặt token ở env server thì thành **single-account** chung cho mọi người trên URL đó.
+
+### Test ở local (không cần URL public)
+
+`localhost` không dùng được trong dialog claude.ai (Anthropic gọi URL từ server của họ). Để thử server `serve`
+chạy trên máy:
+
+- **MCP Inspector** (GUI — dễ nhất): `npx @modelcontextprotocol/inspector` → Transport **Streamable HTTP** →
+  URL `http://localhost:8787/mcp` → mục Headers thêm `x-webcake-jwt` (+ `x-webcake-api-base`) → Connect → bấm gọi tool.
+- **`mcp-remote`** (dùng server remote từ client stdio như Claude Desktop, kèm header):
+  ```json
+  { "mcpServers": { "webcake-remote": { "command": "npx",
+    "args": ["-y", "mcp-remote", "http://localhost:8787/mcp",
+             "--header", "x-webcake-jwt:<ljwt>",
+             "--header", "x-webcake-api-base:https://api.webcake.io"] } } }
+  ```
+- **curl**: `initialize` (đọc header `mcp-session-id` trả về) → `tools/list` → `tools/call`, tất cả kèm
+  `Accept: application/json, text/event-stream`.
+
+### Deploy lên VPS
+
+1. **Build + chạy như service** — `/etc/systemd/system/webcake-mcp.service`:
+   ```ini
+   [Service]
+   WorkingDirectory=/opt/webcake-landing-mcp
+   ExecStart=/usr/bin/node dist/index.js serve --port 8787
+   Environment=WEBCAKE_API_BASE=https://api.webcake.io
+   Environment=WEBCAKE_JWT=<ljwt>          # chỉ cho single-account — xem ghi chú auth dưới
+   Restart=always
+   [Install]
+   WantedBy=multi-user.target
+   ```
+   `sudo systemctl enable --now webcake-mcp` (build 1 lần: `npm install && npm run build`).
+2. **HTTPS + domain** (claude.ai bắt buộc https) — vd Caddy tự cấp TLS, `/etc/caddy/Caddyfile`:
+   ```
+   mcp.yourdomain.com { reverse_proxy localhost:8787 }
+   ```
+3. **Thêm vào claude.ai** → Remote MCP server URL = `https://mcp.yourdomain.com/mcp`.
+
+**Auth trên server chia sẻ:**
+- **Single-account** (dùng được với dialog ngay): đặt `WEBCAKE_JWT` ở env service → mọi người dùng connector
+  chung 1 tài khoản Webcake. Giữ URL riêng tư / có cổng chặn; token hết hạn (~90 ngày).
+- **Per-user** (mỗi người 1 account): cho mỗi người một URL với `?jwt=<ljwt>` riêng (chạy được qua dialog,
+  nhưng token lộ trong log), hoặc dùng client hỗ trợ header (`mcp-remote --header …`), hoặc thêm **OAuth**
+  (chưa làm) cho gọn nhất.
+
 ## Cài thủ công (local)
 
 ```bash
@@ -197,15 +293,67 @@ npm run smoke      # self-test offline của factory + validator (in "ALL GOOD")
 Các tool tham chiếu/kiểm tra chạy với **zero config**. Biến môi trường chỉ cần cho các tool lưu trữ
 (`create_page`, `update_page`, `list_pages`, `get_page`, `list_organizations`).
 
+## Kết nối một lần — tự lấy token (`login`)
+
+Thay vì copy JWT bằng tay, chạy:
+
+```bash
+# Production — zero config (mặc định: connect qua webcake.io, API qua api.webcake.io):
+npx -y webcake-landing-mcp login
+
+# Local dev — trỏ vào SPA (5173) + API (5800) ở máy:
+node dist/index.js login \
+  --connect-url http://localhost:5173/mcp-connect \
+  --api-base http://localhost:5800
+```
+
+Nó mở browser → (đăng nhập Webcake nếu cần) → token được lưu vào
+`~/.webcake-landing-mcp/auth.json`, server tự đọc.
+
+Bạn đang đăng nhập Webcake sẵn trong browser, nên `login` chỉ mở trang "connect" của Webcake — trang này
+đọc cookie **`ljwt`** (landing) và trả token về một callback loopback nội bộ — khỏi copy-paste. Token đã lưu
+được dùng bởi **cả** server stdio lẫn deploy `serve` một-người-dùng (env vẫn ưu tiên). Landing JWT sống ~90
+ngày nên hiếm khi phải kết nối lại.
+
+Hai URL, đừng nhầm:
+
+- **Trang connect = SPA** (`--connect-url` / `WEBCAKE_CONNECT_URL`): `https://webcake.io/mcp-connect` ở prod,
+  `http://localhost:5173/mcp-connect` ở local. Nếu không, suy ra từ `WEBCAKE_APP_BASE` + `/mcp-connect`,
+  mặc định `https://webcake.io/mcp-connect`.
+- **API base = backend** (`--api-base` / `WEBCAKE_API_BASE`): `https://api.webcake.io` ở prod,
+  `http://localhost:5800` ở local. Mặc định `https://api.webcake.io`.
+
+Cờ khác: `--org-id`, `--port`, `--no-open`. Thư mục file lưu: `WEBCAKE_CONFIG_DIR` (mặc định
+`~/.webcake-landing-mcp`).
+
+**Endpoint cần thêm ở backend** (trong Webcake backend — nơi giữ cookie session):
+
+```
+GET /mcp-connect?redirect_uri=<loopback>&state=<s>
+   → đọc cookie `ljwt` (landing token của user đang đăng nhập)
+   → 302 tới  <redirect_uri>?token=<ljwt>&state=<s>
+   (nếu chưa có cookie: 302 sang trang login trước, xong quay lại đây)
+```
+
+Để an toàn, chỉ chấp nhận `redirect_uri` ở `http://127.0.0.1:*` / `http://localhost:*`.
+(Mẫu tham khảo: `builderx_spa/src/views/McpConnect.vue` đọc `cookies.get('ljwt')` — nên flow này làm hẳn ở
+SPA cũng được, khỏi cần route backend.)
+
+> Remote đa người dùng (dialog claude.ai) không làm được browser loopback này — ở đó mỗi user gửi token riêng
+> qua header `x-webcake-jwt` (xem mục remote-connector ở trên).
+
 ## Biến môi trường
 
 | Biến | Bắt buộc | Mô tả |
 |----------|----------|-------------|
-| `WEBCAKE_API_BASE` | Không* | Base URL backend, ví dụ `http://localhost:5800`. Cần để lưu trang. |
+| `WEBCAKE_ENV` | Không | Môi trường có tên: `local` \| `staging` \| `prod`. Điền sẵn `WEBCAKE_API_BASE` + `WEBCAKE_APP_BASE` từ preset (xem bảng bên dưới). Cũng đặt được qua cờ `--env <name>`. Biến tường minh sẽ thắng. |
+| `WEBCAKE_API_BASE` | Không* | Base URL backend, ví dụ `http://localhost:5800`. Cần để lưu trang (hoặc đặt `WEBCAKE_ENV`). |
 | `WEBCAKE_JWT` | Không* | JWT tài khoản (auth dashboard). Cần để lưu trang — sẽ hết hạn, làm mới khi cần. |
 | `WEBCAKE_ORG_ID` | Không | Organization mặc định cho `create_page` (bị ghi đè bởi tham số `organization_id`). Bỏ trống → trang cá nhân. |
 | `WEBCAKE_HOST` | Không | Header `Host` tuỳ chọn (Phoenix route theo host, ví dụ `builder.localhost`). |
 | `WEBCAKE_APP_BASE` | Không | Base tuỳ chọn để dựng URL editor/preview trong kết quả. |
+| `WEBCAKE_CONNECT_URL` | Không | Trang "connect" (SPA) cho `login` (mặc định `https://webcake.io/mcp-connect`; nếu không thì `WEBCAKE_APP_BASE` + `/mcp-connect`). |
+| `WEBCAKE_CONFIG_DIR` | Không | Thư mục chứa `auth.json` do `login` ghi (mặc định `~/.webcake-landing-mcp`). |
 
 > \* `WEBCAKE_API_BASE` và `WEBCAKE_JWT` chỉ cần cho các tool lưu trữ. Các tool tham chiếu và kiểm tra
 > (`get_generation_guide`, `list_elements`, `get_element`, `validate_page`, …) chạy không cần chúng.
@@ -213,6 +361,28 @@ Các tool tham chiếu/kiểm tra chạy với **zero config**. Biến môi trư
 > Lưu trang sẽ ghi một trang thật vào nơi `WEBCAKE_API_BASE` trỏ tới, dùng JWT làm tài khoản đó.
 > Hãy bắt đầu với local/staging.
 
+### Môi trường (`--env` / `WEBCAKE_ENV`)
+
+Thay vì đặt thủ công cả hai base URL, hãy chọn một môi trường có tên — một nguồn sự thật duy nhất
+cho API + app base (mặc định là `prod`):
+
+| `--env` / `WEBCAKE_ENV` | API base (`WEBCAKE_API_BASE`) | App base (`WEBCAKE_APP_BASE`) |
+|-------------------------|-------------------------------|-------------------------------|
+| `local` | `http://localhost:5800` | `http://localhost:5173` |
+| `staging` | `https://api.staging.webcake.io` | `https://staging.webcake.io` |
+| `prod` *(mặc định)* | `https://api.webcake.io` | `https://webcake.io` |
+
+```bash
+node dist/index.js serve --env staging        # server remote trỏ backend staging
+node dist/index.js login --env local          # đăng nhập vào SPA + API local
+WEBCAKE_ENV=prod node dist/index.js           # stdio, prod (dạng biến môi trường)
+```
+
+`WEBCAKE_API_BASE` / `WEBCAKE_APP_BASE` (hoặc `--api-base`) tường minh vẫn ghi đè preset theo từng
+trường. Trên server HTTP remote, client có thể ghi đè môi trường của server theo từng request bằng
+header **`x-webcake-env`** hoặc query **`?env=`** (ví dụ `…/mcp?jwt=<token>&env=staging`) — nên một
+server phục vụ được nhiều môi trường.
+
 ### Cách lấy `WEBCAKE_JWT`
 
 1. Mở dashboard builder WebCake và đăng nhập

package/dist/auth/login.js

@@ -19,13 +19,7 @@
 import { createServer } from "node:http";
 import { randomBytes } from "node:crypto";
 import { spawn } from "node:child_process";
-import { saveSavedConfig } from "../persistence/config.js";
-// Production defaults — the connect page lives on the SPA (webcake.io), the API
-// lives on api.webcake.io. For local dev override with --connect-url / --api-base
-// (e.g. http://localhost:5173/mcp-connect and http://localhost:5800) or the
-// WEBCAKE_APP_BASE / WEBCAKE_API_BASE env vars.
-const DEFAULT_CONNECT_URL = "https://webcake.io/mcp-connect";
-const DEFAULT_API_BASE = "https://api.webcake.io";
+import { saveSavedConfig, resolveEnv, ENVIRONMENTS } from "../persistence/config.js";
 function parseArgs(argv) {
     const get = (name) => {
         const i = argv.indexOf(name);
@@ -53,21 +47,22 @@ function openBrowser(url) {
 const SUCCESS_HTML = `<!doctype html><meta charset="utf-8"><title>Connected</title>
 <body style="font-family:system-ui;text-align:center;padding:48px">
 <h2>✓ Connected to Webcake</h2><p>You can close this tab and return to your terminal.</p></body>`;
-function resolveConnectUrl(opts) {
+function resolveConnectUrl(opts, appBase) {
     if (opts.connectUrl)
         return opts.connectUrl;
     if (process.env.WEBCAKE_CONNECT_URL)
         return process.env.WEBCAKE_CONNECT_URL;
-    // The connect page is on the SPA (WEBCAKE_APP_BASE), NOT the API base.
-    const appBase = process.env.WEBCAKE_APP_BASE;
-    if (appBase)
-        return `${appBase.replace(/\/+$/, "")}/mcp-connect`;
-    return DEFAULT_CONNECT_URL;
+    // The connect page is on the SPA (appBase, from the env preset), NOT the API base.
+    return `${appBase.replace(/\/+$/, "")}/mcp-connect`;
 }
 export async function runLogin(argv) {
     const opts = parseArgs(argv);
-    const connectUrl = resolveConnectUrl(opts);
-    const apiBase = opts.apiBase || process.env.WEBCAKE_API_BASE || DEFAULT_API_BASE;
+    // Named environment (set by the global --env flag / WEBCAKE_ENV); prod is the
+    // zero-config default. Explicit --api-base / WEBCAKE_APP_BASE still win per field.
+    const preset = resolveEnv(process.env.WEBCAKE_ENV) ?? ENVIRONMENTS.prod;
+    const apiBase = opts.apiBase || process.env.WEBCAKE_API_BASE || preset.apiBase;
+    const appBase = process.env.WEBCAKE_APP_BASE || preset.appBase;
+    const connectUrl = resolveConnectUrl(opts, appBase);
     const state = randomBytes(16).toString("hex");
     await new Promise((resolve, reject) => {
         const server = createServer((req, res) => {
@@ -83,15 +78,13 @@ export async function runLogin(argv) {
             }
             const path = saveSavedConfig({
                 jwt: token,
-                ...(apiBase ? { base: apiBase.replace(/\/+$/, "") } : {}),
+                base: apiBase.replace(/\/+$/, ""),
+                appBase: appBase.replace(/\/+$/, ""),
                 ...(opts.orgId ? { orgId: opts.orgId } : {}),
                 savedAt: new Date().toISOString(),
             });
             res.writeHead(200, { "content-type": "text/html" }).end(SUCCESS_HTML);
-            console.error(`\n✓ Connected. Token saved to ${path}`);
-            if (!apiBase) {
-                console.error("  tip: also set WEBCAKE_API_BASE (or pass --api-base) so the server knows the backend URL.");
-            }
+            console.error(`\n✓ Connected. Token saved to ${path} (api ${apiBase}).`);
             server.close();
             resolve();
         });

package/dist/http.js

@@ -4,9 +4,10 @@
  *
  * Stateful sessions: an `initialize` POST (no session id) spins up a fresh
  * McpServer + transport and returns an `mcp-session-id`; later requests reuse it
- * via that header. Every request's headers carry the caller's OWN Webcake JWT
- * (see persistence/config.ts#configFromHeaders), so a hosted server is multi-user
- * and never bakes a shared token into env.
+ * via that header. Each request carries the caller's OWN Webcake JWT — via a header
+ * (x-webcake-jwt / Authorization) OR a URL query param (.../mcp?jwt=<token>, for
+ * clients like the claude.ai dialog that can't set headers; see applyQueryAuth +
+ * persistence/config.ts#configFromHeaders). So a hosted server is multi-user.
  *
  * All logging stays on stderr (console.error), same as stdio mode.
  */
@@ -30,6 +31,36 @@ async function readBody(req) {
     const raw = Buffer.concat(chunks).toString("utf8").trim();
     return raw ? JSON.parse(raw) : undefined;
 }
+// Map credentials passed in the URL query (e.g. .../mcp?jwt=<token>) onto the
+// x-webcake-* headers so the normal per-request config path handles them. This is
+// for clients that can't set custom headers — notably the claude.ai connector
+// dialog, which only takes a URL. An explicit header always wins over the query.
+// SECURITY: a token in the URL can land in access/proxy logs — prefer headers,
+// require HTTPS, and disable query-string logging on your reverse proxy.
+const QUERY_AUTH = {
+    jwt: "x-webcake-jwt",
+    env: "x-webcake-env",
+    api_base: "x-webcake-api-base",
+    org_id: "x-webcake-org-id",
+    host: "x-webcake-host",
+    app_base: "x-webcake-app-base",
+};
+function applyQueryAuth(req) {
+    const q = (req.url ?? "").indexOf("?");
+    if (q === -1)
+        return;
+    const params = new URLSearchParams((req.url ?? "").slice(q + 1));
+    for (const [param, header] of Object.entries(QUERY_AUTH)) {
+        const value = params.get(param);
+        // Only fill in when there's no explicit header (header wins). The transport
+        // builds its Request from `req.rawHeaders` (via @hono/node-server), so we MUST
+        // push there — mutating `req.headers` alone is not seen by the tool handlers.
+        if (value && req.headers[header] == null) {
+            req.headers[header] = value;
+            req.rawHeaders.push(header, value);
+        }
+    }
+}
 export async function startHttpServer(port) {
     // mcp-session-id -> live transport (each bound to its own McpServer instance).
     const transports = new Map();
@@ -41,6 +72,8 @@ export async function startHttpServer(port) {
         }
         if (path !== MCP_PATH)
             return rpcError(res, 404, `Not found. Send MCP requests to ${MCP_PATH}.`);
+        // Accept credentials via ?jwt=/?api_base=/... (for clients that can't set headers).
+        applyQueryAuth(req);
         const sidHeader = req.headers["mcp-session-id"];
         const sessionId = Array.isArray(sidHeader) ? sidHeader[0] : sidHeader;
         try {

package/dist/index.js

@@ -17,7 +17,40 @@
  */
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { createServer } from "./server.js";
+import { ENVIRONMENTS, ENV_NAMES, isEnvName } from "./persistence/config.js";
+/**
+ * Global `--env <local|staging|prod>` flag (or `--env=<name>`): selects the API +
+ * app base URLs from a named preset by setting WEBCAKE_ENV, which readConfig + login
+ * then pick up. Explicit WEBCAKE_API_BASE / WEBCAKE_APP_BASE still win. An unknown
+ * value from the flag fails fast; an unknown WEBCAKE_ENV is dropped so explicit
+ * bases (or per-request headers) still resolve. stderr only — stdout is the MCP channel.
+ */
+function applyEnvFlag(argv) {
+    let fromFlag;
+    for (let i = 2; i < argv.length; i++) {
+        const a = argv[i];
+        if (a === "--env")
+            fromFlag = argv[i + 1];
+        else if (a.startsWith("--env="))
+            fromFlag = a.slice("--env=".length);
+    }
+    const name = fromFlag ?? process.env.WEBCAKE_ENV;
+    if (!name)
+        return;
+    if (!isEnvName(name)) {
+        console.error(`[webcake] unknown environment "${name}". Valid: ${ENV_NAMES.join(", ")}.`);
+        if (fromFlag)
+            process.exit(1); // explicit flag typo → fail fast
+        delete process.env.WEBCAKE_ENV; // bad WEBCAKE_ENV → ignore, fall through to explicit bases
+        return;
+    }
+    process.env.WEBCAKE_ENV = name;
+    const p = ENVIRONMENTS[name];
+    console.error(`[webcake] environment "${name}" — api ${p.apiBase}, app ${p.appBase}`);
+}
 async function main() {
+    // Resolve the named environment (--env / WEBCAKE_ENV) before any config is read.
+    applyEnvFlag(process.argv);
     // Subcommand dispatch: `webcake-landing-mcp install|uninstall` runs the
     // bundled IDE installer instead of starting the MCP server. Default (no
     // subcommand) starts the stdio server as usual.

package/dist/install.js

@@ -22,6 +22,8 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { spawnSync } from "node:child_process";
 import { createInterface } from "node:readline";
+import { ENVIRONMENTS, isEnvName } from "./persistence/config.js";
+import { runLogin } from "./auth/login.js";
 const NAME = "webcake-landing";
 const PKG = "webcake-landing-mcp";
 const HOME = homedir();
@@ -290,18 +292,19 @@ function printHelp() {
 ${c.bold}webcake-landing-mcp install${c.reset} — configure the MCP server in your IDE(s)
 
 ${c.bold}Usage${c.reset}
-  npx -y ${PKG} install                 # interactive (asks step by step)
-  npx -y ${PKG} install --ide all       # non-interactive, all IDEs
-  npx -y ${PKG} install --ide claude-code --jwt <JWT> --api-base http://localhost:5800
+  npx -y ${PKG} install                 # interactive: pick environment, log in (or paste a JWT), pick IDEs
+  npx -y ${PKG} install --ide all       # non-interactive, all IDEs (defaults to --env prod)
+  npx -y ${PKG} install --ide claude-code --env local --jwt <JWT>
   npx -y ${PKG} uninstall               # remove from every IDE config
 
 ${c.bold}Flags${c.reset}
   --ide <list>      comma list: claude-desktop, claude-code, cursor, windsurf, augment, codex, all
-  --api-base <url>  WEBCAKE_API_BASE (default http://localhost:5800)
-  --jwt <token>     WEBCAKE_JWT (account token; optional, needed to persist)
-  --org-id <id>     WEBCAKE_ORG_ID (optional)
-  --host <host>     WEBCAKE_HOST (optional)
-  --app-base <url>  WEBCAKE_APP_BASE (optional)
+  --env <name>      WEBCAKE_ENV: local | staging | prod (default prod) — sets the API + app base URLs
+  --jwt <token>     WEBCAKE_JWT (account token; optional — or log in via the browser interactively)
+  --org-id <id>     WEBCAKE_ORG_ID (optional default organization)
+  --api-base <url>  override the --env API base (advanced)
+  --app-base <url>  override the --env app base (advanced)
+  --host <host>     WEBCAKE_HOST (advanced; Phoenix host-routing header)
   --npx | --local   force the launch command form (default: auto-detect)
   -y, --yes         accept defaults, skip confirmations
   --uninstall       remove the server from all IDE configs
@@ -317,36 +320,72 @@ export async function runInstaller(argv) {
     log(`\n${c.cyan}${c.bold}Webcake Landing MCP — installer${c.reset}`);
     log(`${c.gray}Build & edit Webcake landing pages from a prompt. 12 tools.${c.reset}`);
     const interactive = !o.ide && process.stdin.isTTY && process.stdout.isTTY;
-    // 1) env
-    const env = {};
-    let apiBase = o.apiBase ?? process.env.WEBCAKE_API_BASE ?? "";
-    let jwt = o.jwt ?? process.env.WEBCAKE_JWT ?? "";
-    let orgId = o.orgId ?? process.env.WEBCAKE_ORG_ID ?? "";
-    const host = o.host ?? process.env.WEBCAKE_HOST ?? "";
-    const appBase = o.appBase ?? process.env.WEBCAKE_APP_BASE ?? "";
-    if (interactive) {
-        log(`\n${c.bold}1) Config${c.reset} ${c.gray}(Enter to skip — reference tools work with no creds)${c.reset}`);
-        apiBase =
-            (await ask(`  WEBCAKE_API_BASE [${apiBase || "http://localhost:5800"}]: `)) ||
-                apiBase ||
-                "http://localhost:5800";
-        jwt = (await ask(`  WEBCAKE_JWT (account token, optional): `)) || jwt;
-        orgId = (await ask(`  WEBCAKE_ORG_ID (optional): `)) || orgId;
+    // 1) environment — one choice sets the API + app base URLs (replaces the old
+    //    separate WEBCAKE_API_BASE / WEBCAKE_APP_BASE prompts). The global --env flag
+    //    / WEBCAKE_ENV is already validated in index.ts (applyEnvFlag).
+    let envName = isEnvName(process.env.WEBCAKE_ENV) ? process.env.WEBCAKE_ENV : "prod";
+    if (interactive && !isEnvName(process.env.WEBCAKE_ENV)) {
+        log(`\n${c.bold}1) Environment${c.reset} ${c.gray}(sets the Webcake API + app URLs)${c.reset}`);
+        log(`  1) prod      ${c.gray}${ENVIRONMENTS.prod.apiBase}${c.reset}  ${c.gray}(default)${c.reset}`);
+        log(`  2) staging   ${c.gray}${ENVIRONMENTS.staging.apiBase}${c.reset}`);
+        log(`  3) local     ${c.gray}${ENVIRONMENTS.local.apiBase}${c.reset}`);
+        const pick = (await ask("  Select [1=prod, Enter to accept]: ")).trim();
+        envName = { "1": "prod", "2": "staging", "3": "local" }[pick] ?? "prod";
+    }
+    process.env.WEBCAKE_ENV = envName; // so `login` below connects to the same environment
+    const preset = ENVIRONMENTS[envName];
+    // 2) authentication — interactively ASK how to authenticate: browser login (token
+    //    saved to ~/.webcake-landing-mcp/auth.json) or a pasted JWT. An explicit --jwt
+    //    skips the prompt; a non-TTY falls back to the WEBCAKE_JWT env var (for scripted
+    //    installs). Reference/validation tools work with no auth at all.
+    let jwt = o.jwt ?? "";
+    let authNote = jwt ? "JWT (from --jwt)" : "";
+    if (interactive && !jwt) {
+        log(`\n${c.bold}2) Authentication${c.reset} ${c.gray}(only needed to save pages to your account)${c.reset}`);
+        log(`  1) Log in via browser   ${c.gray}(recommended — opens Webcake, saves a token)${c.reset}`);
+        log(`  2) Paste a JWT token`);
+        log(`  3) Skip for now         ${c.gray}(reference/validation tools still work)${c.reset}`);
+        const pick = (await ask("  Select [1]: ")).trim() || "1";
+        if (pick === "1") {
+            info(`Connecting to ${preset.appBase} …`);
+            try {
+                await runLogin([]); // reads WEBCAKE_ENV for the connect URL + API base; saves auth.json
+                authNote = "browser login (saved to auth.json)";
+            }
+            catch (e) {
+                warn(`Login didn't complete (${e?.message ?? e}). Paste a JWT now, or run \`${PKG} login\` later.`);
+                jwt = (await ask("  WEBCAKE_JWT (or Enter to skip): ")).trim();
+            }
+        }
+        else if (pick === "2") {
+            jwt = (await ask("  WEBCAKE_JWT: ")).trim();
+        }
     }
-    else if (!apiBase) {
-        apiBase = "http://localhost:5800";
+    else if (!interactive) {
+        jwt = jwt || process.env.WEBCAKE_JWT || ""; // scripted / CI: fall back to ambient env
+    }
+    if (!authNote)
+        authNote = jwt ? "JWT" : "none — reference tools only";
+    // 3) optional default organization for create_page
+    let orgId = o.orgId ?? process.env.WEBCAKE_ORG_ID ?? "";
+    if (interactive && !orgId) {
+        orgId = (await ask(`\n${c.bold}3) WEBCAKE_ORG_ID${c.reset} ${c.gray}(optional, Enter to skip): ${c.reset}`)).trim();
     }
-    if (apiBase)
-        env.WEBCAKE_API_BASE = apiBase;
+    // env block written into IDE configs: WEBCAKE_ENV drives the URLs. A pasted JWT is
+    // written too; a browser login lives in auth.json instead. --api-base/--app-base/
+    // --host stay as advanced overrides for non-standard setups.
+    const env = { WEBCAKE_ENV: envName };
     if (jwt)
         env.WEBCAKE_JWT = jwt;
     if (orgId)
         env.WEBCAKE_ORG_ID = orgId;
-    if (host)
-        env.WEBCAKE_HOST = host;
-    if (appBase)
-        env.WEBCAKE_APP_BASE = appBase;
-    // 2) which IDEs
+    if (o.apiBase)
+        env.WEBCAKE_API_BASE = o.apiBase;
+    if (o.appBase)
+        env.WEBCAKE_APP_BASE = o.appBase;
+    if (o.host)
+        env.WEBCAKE_HOST = o.host;
+    // 4) which IDEs
     let ides = [];
     if (o.ide) {
         ides = o.ide
@@ -355,7 +394,7 @@ export async function runInstaller(argv) {
             .filter(Boolean);
     }
     else if (interactive) {
-        log(`\n${c.bold}2) Which IDE(s) to configure?${c.reset}`);
+        log(`\n${c.bold}4) Which IDE(s) to configure?${c.reset}`);
         log("  1) Claude Desktop   2) Claude Code (CLI)   3) Cursor");
         log("  4) Windsurf         5) Augment (VS Code)   6) Codex");
         log("  7) All              0) Skip");
@@ -383,13 +422,13 @@ export async function runInstaller(argv) {
         warn("No IDE selected — skipping configuration.");
         return;
     }
-    // 3) write
+    // 5) write
     const launch = resolveLaunch(o);
-    log(`\n${c.bold}3) Writing config${c.reset} ${c.gray}(launch: ${launch.command} ${launch.args.join(" ")})${c.reset}`);
+    log(`\n${c.bold}5) Writing config${c.reset} ${c.gray}(launch: ${launch.command} ${launch.args.join(" ")})${c.reset}`);
     runConfigure(ides, launch, env);
-    // 4) summary
+    // 6) summary
     log(`\n${c.green}${c.bold}✓ Done.${c.reset}`);
-    log(`  ${c.gray}API base : ${apiBase || "(unset)"}${c.reset}`);
-    log(`  ${c.gray}JWT      : ${jwt ? jwt.slice(0, 8) + "…" : "(unset — reference tools still work)"}${c.reset}`);
+    log(`  ${c.gray}Environment : ${envName}  (api ${o.apiBase || preset.apiBase})${c.reset}`);
+    log(`  ${c.gray}Auth        : ${authNote}${c.reset}`);
     log(`  Restart your IDE, then ask the AI: “Build a Webcake landing page”.\n`);
 }

package/dist/persistence/config.js

@@ -12,6 +12,9 @@
  * { config: null, missing } when required values are absent so the persistence
  * tools can report exactly what to provide.
  *
+ *   WEBCAKE_ENV       optional named environment (local|staging|prod) — fills in the
+ *                     API + app base URLs from a preset (see ENVIRONMENTS below). An
+ *                     explicit WEBCAKE_API_BASE / WEBCAKE_APP_BASE still wins over it.
  *   WEBCAKE_API_BASE  e.g. http://localhost:5800   (required to call the backend)
  *   WEBCAKE_JWT       the account JWT               (required to call the backend)
  *   WEBCAKE_ORG_ID    optional default organization id for create_page
@@ -22,9 +25,32 @@
 import { homedir } from "node:os";
 import { join } from "node:path";
 import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
+/**
+ * Named deployment environments — the single source of truth for the API + app
+ * base URLs. Selecting one (via the `--env` flag, WEBCAKE_ENV, the `x-webcake-env`
+ * header, or `?env=` in the URL) fills in both bases so callers don't repeat them.
+ * Explicit WEBCAKE_API_BASE / WEBCAKE_APP_BASE (or per-request overrides) win over
+ * the preset. `apiBase` is the backend; `appBase` is the SPA (editor/preview/connect).
+ */
+export const ENVIRONMENTS = {
+    local: { apiBase: "http://localhost:5800", appBase: "http://localhost:5173" },
+    staging: { apiBase: "https://api.staging.webcake.io", appBase: "https://staging.webcake.io" },
+    prod: { apiBase: "https://api.webcake.io", appBase: "https://webcake.io" },
+};
+export const ENV_NAMES = Object.keys(ENVIRONMENTS);
+/** True when `v` names a known environment (local|staging|prod). */
+export function isEnvName(v) {
+    return typeof v === "string" && Object.prototype.hasOwnProperty.call(ENVIRONMENTS, v);
+}
+/** The base URLs for a named environment, or undefined when the name is absent/unknown. */
+export function resolveEnv(name) {
+    return isEnvName(name) ? ENVIRONMENTS[name] : undefined;
+}
 export function readConfig(overrides = {}) {
     const saved = readSavedConfig();
-    const base = overrides.base ?? process.env.WEBCAKE_API_BASE ?? saved.base;
+    // A named environment supplies default base URLs; explicit values still win.
+    const preset = resolveEnv(overrides.env ?? process.env.WEBCAKE_ENV);
+    const base = overrides.base ?? process.env.WEBCAKE_API_BASE ?? preset?.apiBase ?? saved.base;
     const jwt = overrides.jwt ?? process.env.WEBCAKE_JWT ?? saved.jwt;
     const missing = [];
     if (!base)
@@ -39,7 +65,7 @@ export function readConfig(overrides = {}) {
             jwt: jwt,
             orgId: overrides.orgId ?? process.env.WEBCAKE_ORG_ID ?? saved.orgId,
             host: overrides.host ?? process.env.WEBCAKE_HOST ?? saved.host,
-            appBase: (overrides.appBase ?? process.env.WEBCAKE_APP_BASE ?? saved.appBase)?.replace(/\/+$/, ""),
+            appBase: (overrides.appBase ?? process.env.WEBCAKE_APP_BASE ?? preset?.appBase ?? saved.appBase)?.replace(/\/+$/, ""),
         },
         missing: [],
     };
@@ -53,9 +79,10 @@ function header(headers, name) {
  * send its own credentials per request instead of a server-wide env token:
  *   x-webcake-jwt        the account JWT (or `Authorization: Bearer <jwt>`)
  *   x-webcake-org-id     organization id
- *   x-webcake-api-base   backend base URL (usually set once via env instead)
+ *   x-webcake-env        named environment (local|staging|prod) for the base URLs
+ *   x-webcake-api-base   backend base URL (overrides the env preset)
  *   x-webcake-host       Host header override
- *   x-webcake-app-base   editor/preview URL base
+ *   x-webcake-app-base   editor/preview URL base (overrides the env preset)
  * Any header that is absent falls back to the corresponding env var in readConfig.
  */
 export function configFromHeaders(headers) {
@@ -67,6 +94,7 @@ export function configFromHeaders(headers) {
         orgId: header(headers, "x-webcake-org-id"),
         host: header(headers, "x-webcake-host"),
         appBase: header(headers, "x-webcake-app-base"),
+        env: header(headers, "x-webcake-env"),
     };
 }
 /** Directory for the saved auth file (override with WEBCAKE_CONFIG_DIR). */

package/dist/smoke.js

@@ -4,6 +4,7 @@
  */
 import { createElement, CONTAINER_TYPES, FIELD_TYPES, LIBRARY, ELEMENT_TYPES, ELEMENTS, } from "./domains/landing/elements/index.js";
 import { validatePage, pageSchema } from "./domains/landing/validate.js";
+import { readConfig, resolveEnv, ENV_NAMES } from "./persistence/config.js";
 let failures = 0;
 const check = (name, cond, extra) => {
     if (cond) {
@@ -208,5 +209,21 @@ const bindingsGood = {
 };
 const rbg = validatePage(bindingsGood);
 check("clean form has no binding warnings", rbg.warnings.length === 0, rbg.warnings);
+console.log("== config: named environment presets (local/staging/prod) ==");
+{
+    // Deterministic: isolate from any ambient WEBCAKE_* and the saved auth.json on the dev box.
+    for (const k of ["WEBCAKE_API_BASE", "WEBCAKE_APP_BASE", "WEBCAKE_ENV", "WEBCAKE_JWT", "WEBCAKE_ORG_ID", "WEBCAKE_HOST"])
+        delete process.env[k];
+    process.env.WEBCAKE_CONFIG_DIR = "/nonexistent/webcake-smoke";
+    check("env names are local/staging/prod", setEq(new Set(ENV_NAMES), ["local", "staging", "prod"]), ENV_NAMES);
+    check("staging preset resolves to api+app bases", resolveEnv("staging")?.apiBase === "https://api.staging.webcake.io" && resolveEnv("staging")?.appBase === "https://staging.webcake.io");
+    check("unknown env name → undefined", resolveEnv("bogus") === undefined);
+    const prod = readConfig({ env: "prod", jwt: "t" }).config;
+    check("readConfig(env=prod) fills api+app base", prod?.base === "https://api.webcake.io" && prod?.appBase === "https://webcake.io", prod);
+    const local = readConfig({ env: "local", jwt: "t" }).config;
+    check("readConfig(env=local) fills api+app base", local?.base === "http://localhost:5800" && local?.appBase === "http://localhost:5173", local);
+    check("explicit base overrides the preset", readConfig({ env: "prod", base: "http://x:1", jwt: "t" }).config?.base === "http://x:1");
+    check("unknown env leaves base missing", readConfig({ env: "bogus", jwt: "t" }).missing.includes("WEBCAKE_API_BASE"));
+}
 console.log(`\n${failures === 0 ? "ALL GOOD" : failures + " FAILURE(S)"}`);
 process.exit(failures === 0 ? 0 : 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "MCP server exposing Webcake landing-page element schemas + AI usage hints, and persisting LLM-generated page sources to a Webcake backend.",
   "type": "module",
   "bin": {