Modern Creator
Darrel Wilson · YouTube

Easily Connect Claude AI to WordPress in 3 Minutes

A step-by-step screen-share showing how the free NovaMira MCP plugin turns Claude Desktop into a WordPress page builder.

Posted
4 days ago
Duration
Format
Tutorial
educational
Views
18K
797 likes
Big Idea

The argument in one line.

You can build full WordPress websites with Claude by installing the free NovaMira plugin and pasting a JSON configuration into Claude Desktop, eliminating the need to write code or use the WordPress editor directly.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A WordPress site owner with an Elementor setup who wants to use Claude to build pages and posts without learning code or hiring a developer.
  • Someone running WordPress on Windows or Mac who's comfortable copy-pasting JSON config but has never used Claude Desktop before and wants a visual walkthrough.
  • A content creator or small business owner managing their own WordPress site who spends time manually building pages and wants to delegate that to Claude via a plugin.
SKIP IF…
  • You're using a WordPress hosting provider that doesn't allow plugin uploads or direct file access to Claude Desktop configuration.
  • You're already proficient with Claude's API, terminal workflows, or other integration methods — this covers only the NovaMira plugin setup path.
  • Your WordPress site doesn't use Elementor or you need Claude to integrate with a different page builder or custom setup.
TL;DR

The full version, fast.

Connecting Claude to WordPress through the free NovaMira MCP plugin turns the chatbot into a working page builder that creates pages, edits posts, and assembles full sites from a single prompt. The setup takes three minutes: install NovaMira on WordPress, enable AI abilities, copy the JSON snippet from the plugin's configuration screen, paste it into Claude Desktop's developer config file, save without renaming, and restart Claude so the connector registers. Before generating sites, deactivate the Atomic editor and switch Elementor's containers setting to active so the output uses modern flex layouts. When prompting, explicitly instruct Claude to use Elementor widgets rather than raw HTML, otherwise every section ships as an HTML block that bypasses the visual builder entirely.

Members feature

Chat with this breakdown.

Modern Creator members can chat with any breakdown — ask for the hook, quote a framework, find the exact transcript moment. Unlocks at T2: refer 3 friends + add your own API key.

Create a free account →
Chapters

Where the time goes.

00:0000:26

01 · Cold open

Two polished Claude-built WordPress sites before any explanation. States the promise.

00:2601:24

02 · Install NovaMira plugin

Download free plugin, upload to WordPress, enable AI abilities.

01:3502:40

03 · Generate and copy MCP config

NovaMira generates Claude Desktop JSON config. Copy snippet from Connect Your AI Client.

02:4002:56

04 · Paste config and save

Open Claude Desktop Settings > Developer > Edit Config. Paste JSON. Save not Save As.

02:5603:34

05 · Verify connection

Restart Claude, check Settings > Developer, confirm NovaMira connector live in chat.

03:3403:52

06 · Simple page demo

Prompt: Create a page called YouTube. Page appears instantly.

03:5205:29

07 · Complex Elementor site demo

Disable Atomic Editor, enable Containers. Claude builds full dog grooming site.

05:2906:48

08 · Review output + HTML vs elements

Opens site in Elementor. Shows why specifying Elementor containers matters.

06:4808:25

09 · NovaMira Pro pitch + outro

Shows Pro-generated agency site. Pricing: 49 euros/3 sites, 99 euros/unlimited.

Atomic Insights

Lines worth screenshotting.

  • A free plugin called NovaMira turns Claude Desktop into a WordPress page builder — no code, no browser automation, no terminal required.
  • Connecting Claude to WordPress takes three steps: install the plugin, paste one JSON snippet into Claude Desktop's config file, and restart Claude.
  • Claude Desktop works significantly better than Claude on Mac for this WordPress integration — the commenter tension is acknowledged but the performance gap is real.
  • Clicking 'Save As' instead of 'Save' in the config file creates a duplicate and Claude reloads the old script — a single wrong click breaks the connection.
  • Claude can build full Elementor websites, write blog posts, and adjust code snippets entirely through natural language prompts once the MCP connection is established.
  • MCP plugins that expose your existing tools to Claude are the fastest path to AI-powered workflows without learning APIs or writing automation code.
  • The easiest path to connecting AI to a platform is rarely the browser or terminal — a purpose-built plugin that handles the MCP layer removes all the friction.
Takeaway

Show the output before the method.

Tutorial hook structure

Darrel opens with two finished websites and only then explains how he made them. The proof precedes the process.

  • Open every tutorial with the end result on screen, not a title card.
  • NovaMira free plugin is a legit MCP bridge worth covering for any WordPress audience.
  • The prompt specificity lesson is a standalone Short: one gotcha, clear before/after.
  • The AI-beats-users closing claim is comment-farming gold.
  • Never pitch before the proof: show free tier working fully before mentioning Pro pricing.
Glossary

Terms worth knowing.

NovaMira
A free WordPress plugin that exposes a site's content management functions as an MCP server, allowing AI assistants like Claude Desktop to create pages, posts, and design elements by talking directly to WordPress.
Claude Desktop
Anthropic's desktop application for Claude that supports MCP integrations, enabling Claude to connect to and control local apps and third-party services beyond a standard browser chat session.
WordPress plugin
A software package that extends WordPress with new features or integrations, installed directly from the WordPress dashboard or by uploading a zip file.
Elementor
A popular drag-and-drop WordPress page builder that lets users visually design web pages without writing code, using a library of pre-built blocks and layout templates.
MCP (Model Context Protocol)
An open standard that lets AI assistants connect to external tools and services through a unified interface. Plugins that expose an MCP endpoint allow Claude to control that software directly.
JSON snippet
A short block of JSON-formatted configuration text that, when pasted into a settings file, tells an application how to connect to a new integration or service.
Resources Mentioned

Things they pointed at.

06:48productNovaMira Pro
Quotables

Lines you could clip.

00:42
I have licked the pot clean.
Funny, vivid, credibility-building. Signals exhaustive personal testing.TikTok hook for tested-everything-so-you-dont-have-to format↗ Tweet quote
06:40
If you do not instruct it to use the Elementor elements, it is just gonna use HTML for everything.
Clear gotcha moment. The one thing viewers will forget and regret.IG reel cold open: The mistake everyone makes with Claude + Elementor↗ Tweet quote
08:12
AI can actually use WordPress much better than users can.
Provocative forward-looking claim, no setup needed.TikTok hook, comment-bait, newsletter pull-quote↗ Tweet quote
The Script

Word for word.

metaphorstory
00:00I made these websites with Claude with just one simple prompt. And guess what? You can too.
00:04You can use Claude to create blog posts, adjust code snippets, and do anything you want right inside of WordPress. So in this tutorial, I'll walk you through exactly how to connect Claude to your WordPress website. It's actually really easy, So let's get into it.
00:16Now, the very first thing that we're gonna do is we're gonna go to a website called Novamir. Now, there is a link in the video description to this website. It's a free plugin.
00:24It does not cost you anything whatsoever. Now, once you get to this page, you'll click on download for free. What this will do is this will actually integrate an AI agent onto your WordPress websites.
00:34Now, I've used many different methods. I've used the browser. I've used terminal, and this method by far is the easiest way to go.
00:41Trust me. Trust me. I have I have licked the pot clean.
00:45And then you'll go over to plugins and click on add a plugin, and you will upload that plugin. So upload file, choose the file, and then you will select the NovaMira plugin.
00:55Here we go. NovaMira. Okay.
00:58And then you'll click on install now. Now, one thing I also wanna mention, you know, this is gonna, you know, cause some tension in the comments, but I think cloud works 10 times better with desktop than it does with Mac. I used Mac before, and I just get so many errors.
01:13It doesn't work well, but that's a whole another story. Anyways, so here you'll see that NovaMirror is installed, and once you install it on the top left right here, you'll see the NovaMirror tab. Just go ahead and click on configuration.
01:25Okay? Now, the first thing that you want to do is make sure that you check turn on AI abilities, and click on save settings. And then here, I'll click on generate application password.
01:35Now, it's going to give us this application password, and it's just going to say, oh, yeah. Just go ahead and connect your AI agent. This doesn't work too well.
01:42So, we're gonna do it the right way. Now, here at the bottom, you're gonna see this link that says, need adjacent configuration. We're gonna click on this, and then you're gonna see you have an option for all these different operating systems or programs or whatever.
01:55You're gonna click on Claude desktop. Okay? And then you're gonna copy this.
02:00Now, this works for Windows and Mac. I've tested it on both. So just follow the same exact process.
02:06In fact, right here, it's gonna tell you Mac OS, and then also here, it's gonna say Windows. But anyways, all you have to do is go over to your cloud application. So you'll open this, and then you're gonna go to your settings tab.
02:17So up here, settings, and then you'll click on the developer, and then you'll see edit config.
02:25Now, if you're using Mac, it might say claud config dot json. Okay.
02:31It might say that. So you'll just click on the JSON file. Okay.
02:34And then you're gonna take this, and then delete it, and then just paste that in. Just like that. And that's all you gotta do.
02:41Next, I'll go to file, and you wanna make sure you select save. If you click save as, it's gonna create a duplicate file. And when Claude reloads, it's going to reload the old script.
02:51So make sure that you just put save. You wanna overwrite it. Once that's done, we can close this window, close this, and we need to now close Claude because you're gonna see it's not connected.
03:01So we just have to close Claude and reopen it. Alright. Okay.
03:06And then to confirm it's connected, I'll go over here to the settings tab. And under developer, you'll now see that this is connected. Okay?
03:14Now we can double check this by going over to our chat. So I'll type in new chats. And if I click on the plus icon, you are going to see under the connectors, NovaMira is now connected.
03:25Now, here is the actual domain. So let's go ahead and test this out. Right?
03:29Let's go ahead and see how this works. So I'll go over here, and I'll ask, are you connected to my website? Alright.
03:35Cool. WordPress is hooked up, and now we can perform some tasks. So let's just give it something really basic.
03:40You know, let's just create a basic page. Right? Create a page called YouTube.
03:45Alright. I don't know. Something really basic.
03:48Alright. Done. Now it's created.
03:50So we can go over here to pages. Click on all pages, and there is my YouTube page. Pretty cool.
03:57Now, wanna do something more complex. Right? I mean, that's really simple.
04:00Any idiot can do that. Right? So let's give it something that's, uh, you know, that we can do.
04:05Now, I wanted to make a full on website like these, uh, pages that you saw right here. Something really vibrant, something really complex, and something that's, you know, we need AI for. So what I wanna do now is I wanted to use the Elementor page builder.
04:17But before I do that, want to actually adjust some settings. Now, is optional. So you can use your own page builder if if you use, uh, Gutenberg, you can use that.
04:27If you're using, uh, any sort of page builder, it can adapt to any page builder. But I want to disable the atomic editor, so I don't really wanna use this. So I'm gonna click on deactivates, and I do not wanna use the atomic editor.
04:42So I'm gonna go ahead and deactivate that. Also, one other important thing to do is under features, you do wanna make sure container is active. My experience is that, uh, if you have it at default, sometimes it'll actually create the website with intersections, which is a very old model.
04:58So I usually change the container to active. And now that we've done that, so let's go ahead now and give it a command. Create an award dog grooming website with vibrant colors for the page YouTube, the one that we just created.
05:09Use elements containers and not the atomic elements. Now, probably don't need to put that because we've already disabled that. Right?
05:16Be creative and make the design high fidelity. So I'm just essentially saying, I want this to be really good. Right?
05:22So let's go ahead now and run this prompt and see what we get. And it's done. So you'll see it created all these sections.
05:29Now what I did here was I actually instructed it to use the Elementor widget. So I added the video, and I'll explain a little bit more of why you want to do that. So here, I'll go ahead and open up this link.
05:42Okay. And here is my website. It's pretty cool, pretty basic, you know, but, uh, hey, it's a good looking website.
05:50Now I'll go over here, and I will click on edit with Elementor, and here's the website. Now if I click on a section like the heading, you'll see it's actually utilizing the actual elements.
05:58Same thing here for the button as well. Whoops.
06:01I don't what that's about. But, anyways, just clicking on everything, you're gonna see that in most cases, you'll see right here, it uses the HTML code. But in a majority of instances, it'll use the Elementor elements.
06:13Now this was the website I generated before, but I forgot to actually say use the Elementor elements. And you're gonna see they use pretty much HTML for everything. So if you don't instruct it to use the Elementor elements, it's just gonna use HTML for everything.
06:26Now, technically, this still is a website, but it's like not the right way. You're gonna see this entire section was built HTML, and it doesn't really utilize the elements.
06:35So when using Clot, just make sure to instruct it to use actual, um, you know, to use the elements so you don't get a bunch of HTML widgets and stuff like that. Now for those of you who want to try NovaMirror Pro, there is a pro version for this plugin. And what NovaMirror does is the pro version actually teaches Claude about the elements and it gives it more of a creative design process.
06:55For example, I have this website right here and this was created with the Pro version. So you can see that, uh, there are some small things you have to fix, but, uh, overall, I do like the design of this.
07:06I think it's pretty good, you know, for a a one prompt, uh, websites. Here you can see that we have to use a flex box. No big deal.
07:12We just have to align it to the right. Uh, here we have this other section. Scrolling down, we have this, uh, testimonial.
07:19Here we have a really nice call to action, and then we have like a small footer here at the bottom. Now I'll show you exactly what I typed in to get this. So over here, I just typed in, I wanna create a modern design agency websites, and it just gave it some really basic things.
07:34This wasn't too much, but just giving it a little bit, you can see it really drastically improve the design process. Now, Novomir Pro costs about $49 I'm sorry, €49.
07:44I never really buy things in euros, but, uh, yeah, €49, and that's good for three websites. And for a thousand websites, it's €99.
07:52So I think that's probably your best value. So if you do wanna try it out, uh, you can. I'm not saying you have to, but, uh, it does help Claude kind of, uh, guide it with design process.
08:01So that is pretty much it. So that is how you can connect Claude to WordPress. I think the future is gonna be very interesting.
08:07As time goes on, I'm slowly starting to lean towards the AI side saying AI can actually use, like, WordPress much better than users can. And now that Cloud can use page builders, well, I don't know what the future holds, so we'll see what happens.
08:21My name is Daryl Wilson, and I will see all of you party people later.
The Hook

The bait, then the rug-pull.

Before Darrel says a single instruction, two finished websites fill the screen. A luxury real estate listing. A bold digital agency homepage. Both built by Claude. Both from a single prompt. The method comes after the proof.

Frameworks

Named ideas worth stealing.

00:26list

3-Step MCP WordPress Connection

  1. Install NovaMira free plugin, enable AI abilities
  2. Copy JSON snippet into claude_desktop_config.json; use Save not Save As
  3. Restart Claude Desktop; verify via Settings > Developer

Minimum path to give Claude Desktop live read/write access to a WordPress install.

Steal forAny tutorial wiring Claude Desktop to an external tool via MCP
05:00list

Prompt Specificity Rule for Elementor

  1. Disable Atomic Editor in Elementor settings before prompting
  2. Enable Containers feature in Elementor
  3. In prompt: name the page, say use Elementor containers, not atomic elements
  4. Add: Be creative and make the design high fidelity

Without explicit page-builder instructions, Claude defaults to HTML widgets that bypass Elementor entirely.

Steal forAny AI + page builder workflow covering prompt engineering for visual outputs
CTA Breakdown

How they asked for the click.

06:48product
Now for those of you who want to try NovaMirror Pro, there is a pro version for this plugin.

Soft sell after demonstrating the free tier fully. Shows noticeably better Pro-generated site before pricing reveal. Low pressure.

Storyboard

Visual structure at a glance.

proof - finished sites
hookproof - finished sites00:00
NovaMira download page
promiseNovaMira download page00:26
NovaMira config panel
valueNovaMira config panel01:35
copy JSON snippet
valuecopy JSON snippet02:40
paste into Claude config
valuepaste into Claude config02:56
connection verified
valueconnection verified03:34
dog grooming prompt
valuedog grooming prompt05:00
generated site live
valuegenerated site live05:29
NovaMira Pro example
ctaNovaMira Pro example06:48
Frame Gallery

Visual moments.