# Connect Claude or Codex > Add a Genesis project to the Claude app or to OpenAI Codex and build it on your own AI subscription — a scoped, revokable, per-project connection with all of Genesis's safety checks. Source: https://support.estage.com/claude-code Part of the ESTAGE Support help center (https://support.estage.com). Full knowledge base: https://support.estage.com/llms-full.txt --- You can connect a single Genesis project to your own coding agent — **Claude** (the Claude app, web or Desktop, and Claude Code) or **OpenAI Codex** — and let it build that project directly: edit pages, generate images, add a backend, publish. The connection is **per-project**, **browser-approved**, and **revokable** — and the AI runs on **your own subscription**, so heavy building doesn't spend your Genesis credits. Both agents talk to the **same** Genesis server and get the **same** tools and the **same** guardrails. Only the setup differs, which is why the panel in Genesis has a **Claude** tab and a **Codex** tab — pick yours and follow that tab. > **Caution: Beta** > > This is an early, evolving feature with a few rough edges. The connection is **per-project** and > **revokable**, and a couple of steps (order-form products + payment keys) still happen in > Settings — see [Limits](#limits--good-to-know). ## One connection per project — and name it by project ID This is the key idea: **each Genesis project you want to work on is its own connection**. There's no "current project" — the agent acts on whichever connection you point it at. So when you add one, **give it a name that includes the project ID**, e.g.: - `Genesis · Acme Store · 73891` - `Genesis · Blog · 80124` That way, when several projects are connected, you can tell them apart at a glance and tell the agent exactly which one to use. The project ID is right in the connection's URL (`…/api/agent/**73891**/mcp`) and on the project itself in Genesis. ## Where the setup lives in Genesis Everything below starts in the same place: **Account → Integrations → Coding agents**. - Pick the project from the **Project** dropdown. - Choose the **Claude** or **Codex** tab. - Follow the steps that tab shows. ## Connect the Claude app (recommended) A **custom connector** — one-time browser sign-in, no tokens to copy. **1. In Genesis — copy the project's connector URL** On the **Claude** tab, copy the **MCP server URL**. It looks like: ```text https://genesis.estage.com/api/agent/73891/mcp ``` The number in it (`73891`) is your **project ID** — note it for the connector name. **2. In the Claude app — add it as a custom connector** - Open **Settings → Connectors → Add custom connector** (in claude.ai or Claude Desktop). - **Paste the URL.** - **Name the connector with the project ID** — e.g. *"Genesis · Acme Store · 73891"* (see [above](#one-connection-per-project--and-name-it-by-project-id)). - Click **Add**. **3. Approve access in your browser** Claude opens a Genesis page in your browser: - **Sign in** to Genesis (if you aren't already). - You'll see a **consent screen** showing the **project**, the **permissions** being granted (read/edit code, preview, backend, connectors), and your account. - Click **Allow**. That's it — Claude is connected to that one project. No token to paste; the sign-in handles everything, and Claude keeps itself authorized in the background. **4. Repeat for each project** Want to work on another site? Do the same for that project — a **new connector**, its own URL, its own name with its own project ID. They sit side by side in Claude's connector list. ## Connect Codex (recommended) Codex signs in the same way, from the terminal — **two commands, no token to copy**. The **Codex** tab gives you both, already filled in with your project ID: ```bash codex mcp add genesis-73891 --url https://genesis.estage.com/api/agent/73891/mcp codex mcp login genesis-73891 ``` - The first command registers the project as an MCP server called `genesis-73891` — **name it by project ID** so several projects stay apart. - The second opens your browser: **sign in** to Genesis and **Allow** on the same consent screen Claude users see. Codex stores the result itself; nothing is pasted into a config file. Check it landed with `codex mcp list`. To sign out again: `codex mcp logout genesis-73891`. > **Note** > > This needs a recent **Codex CLI** (one that has `codex mcp login`). On an older version — or on > a machine with no browser — use the [token setup](#no-browser-a-scoped-token-instead) instead. Repeat both commands per project, each with its own name and URL. ## Working across several connected projects Because each project is a separate connection, **be explicit about which one you mean** at the start of a session, so the agent uses the right one: ```text Work on project 73891 — add a Contact page and link it in the nav. Use the Acme Store connection: generate a new hero image and show me a screenshot. ``` A quick way to confirm you're on the right one: ask *"what project am I connected to, and what pages does it have?"* — it reads the project and tells you. ## Point the agent at what you're looking at Your agent can see **what you've selected in the live builder** — so *"make this heading bigger"*, *"change this button"*, or *"on this page…"* resolve to exactly what you clicked, not a guess. 1. In the builder header, open the **⋯** menu and click **Share selection**. (It reads **Stop sharing selection** once it's on.) It works for any connected agent, Codex included. 2. Keep the builder open and click the element you mean in the preview. 3. In your agent, refer to it naturally — *"this"*, *"this section"*, *"on this page"*. It reads your **live selection** (the clicked element's tag, text, styling, and source location, plus the open page) and acts on that exact element. It updates as you click, and multi-select works too. Turn the toggle **off** (or close the builder) and nothing is shared — the agent simply works from your words. It's per-you and off by default. ## What your agent can do in your project Through the connection, your agent has the same building powers — and the same guardrails — as the in-app Genesis AI. Grouped by what you'd ask for: ### Explore & understand - **Read the project context** — its rules, theme tokens, and the full file tree. - **Search** the project for text, components, or where something is defined. - **Read any file** before changing it. - **See your live selection** — the element you've clicked in the builder + the open page (when **Share selection** is on), so *"this"* / *"on this page"* resolves exactly. See [Point the agent at what you're looking at](#point-the-agent-at-what-youre-looking-at). ### Build & edit - **Edit code** — pages, components, styles — every write runs through Genesis's validation (broken JSX rejected, protected files blocked, element IDs preserved). - **Create & delete pages** — it writes the page + route and registers it in your **Pages** list automatically. - **Generate images** — describe a hero shot, background, or product image and it returns a **hosted** image, ready to use. ### Manage content & data - **[Global Variables](https://support.estage.com/project-settings-global-variables)** — read, set, and remove phone, email, prices-in-text, links. - **Catalogs / [Live Controls](https://support.estage.com/capabilities-live-controls-tag) data** — list and edit your data-driven lists (products, testimonials, pricing, gallery) directly. - **ESTAGE elements** — list what's on the page and provision new ones: [order forms](https://support.estage.com/order-forms), protected/rich text, [live stream](https://support.estage.com/live), and more. ### Backend (Dedicated Cloud) For projects on [Dedicated Cloud](https://support.estage.com/cloud), your agent can work the backend too: - **Inspect the schema** and **run SQL** / apply **migrations** (create tables, policies). - **Deploy edge functions** and read their **logs**. - **Manage secrets** and **enable realtime** on tables. ### Integrations - **[Connectors](https://support.estage.com/connectors)** — list, configure, and remove service connectors (Telegram, Notion, Sheets…) for the project. ### See it & ship it - **Pull the live preview URL** to open the running site. - **Take a real screenshot** to check its work visually. - **[Publish](https://support.estage.com/workspace-publishing)** the site when it's ready. ## Example prompts Once connected, just talk to your agent about the project. (Say the project ID when you have several connected — see [above](#working-across-several-connected-projects).) ```text What pages does this project have, and what's the theme's accent color? Add an FAQ page with eight questions and link it from the footer. Make the hero headline bigger and switch the accent to emerald — screenshot when done. Generate a dark, moody background for the pricing section and use it. Add three more testimonials to the testimonials list. Add an order form to the checkout page. Create a "leads" table and save contact-form submissions to it. Open the preview and take a screenshot, then publish the site. ``` ## Managing & revoking connections In **Account → Integrations → Coding agents**, the **Connected apps** list shows every connection across your projects — each labelled **Claude** or **Codex**, with its **project name**, **project ID**, and permissions. To disconnect one, click **Disconnect**: its access stops immediately. Reconnect any time by connecting again. ## No browser? A scoped token instead If the machine has no browser, or your Codex CLI is too old for `codex mcp login`, you can authorize with a **token** instead. Under either tab, in the **Or:** section, (optionally) label it and click **Generate token**. The token is shown **once** — copy it right away. The panel then shows the matching setup for that tab. ### Claude Code One command, ready to paste: ```bash claude mcp add --transport http genesis-73891 \ https://genesis.estage.com/api/agent/73891/mcp \ --header "x-agent-token: YOUR_ONE_TIME_TOKEN" \ --scope user ``` ### Codex Append this block to `~/.codex/config.toml` (create the file if it isn't there): ```toml [mcp_servers.genesis-73891] url = "https://genesis.estage.com/api/agent/73891/mcp" bearer_token_env_var = "GENESIS_AGENT_TOKEN" startup_timeout_sec = 30 tool_timeout_sec = 300 ``` The token itself stays **out of the file** — Codex reads it from an environment variable, so export it in the shell you start `codex` from (add the line to your `~/.zshrc` / `~/.bashrc` to make it stick): ```bash export GENESIS_AGENT_TOKEN=YOUR_ONE_TIME_TOKEN codex mcp list ``` `codex mcp list` should show `genesis-73891`. One block per project — repeat it with the next project's ID and its own token to work on several sites. ### First message of every new session Terminal agents can be tempted to poke at files on their own, so start a new chat by pointing the agent at the connection (the panel gives you this line too, prefilled with your project ID): ```text Use the genesis-73891 MCP tools for all operations on this project. Start by calling genesis_context to read the rules and file tree. Never use aws s3, bash, or local file tools to read/write this project's files. ``` Manage or **Revoke** tokens in the **Active tokens** list on the same screen. (Same powers, same per-project scope — just a different way to authorize.) ## Safety model - **Browser-approved, per project.** You sign in and approve access on a consent screen; the connection is scoped to that **one project** and can't touch another. - **Every edit is validated.** The agent's writes go through Genesis's commit pipeline — broken JSX is rejected, your **protected files** stay protected, element IDs are preserved. It can't push raw, unchecked changes. - **Owner-only.** Only a project's owner can connect it. - **Revokable anytime.** Disconnect from **Account → Integrations → Coding agents** and access stops on the next request. - **No store login is shared.** The connection deliberately doesn't carry your ESTAGE store credentials. ## Limits & good to know - **Order-form products & payment keys** are still set up by **you** in Settings → Order Form — that step needs your ESTAGE store login, which the connection doesn't carry. Your agent wires the form into the page; you finish picking products and keys. - It's a **beta** with a few rough edges. - Changes your agent makes show up in your project just like in-app edits — preview them, and [undo](https://support.estage.com/capabilities-undo) or restore from [Version History](https://support.estage.com/workspace-version-history) if needed. --- Connect each project once, name it by its ID, and your Genesis sites become places your own agent — Claude or Codex — can build: safely, on your own AI budget, with every guardrail, the live preview, and one-command publish coming along for free.