Connect Claude or Codex

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.

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.

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:

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.

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:

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

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.

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, 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 — 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 your agent 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 → 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:

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

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