Connecting Claude

← Installation · Home · Next: Building Pages →

Using ChatGPT, Codex, Gemini or another AI app? See Connecting ChatGPT & other AI apps.

Claude connects to your site as a custom connector (MCP) — in claude.ai, Claude Desktop or Claude Code. Open Divi Connect → Connection, pick Claude or Claude Code, then choose how it signs in. Both ways work:

Every address and command is on the Connection screen, ready to copy. With either route Claude gets proper tools instead of having to craft raw HTTP requests.

The Divi 5 Skill — now built in #

Connecting used to take two pieces; the second is now handled for you. The Divi Connect connector gives Claude the tools to build live on your site, and the Divi 5 Skill gives Claude the know-how — how to write valid, on-brand Divi 5 markup. As of the current build the Skill is bundled inside the connector: Claude loads it automatically when it connects and pulls only the parts it needs, so you no longer have to install it separately. It always matches your plugin version and works everywhere — claude.ai (including free accounts), Claude Desktop and Claude Code.

You can still add the standalone Divi 5 Skill from the Divi 5 Skill page if you’d like it loaded in your Claude client too, but it’s optional now. Add the connector below.

Option A — claude.ai (web) and Claude Desktop #

Claude’s Connectors screen is under Settings → Connectors; in the claude.ai sidebar it is also reached through Customize → Connectors.

Sign in with WordPress (OAuth) — recommended #

1. On the Connection screen, pick Claude, choose Sign in with WordPress (OAuth) and copy the connector address. It carries no key.
2. In Claude, open Connectors and choose Add custom connector.
3. Give it a name — Divi Connect does nicely — and paste the address. Leave the OAuth client ID and secret empty: Claude registers itself with your site. If Claude shows an OAuth client choice, either option works; leave Authentication on Always required.
4. Press Connect. A window opens on your site: sign in with an administrator account if you are not already, read what Claude will be allowed to do, and press Allow.
5. Turn the connector on and ask Claude to build something. Your name appears under Connected people on the Connection screen; press Revoke there to end it at any time.

Use the connector key #

1. On the Connection screen, pick Claude, choose Use the connector key (API key) and copy the connector address. It already contains your key.
2. In Claude, open Connectors and choose Add custom connector.
3. Give it a name — Divi Connect does nicely — then paste the address. Leave the OAuth fields blank — the key is already in the address.
4. Turn the connector on and ask Claude to build something. It appears with your site’s name, e.g. “Divi Connect – My Site (mysite.com)”. If it does not appear, press Test the connection on the Connection screen.

The connector-key steps, in pictures #

Step 1 — in Claude’s left sidebar, open Customize. A free Claude account works fine.

Step 2 — under Customize, select Connectors.

Step 3 — click the + in the Connectors panel, then choose Add custom connector.

Step 4 — give it a name, paste your Divi Connect connector URL, leave the OAuth fields blank, and click Add.

Step 5 — Claude lists the connector’s tools. (Since 2.3.0 there are three — divi_discover, divi_describe and divi_execute — and everything Divi Connect can do runs through them; this picture is from an earlier version.)

Step 6 — optionally choose how Claude uses each tool: Always allow, Needs approval, or Blocked.

Once added, start a new chat and the Divi Connect tools are available. Try: “What site are you connected to, and what colors does it have?”

Free Claude accounts can add custom connectors and build pages. You don’t need a paid Claude subscription.

Option B — Claude Desktop #

Claude Desktop’s Settings → Connectors → Add custom connector dialog is identical to the claude.ai one above — same fields, same steps, either route.

Option C — Claude Code (terminal) #

On the Connection screen, pick Claude Code. Any folder will do for the command.

Sign in with WordPress (OAuth) — recommended #

1. In a terminal, run the command from the Connection screen. It looks like this, with your site’s address and no key:
   bash
claude mcp add --transport http divi-connect "https://yoursite.com/wp-json/divi-connect/v1/mcp"
2. Start claude, type /mcp, choose divi-connect and then Authenticate. Your browser opens your site: sign in as an administrator and press Allow.
3. Back in the terminal the server shows as connected. Ask it to build something.

Use the connector key #

Run the command from the Connection screen — the address carries your key:

claude mcp add --transport http divi-connect "https://yoursite.com/wp-json/divi-connect/v1/mcp/YOUR_KEY"

Check it with claude mcp list, then ask for a page. This is also the route that works when a host firewall blocks claude.ai — see Troubleshooting.

Using the VS Code or JetBrains extension? The extension keeps its own copy of Claude Code and does not add it to your PATH, so a terminal answers 'claude' is not recognized. Either install the Claude Code app and use the command above, or paste the command into Claude’s chat and ask it to run it — it can find its own copy.

Or skip MCP entirely: on the Connection screen, pick Any MCP app and Use the connector key, copy the Quick connect line, and paste it into any Claude chat. It tells Claude your base URL and key and asks it to make the HTTP calls itself with its web tools or curl:

Connect to my Divi 5 website through the Divi Connect plugin. Base URL: …
send the header "X-Divi-Connect-Key: …" on every request …

When to re-add the connector #

Claude remembers the connector’s tool list, and its address, from the moment you add it. Since 2.3.0 the connector presents three tools — divi_discover, divi_describe and divi_execute — and everything Divi Connect can do runs through them, so a normal update needs no reconnect.

Re-add it in two cases:

• Updating from a version before 2.3.0 — once, to pick up the three-tool list. Until then the old connector keeps working as it did.
• Whenever its address changes — a regenerated key, a new domain, or a delete-and-reinstall of the plugin.

On hosts such as SiteGround, or on a site set to Plain permalinks, sign-in and the connector address need Divi Connect 2.3.5 or later — update first.

⚠️ Delete and re-add — don’t just edit or refresh it #

Editing an existing connector, using its Refresh option, or toggling it off and on does not reliably replace what Claude has cached — and it definitely does not replace the URL. If you change the URL of a connector that already exists, claude.ai keeps sending the old one, whatever you paste into the box. Every symptom then points somewhere else: a key you have already corrected still reads as invalid, and because an invalid key used to be answered in a way Claude reads as “this site wants me to sign in,” you get a sign-in / OAuth error for what is only a stale URL. This is genuinely hard to diagnose from the outside — it has cost days.

So: remove the connector completely, then add it back.

Once after updating from before 2.3.0, and always after the key changes:

• claude.ai / Claude Desktop: copy the connector URL fresh from WP Admin → Divi Connect (not from an older email, chat or note — if the key has changed since, that URL is dead). Then open Settings → Connectors, remove Divi Connect, and add it again with the URL you just copied.
• Claude Code: claude mcp remove divi-connect, then add it again with a freshly-copied URL.

Then start a new chat.

Quick check: after re-adding you should see exactly three tools — divi_discover, divi_describe and divi_execute. That is the whole surface now, and seeing a long list instead means the old one is still cached. Divi Connect also flags this for you: if your connector is out of date, Claude will notice (via the design-system read) and ask you to reconnect rather than assume a capability is unsupported.

One thing worth knowing about the shorter list. Because a single tool now does the work, choosing “Always allow” on divi_execute lets Claude run any Divi Connect operation without asking again. Read-only mode, Protect global design & Theme Builder, and the confirm-before-overwrite check all still stop a change and ask you.

The key changes if you regenerate it, or if you delete and reinstall the plugin (a normal update is safe). Any connector added before that point keeps failing until you re-add it, so treat “I regenerated the key” and “I reinstalled the plugin” as automatic triggers for the steps above.

Connecting a local site #

When the plugin detects a local address, the settings page shows a tunnel hint right under the connector URL:

If your site runs locally (for example in Local by Flywheel, with a .local address), neither claude.ai (cloud) nor the Claude Desktop app can reach it directly — both route their connector requests through Anthropic’s servers, which have no path to your machine. A trusted local HTTPS certificate does not fix this; the issue is reachability, not the certificate. You have two choices:

• Use Claude Code on the same machine — it runs locally and can reach http://yoursite.local directly. Use Option C above. (Note: the Claude Desktop app cannot — its connector is brokered server-side, so it needs a tunnel just like claude.ai.)
• Expose the site with a tunnel so claude.ai (cloud) or Claude Desktop can reach it. The settings page detects a local site and shows a hint. For example, with cloudflared:

bash
cloudflared tunnel --url http://yoursite.local

Local by Flywheel tip: Local routes sites by their hostname, so add --http-host-header or you’ll get a “Site Not Found” page through the tunnel:
bash
cloudflared tunnel --url http://yoursite.local --http-host-header yoursite.local

This prints a temporary public https://…trycloudflare.com address. Your connector URL then becomes:

text
https://<random>.trycloudflare.com/wp-json/divi-connect/v1/mcp/YOUR_KEY

Paste that URL into claude.ai as the custom connector.

The tunnel command prints the public HTTPS address in your terminal as soon as it starts — copy it from there. Leave the command running: the address only works while the tunnel is up, and you’ll get a new one next time.

The settings page shows this tunnel hint automatically when it detects a .local, .test, or localhost address.

Did it work? #

In a fresh Claude chat, ask:

“Which site are you connected to, and what’s in its design system?”

Claude should reply with your site name and URL, then list your colors, variables, and presets. That confirms the connector is live. If not, see Troubleshooting.

← Installation · Home · Next: Building Pages →