Connect Claude Code

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?.

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:

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).
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:

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.

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”).
Keep the builder open and click the element you mean in the preview.
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.

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 — read, set, and remove phone, email, prices-in-text, links.
Catalogs / Live Controls 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, protected/rich text, live stream, and more.

Backend (Dedicated Cloud)

For projects on Dedicated 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 — 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 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.)

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:

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

[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):

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

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 or restore from 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.