# Connect Claude Code > Add a Genesis project to the Claude app as a custom connector and build it on your own Claude subscription — a scoped, revokable, per-project connection with all of Genesis's safety checks. Source: https://knowledge.estage.com/claude-code/ Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt --- You can connect a single Genesis project to **Claude** (the Claude app — web or Desktop — and Claude Code) as a **custom connector**, 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 Claude subscription**, so heavy building doesn't spend your Genesis credits. Working in a terminal? **OpenAI Codex** connects to the same project too — see [Prefer the terminal?](#prefer-the-terminal-claude-code--codex-optional). :::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 connector per project — and name it by project ID This is the key idea: **each Genesis project you want to work on is its own connector** in the Claude app. There's no "current project" — Claude acts on whichever connector you point it at. So when you add a connector, **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 Claude exactly which one to use. The project ID is right in the connector's URL (`…/api/agent/**73891**/mcp`) and on the project itself in Genesis. ## Connect in the Claude app (recommended) The recommended way is a **custom connector** — a one-time browser sign-in, no tokens to copy. **1. In Genesis — copy the project's connector URL** - Go to **Account → Integrations → Claude Code**. - Pick the project from the **Project** dropdown. - Copy the **connector URL** shown. 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-connector-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. ## Working across several connected projects Because each project is a separate connector, **be explicit about which one you mean** at the start of a session, so Claude uses the right connection: ```text Work on project 73891 — add a Contact page and link it in the nav. Use the Acme Store connector: generate a new hero image and show me a screenshot. ``` A quick way to confirm Claude is 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 Claude at what you're looking at Claude 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 toolbar, turn on **Share selection with Claude Code** (the button's tooltip reads *"let an external agent see what you click + which page is open"*). 2. Keep the builder open and click the element you mean in the preview. 3. In Claude, refer to it naturally — *"this"*, *"this section"*, *"on this page"*. Claude 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 — Claude simply works from your words. It's per-you and off by default. ## What Claude can do in your project Through the connector, Claude 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 Claude at what you're looking at](#point-claude-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](/project-settings/global-variables/)** — read, set, and remove phone, email, prices-in-text, links. - **Catalogs / [Live Controls](/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](/order-forms/), protected/rich text, [live stream](/live/), and more. ### Backend (Dedicated Cloud) For projects on [Dedicated Cloud](/cloud/), Claude 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](/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](/workspace/publishing/)** the site when it's ready. ## Example prompts Once connected, just talk to Claude 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 → Claude Code**, the **Connected Claude apps** list shows every connection across your projects — each with its **project name**, **project ID**, and permissions. To disconnect one, click **Disconnect**: its access stops immediately. Reconnect any time by adding the connector again. ## Prefer the terminal? Claude Code & Codex (optional) If you'd rather wire it up from a terminal, you can use a **token** instead of the browser flow — and the same token works for both **Claude Code** and **OpenAI Codex**. In **Account → Integrations → Claude Code**, open the **Terminal agents** section, (optionally) label it, and click **Generate token**. The token is shown **once** — copy it right away. The panel then shows the setup for whichever agent you pick with the **Claude Code / Codex** switch. ### 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 Codex is configured from its config file rather than a command. 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.** Claude'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 → Claude Code** 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. Claude wires the form into the page; you finish picking products and keys. - It's a **beta** with a few rough edges. - Changes Claude makes show up in your project just like in-app edits — preview them, and [undo](/capabilities/undo/) or restore from [Version History](/workspace/version-history/) if needed. --- Connect each project once, name it by its ID, and your Genesis sites become places Claude can build — safely, on your own AI budget — with every guardrail, the live preview, and one-command publish coming along for free.