Connecting Claude

← Installation · Home · Next: Building Pages →

There are two ways Claude can talk to your site. Pick whichever matches how you use Claude:

The MCP connector is the cleanest experience — Claude gets proper tools (divi_create_page, divi_get_design_system, etc.) 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 — Add the MCP connector to claude.ai (web) #

1. In Divi Connect → Connection, click Copy MCP URL.
2. Go to claude.ai → Customize → Connectors.
3. Click the + in the Connectors panel, then choose Add custom connector.
4. Paste your MCP connector URL. Leave the OAuth fields blank — the key is already in the URL.
5. Save. Claude will connect and the connector will appear with your site’s name, e.g. “Divi Connect – My Site (mysite.com)”.

The same six 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 now lists your Divi tools: build pages, manage the Theme Builder, read your design system, and more. (The number of tools grows with each release.)

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 — Add the connector to Claude Desktop #

1. Copy the MCP connector URL from the settings page.
2. In Claude Desktop → Settings → Connectors → Add custom connector, paste the URL (leave OAuth blank).
3. Save and start a chat.

The Claude Desktop dialog is identical to the claude.ai one shown in the six figures above — same fields, same blank OAuth boxes.

Option C — Add the connector to Claude Code (terminal) #

Claude Code supports HTTP MCP servers. Add Divi Connect with one command (paste your MCP URL):

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

Then in Claude Code, the divi_* tools are available. Verify with /mcp inside Claude Code, or just ask Claude to read your design system.

Or skip MCP entirely: copy the Quick connect line from the settings page 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 …

After updating Divi Connect — reconnect once #

Claude caches the connector’s tool list at the moment you connect. When a plugin update adds new tools, Claude won’t see them until you reconnect — so a new feature can look “missing,” or Claude may say it can’t do something it now actually can.

So after every Divi Connect update, reconnect once and start a new chat:

• claude.ai / Claude Desktop: open Connectors, disconnect the Divi Connect connector and add it again (or use its refresh option).
• Claude Code: claude mcp remove divi-connect then add it again, or restart the session.

Quick check: after reconnecting you should see more tools than before. 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.

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 →