In this post, I share how I moved a landing web page style from Base 44 to WordPress using Claude and Beaver Builder AI. Claude reconstructed almost all of it with native Beaver Contractor modules, so the web page is easy to edit in the front-end drag-and-drop editor.
Base 44 is excellent at making page mockups. You define what you want and it develops it. The catch is that the web page is held on Base 44, not on your WordPress site.
That’s penalty for an examination or a principle style. It’s not excellent when your organization currently runs on WordPress, or when a customer intends to upgrade the website by themselves.
So I intended to discover a way to relocate a landing page idea I created a fabricated mobile dog grooming service, Wag & Roll, from Base 44 to WordPress. The good news: with Claude and Beaver Contractor AI, I really did not need to rebuild it by hand.
I go through the process detailed listed below. I also recorded a detailed video you can enjoy, and I share some pointers in the process.
Table of contents
What you require before you begin
| What you need | Information |
|---|---|
| Claude and the Claude Desktop application | I ran this in Cowork in the desktop app, where Claude can open up web pages in its integrated browser. A complete page construct takes a while and utilizes an excellent chunk of your usage, so a paid strategy offers you more room. |
| A WordPress site on version 6 9 or later | It has to be publicly obtainable over HTTPS. A neighborhood install on your computer won’t work. |
| Beaver Contractor with an active certificate | Beaver Builder AI includes the And also, Specialist, and Limitless plans. The rates web page has the details. |
| The Beaver Building contractor AI plugin | It’s a different plugin. Consumers download it from their My Account page. |
| The MCP Adapter plugin | An official WordPress plugin that allows AI representatives like Claude deal with your site. |
| Pretty permalinks | Post name works. I’ll show you where to establish it below. |
| A published Base 44 page | Claude needs a public web link to examine. |
New to Beaver Home Builder AI? The arrangement message covers the install.
Link Claude to your website (one-time)
If you currently attached Claude to this site for the Claude layout to WordPress guide , skip to the following section.
Pick your MCP design setups
Go to Setups > Beaver Building Contractor AI 2 settings regulate what Claude develops with.
MCP Layout Mode choices Indigenous Modules , Customized Modules , or Crossbreed Personalized Modules implies the AI writes its own HTML, CSS, and JavaScript for areas the conventional modules can’t reproduce.
MCP Format Structure picks Rows & Columns or Box Modules I utilized Crossbreed with Rows & Columns, after that told Claude in my timely to adhere to native components wherever it could.
These settings just relate to new web pages. After you alter one, the screen tells you to reactivate your chat application and begin a brand-new session. My colleague Jennifer discusses each alternative in Beaver Builder AI MCP design settings
Examine the requirements and copy your MCP endpoint URL
Open the MCP Connection tab and select Connect through Beaver Builder AI Every website demand need to have an environment-friendly check.
Next, license your website with Beaver Home builder AI in step 2 of that screen (mine was already accredited). Then click Duplicate beside the MCP Endpoint URL.
If the permalinks examine falls short, your website is most likely on Level. Go to Settings > Permalinks , choose Message name , and save. WordPress has a permalinks guide if you desire the background.
Include the port in Claude
In the Claude Desktop computer application, click the + button, hover over Connectors , and click Add connector Provide it any type of name you like, paste the URL you duplicated, click Continue , and accredit.
To verify it worked, open that same Connectors food selection. Your site’s connector must be in the listing with its toggle on.
Custom ports work with every Claude plan. Anthropic’s assistance article notes that Free accounts are restricted to one.
Release your Base 44 web page so Claude can read it
Claude can’t check out a page it can’t open up. So release your design in Base 44 prior to you prompt anything.
Click Publish in the top right corner. Leave Application exposure on Public , after that click Publish in the panel.
Base 44 informs you your app is real-time and provides you a link. Click View app to inspect it, then replicate that link. That’s what you’ll hand to Claude.
Provide Claude the Base 44 link and one timely
Initially, I asked Claude to ensure it could reach my WordPress website. It asked permission to utilize the Beaver Building contractor AI link, I allowed it, and it verified the link worked. That fast check can save you from a fallen short construct later.
After that I pasted my Base 44 web link in the conversation and gave Claude this timely:
Hey Claude, I have this landing page built on Base 44 I shared my web link. Can you convert this style right into my WordPress web site using Beaver Building contractor AI native components? I such as to use rows, columns, box module as long as feasible. If there are any type of areas that you think you can not do with indigenous components, please allow me understand. And in those cases, I wish to utilize the customized HTML module. Let me recognize if you have any inquiries. Thanks.
I included the last 2 sentences intentionally. They inform Claude to bring the hard sections back to me instead of making the call on its own.
Claude asked to open the page in its web browser, after that scrolled through it by itself. It examined the whole web page prior to it constructed anything.
Both inquiries Claude asked me
Partway with the develop, Claude paused with two concerns. Both were about sections native modules can’t replicate precisely.
Review the alternatives instead of clicking the first one. Your answers choose just how editable the WordPress page will certainly be.
The reservation kind
My Base 44 web page has a fill-in-the-blank form (“Hi Wag & Roll! I’m ___ and my pet dog ___ …”). Claude mentioned that Base 44 deals with the submit on its own backend, and that backend does not come over to WordPress. It gave me three selections.
| Option | What you get | The catch |
|---|---|---|
| Native Contact Kind (Claude’s referral) | The actual Beaver Contractor Get in touch with Kind module. It emails you when someone submits. | Standard stacked fields, so you lose the fill-in-the-blank appearance. |
| HTML look-alike | An HTML module that duplicates the design precisely. | The send switch will not send out anywhere until you connect it to a kind service. |
| Both, alongside | The look-alike with an indigenous type under it, so you can contrast. | You erase one when you’re done. |
I picked the HTML look-alike since I wanted the design. If you do the very same, link that form prior to you release. Or else visitors load it out and absolutely nothing takes place.
Wag & Roll isn’t a real company, so my trial form isn’t linked to anything.
If you prefer to have a kind that works on day one, choose the native Get in touch with Type.
The pet dog gallery
The layout has 2 rows of canine photos scrolling sideways in contrary instructions. Claude stated indigenous modules can’t animate like that. It provided an animated HTML component or a still 5 × 2 grid of the very same 10 photos constructed from native modules.
Claude recommended the animated variation, however I went native. A still grid is simpler to modify later, and swapping a photo is a click rather than a code modification.
Computer animated is a great option too. You’re trading motion for very easy edits.
Last, Claude asked me to log in to WordPress in its internet browser so it could inspect its very own job. I logged in, told it I was done, and it finished up.
What the finished web page resembles in Beaver Builder
Claude stated the web page was done and shared a sneak peek web link. It looked very near the Base 44 version, and the pictures and copy all came over.
To see what it’s built from, open up the web page in Beaver Building contractor and click the Summary panel symbol. You’ll see rows, columns, and indigenous components like Heading, Text Editor, Picture, and Button Group.
That checklist is the entire point. You modify this web page similarly you ‘d edit one you built by hand.
You can drag areas about, duplicate them, remove them, and change text exactly on the page.
The pictures moved as well. Open Media > Library and you’ll see the pictures Claude uploaded, so the page does not depend on data held somewhere else.
When the sneak peek looks right, click Done , after that Publish
Frequently asked inquiries
It’s the link in between Claude and your WordPress site. MCP (Model Context Method) is a criterion that lets AI apps like Claude use outside tools, and the MCP Adapter plugin brings it to WordPress. Beaver Builder AI uses it so Claude can construct pages with Beaver Building contractor components.
Yes. Claude requires to open it. I released mine with Public presence and provided Claude the web link.
It relies on your MCP Design Mode setup and your prompt. I selected Hybrid and asked for native components first, with customized HTML only where native could not get the job done. Claude consulted me prior to using it.
Out their very own. Base 44 manages entries on its backend, which stays behind. Make Use Of the Call Form module, or connect your custom HTML kind to a form service prior to you publish.
Yes. It’s developed from native rows, columns, and modules, so you modify it in Beaver Building contractor like any type of various other web page. Any section you approved as personalized HTML gets modified in code.
Finishing up
Many thanks for checking out my write-up on exactly how to move your Base 44 layout to WordPress making use of Claude and Beaver Builder AI.
Want to check Beaver Home builder AI before setting up anything? Attempt it free You get a web link to a trial site to try it on.
Already on a Plus, Professional, or Limitless strategy? Grab Beaver Contractor AI from your My Account page, and maintain the Beaver Home builder AI docs useful.
If you have any type of questions, or you move a Base 44 design over on your own, leave a comment below. I ‘d love to hear which way you selected when Claude asked. Happy structure!
