Claude edits my live WordPress Divi 5 site via Chrome beta WebMCP

Claude in Chrome edits a live Divi 5 site through Web MCP

A quick walkthrough of what becomes possible when Claude, running inside the Chrome extension, talks to a WordPress site through Web MCP. No plugins to configure on the Claude side. No copy-paste. I open the extension, ask it to read my homepage, and it identifies Divi 5, every section, and the design system on its own.

What this is

Two live edits on mihai.love, driven entirely by conversation:

1. Move the About me section between Testimonials and the Contact block.
2. Explore centerstudio.io, then add a new call-to-action section that respects Center Studio's design and blends with my homepage.

Claude does both. Live page, preserved styling, native Divi modules.

Tech stack

Everything in the screencast runs on a stock browser plus a stock WordPress site. No build step, no SSH.

• WordPress with Divi 5 active.
• Respira for WordPress — the MCP server and plugin layer at respira.press.
• Claude Chrome extension — Anthropic's official browser companion.
• Web MCP — the browser-native Model Context Protocol surface Claude reads from.
• Chrome Beta — Web MCP support is currently a Beta-channel feature.
• Live site: mihai.love. Reference site for the new section: centerstudio.io.
• Voice dictation in the recording: Wispr Flow.

Walkthrough

The video is short. The chapters below mirror it exactly so you can scrub to whatever you want to see.

1. 00:00 Intro. What's being tested: a Chrome extension talking to a live WordPress site, no plugin glue between them.
2. 00:30 Connecting Claude to the site via Web MCP. The handshake takes one click. Claude in Chrome picks up the Respira tool surface exposed by the page.
3. 01:00 Claude reads the homepage and identifies Divi 5. Without being told what builder is active. Same `respira_get_builder_info` path the desktop client uses, just routed through the browser.
4. 01:15 First edit: reordering sections on a live page. "Move About me between Testimonials and Contact." Done. Page reloads, order is correct, styling untouched.
5. 01:55 Second task: build a new section from a different product's site. Claude reads centerstudio.io, picks out the visual language, and proposes a CTA that fits both Center Studio's tone and the existing mihai.love homepage.
6. 02:50 Claude works with Divi modules directly. No custom HTML, no shortcode dump. Section, row, column, button. The same modules the Visual Builder loads.
7. 03:15 The result. Center Studio hero blended into the live homepage. Editable in the canvas like anything else on the page.
8. 03:30 Wrap.

Why this matters

The Chrome path removes every step that used to live between an LLM and a WordPress edit. No terminal. No code editor. No plugin to configure on the Claude side. The browser is the runtime, the conversation is the interface, and Respira is the layer that maps "move this section" into a real Divi module operation with snapshots and a verifier behind it.

This is the Respira plugin exposing tools to any MCP-capable client. Today that's Claude in Chrome. The same tools work from Claude Desktop, Cursor, Codex, and any other Web MCP or stdio MCP host.

Building Respira in public. respira.press.