A few weeks ago, I saw a post on r/elementor that stuck with me. The person was using Claude Code connected to the WordPress API to make edits and write blog posts on their site, and their honest complaint was that the result looked ugly.
So they asked the room a fair question: has anyone actually built or redesigned a website using Claude Code and Elementor?
That one word, ugly, is the whole story of AI website building right now. The AI part works. You can point an agent at WordPress and it will happily write posts, change content, and update pages. The problem is what comes out the other side. It looks like a database dump, not a designed website.
The answer changed this autumn. Elementor shipped its own official MCP connector in Elementor 4.3 on 22 September 2026, and add-ons such as The Plus Addons for Elementor already ship MCP abilities for their widget libraries. This guide, refreshed on 29 October 2026, explains why raw API edits look flat, what each connection route can do today, how to set one up, and where you still need to step in yourself.
What You Can Already Do With Claude Code and the WordPress API
Let me start with what genuinely works today, because it is more than people expect. Claude Code is a command-line AI coding agent. Connect it to a WordPress site through the REST API or WP-CLI and it can do real work: draft and publish blog posts, edit existing content, update pages, manage media, and run bulk changes across a site far faster than you would by hand.
The person on Reddit was not wrong to use it that way. For content operations, an agent talking to WordPress is a genuine time saver. You can ask the agent to write a draft, set the categories, and schedule it, and it will. Bulk jobs are where it shines: renaming a taxonomy, fixing a thousand image alt texts, or adding a disclosure line to every post in a category.
If your work is mostly words, posts, and edits, this is already a solid workflow. That is the easy half of the problem.
Where It Falls Apart: Why AI Plus Raw WordPress Looks “Ugly”
Here is the hard half. When an AI agent writes directly to the WordPress API, it is sending content, not design. It creates plain blocks or drops text into whatever the theme does by default.
The agent cannot see the page. It has no sense of spacing, visual hierarchy, brand colors, or how a section should feel. So you get a wall of default-styled content that is technically correct and visually flat. That is exactly the ugly result the poster described.
This is not a Claude Code flaw. It is a structural gap. Page builders like Elementor exist because designing a page well is hard, and they solve that for humans clicking in an editor. An agent hitting the REST API never touches that design layer. It is like hiring a brilliant writer and asking them to lay out a magazine with no design tools. The words are great. The page is a mess.
The Missing Piece Is MCP
The thing that closes this gap is MCP, the Model Context Protocol. It is an open standard that lets an AI assistant call clearly defined tools instead of guessing through a generic API. Without MCP, your agent only has raw REST endpoints and its own assumptions. With MCP, it can call specific, purpose-built actions that a plugin author has defined, with real structure behind them.
This is the same shift happening across the WordPress ecosystem. WordPress 7’s new AI Client and Abilities API are built on this idea, and Elementor has now followed, which we covered in our breakdown of the Elementor MCP. The principle is simple: give the AI proper tools, and it stops producing generic output. It builds with the same components a human would.
Route One: The Official Elementor MCP
Elementor’s own MCP connector is now the first thing to try. According to Elementor’s product page, it connects Claude, Codex, Cursor, and other AI tools to your Elementor site. You describe the page you want, attach references, and it builds real, editable Elementor structure rather than pasted HTML. Elementor lists Claude Code among the clients you can pick during setup.
Three details from Elementor’s page matter before you rely on it:
- Atomic layouts only, for now. The MCP currently supports Atomic (V4) elements and layouts. Elementor says support for classic Widget (V3) layouts is coming. If your site is built with classic widgets, the MCP can add new Atomic sections but cannot yet restructure the old ones.
- Every generation is a draft. Nothing the MCP creates is published on its own. You review each build in the Elementor Editor and publish when you are ready.
- Some abilities need Angie. Custom widgets and apps, WP Admin customization, and bulk content actions require Angie, Elementor’s agentic AI plugin, which is free from the WordPress plugin directory.
Elementor adds that connecting is free, but Pro elements still need a Pro plan, and your AI tool’s own subscription is separate. If you are budgeting for it, our Elementor Pro pricing guide lists every plan and renewal price.
Route Two: MCP Abilities for The Plus Addons for Elementor
The official connector builds with Elementor’s own elements. Most production sites also lean on add-on widgets for mega menus, listings, WooCommerce layouts and carousels, and an agent can only build with what it can reach. That is the gap MCP Abilities for The Plus Addons for Elementor fills. The product page puts it in one line: connect The Plus Addons for Elementor with any MCP-compatible AI assistant and compose full pages widget by widget, with 163 abilities listed across the widget library.
Two pieces make it work well. The get-theplus-widget-schema ability returns the full control schema for any widget, so the agent reads real control keys before it builds instead of inventing them. The tpae/layout ability creates and nests sections, columns, and containers. On top of that sit the widget abilities, from headings, buttons, info boxes, accordions, tabs, and forms to Lottie, dynamic content, and a WooCommerce suite that covers custom cart and checkout, multi-step checkout, single-product blocks, wishlist, compare, and order tracking.
The detail that matters most is this: the agent builds with real, fully editable widgets. It is not pasting a screenshot or generating throwaway HTML. When the agent finishes, you open Elementor and every section is a normal widget you can adjust by hand. That is the answer to ugly. The AI is no longer guessing at design through a generic API. It is placing actual design components, the same ones you would drag in yourself.
Official MCP vs Add-on Abilities vs Raw REST
These are not rivals. They answer different questions, and many sites will end up using more than one. Here is how they compare for a Claude Code workflow.
| Approach | What the Agent Builds With | Design Quality | Best For |
|---|---|---|---|
| Raw WordPress REST API or WP-CLI | Plain blocks and theme defaults | Flat, no design awareness | Posts, edits, bulk content jobs |
| Official Elementor MCP | Atomic (V4) elements, saved as drafts | Native Elementor structure | New pages and sections on sites moving to V4 |
| MCP Abilities for The Plus Addons for Elementor | The add-on’s own widgets, attribute by attribute | Real widgets with schema-checked controls | Sites that depend on an add-on widget library |
Because both MCP routes go through the WordPress Abilities system, one assistant can use the official connector for Atomic structure and the add-on’s abilities for widgets Elementor does not ship, in the same session. If you are weighing which MCP servers to run at all, our roundup of the best MCP servers is a good starting point.
How to Connect Claude Code to Your Elementor Site
Setup is short for both routes. For the official connector, you need Elementor 4.3 or newer and an administrator account. In your WordPress dashboard, go to Elementor, then Elementor MCP, pick Claude Code, and copy the setup prompt Elementor generates. Paste it into Claude Code to finish the connection. That prompt contains a working credential, so treat it like a password.
For MCP Abilities in The Plus Addons for Elementor, the flow is the same whether you use Claude Code, Claude Desktop, Cursor, VS Code, Windsurf, or Cline, since it works with any MCP-compatible client. The MCP Abilities documentation walks through each screen:
- Install and activate The Plus Addons for Elementor on your site.
- Authenticate the site so the plugin can issue a secure connection.
- Enable the MCP server from the plugin.
- Configure permissions, so you control what the agent is allowed to touch.
- Copy the generated MCP config and paste it into your AI client.
Once the config is in place, Claude Code can see the abilities and start composing. A safe first test is a throwaway page on a staging site, with a prompt like this:
Create a new draft page called "MCP Test".
Add a hero with a headline, one short paragraph and two buttons.
Below it, add three info boxes and a contact form.
Use real widgets only and keep every section editable.Open the result in Elementor. If every section is a normal widget you can click and edit, the connection is working as intended.
A Realistic Workflow: The Agent Drafts, You Refine
Here is roughly how it plays out. You give Claude Code a prompt like build a landing page for a coaching service with a hero, three feature boxes, a testimonial section, and a contact form. With the add-on connected, the agent calls get-theplus-widget-schema to learn the controls, uses tpae/layout to set up the structure, and fills it with the matching widgets. You get a real Elementor page, not a flat draft.
Then you do the part AI is still not great at. You open the page in Elementor and refine it. Adjust the spacing, swap a color, tighten the copy, move a section. Because everything is a standard widget, nothing is locked.
Think of the agent as a fast junior who scaffolds the whole page in minutes, and you as the art director who makes it yours. That division of labor is the honest state of AI site building in 2026, and it is a big step up from a wall of flat default blocks. If you want the wider context, our 2026 WordPress and Elementor stack guide is a good companion read, and if you are curious how this compares to Elementor’s own assistant, see what Elementor AI actually does.
Safety Checklist Before You Let an Agent Edit a Live Site
An agent with write access can break a page as fast as it can build one. Decide what it may touch before you let it run, the same way you would scope any automation.
- Start on staging. Test every new prompt pattern on a copy of the site first.
- Keep generations as drafts. The official MCP does this by default. With any route, review before publishing.
- Scope permissions. In MCP Abilities you choose what the agent can read and write. Give it the narrowest access that gets the job done.
- Protect the credential. Setup prompts and config files contain working credentials. Never paste them into a shared chat or ticket, and revoke the Application Password in WordPress if one leaks.
- Back up first. Take a backup before any bulk change, whichever route you use.
Do Not Forget the Content Layer
One more thing, because the original poster was doing two jobs with Claude Code: building pages and writing blog posts. Building good-looking pages is only half the win. If an AI agent is writing your content, the next question is whether AI engines can actually find and cite it.
That is a different problem with a different tool. RankReady is a free WordPress plugin that prepares your content for AI search. It writes key-takeaways AI Summaries with Speakable schema, generates an llms.txt index so AI crawlers understand your coverage, logs every AI bot that hits your site, and shows which posts citation-style bots fetched in the last 30 days.
If your agent is producing posts at speed, this is what gives those posts a chance of being quoted by ChatGPT, Perplexity, and Google’s AI answers. We went deep on the mechanics in how Perplexity decides which sites to cite.
So, Can You Build an Elementor Site With Claude Code?
Yes, and far more usefully than even a few months ago. The honest version is this. Claude Code on its own, talking to the raw WordPress API, will get you content but a flat, ugly layout. Connect it through the official Elementor MCP and it builds native Atomic structure as drafts. Add MCP Abilities for The Plus Addons for Elementor and it can also build with the widget library most real sites depend on, which is what fixes the design problem the poster ran into.
You still bring the taste. The agent brings the speed. If you want to try it, the fastest path is to install The Plus Addons for Elementor, enable the MCP server, and connect your AI client. Then point it at a simple page on a staging site and watch it build with widgets you can actually edit.
