Hey everybody! If you’ve built a site style in ChatGPT , you have actually probably asked yourself how to get your ChatGPT website to WordPress. Do you really need to reconstruct the entire point by hand?
Excellent news: you don’t. You can convert a ChatGPT website to WordPress with the Beaver Building contractor AI MCP connection It connects ChatGPT to your site, and afterwards ChatGPT develops the web page for you right inside WordPress.
And the most effective component? The web page you wind up with is completely editable in Beaver Home builder, similar to any other page you have actually developed.
TL; DR: Connect ChatGPT to your WordPress website with the Beaver Builder AI MCP connection. Offer ChatGPT one prompt, and it restores your style as a draft WordPress web page, with the photos in your Media Collection. Then modify it in Beaver Builder and release. Want to check Beaver Building contractor AI initially? Attempt it complimentary , no download needed.
I walk through the whole thing in the video below. This blog post adheres to the very same steps, so you can read along or miss to the part you require.
In this article
The design I’m converting is a homepage for a made-up Phoenix az plumbing firm called Copper & Circulation. I developed it in ChatGPT, and any kind of site you develop there works similarly.
What you require prior to you begin
Here’s what I had mounted for this tutorial. Obtain these established initially and the rest goes a lot smoother.
Do Not have Beaver Contractor permit yet? The plugins and theme feature a Beaver Home builder plan, find out more from our pricing page Already a consumer? Your downloads are on your My Account page.
Component 1: Connect ChatGPT to WordPress
First, you link ChatGPT to your WordPress website. It’s an one-time setup, and as soon as it’s done the link stays in ChatGPT for your next task.
Step 1: Open Up the MCP Link setups
In your WordPress control panel, hover over Settings and click Beaver Builder AI
The very first screen has a couple of brief video clips. If you have actually never ever established an MCP link previously, the MCP Connections video clip deserves a watch. It’s only around 2 minutes long.
Click the MCP Link tab on the top left. You’ll see two choices: Attach using Beaver Builder AI and Link Manually I made use of Attach using Beaver Builder AI.
Action 2: Inspect the site needs
The web page provides you a short checklist. Every item requires a green check prior to you proceed.
- Your website is openly reachable over HTTPS.
- Your Beaver Builder certificate is energetic.
- The MCP Adapter plugin is set up and active.
- Permalinks are readied to a pretty framework.
- You get on WordPress 6 9 or later.
Uncertain what a quite permalink framework implies? Most likely to Setups > Permalinks Brand-new WordPress installs are in some cases set to Plain or Numeric. Choose Post name , then click Save Modifications (WordPress has a full guide to permalinks if you want the details.)
Action 3: Accredit and duplicate the MCP endpoint link
Head back to Settings > Beaver Building Contractor AI and open up the MCP Connection tab once more.
Tip 2 on that particular page is Accredit with Beaver Building Contractor AI Mine was currently authorized. If your own isn’t, click Accredit
Tip three on that particular web page is the MCP Endpoint URL Click Duplicate You’ll paste it right into ChatGPT following.
Step 4: Create an MCP app in ChatGPT
Currently open ChatGPT. Click the Plugins symbol, then click Add and select Develop MCP App
A New Plugin window opens. Load it in such as this:
- Call: anything you like. I call my own BBAI MCP.
- Server link: paste the MCP endpoint link you duplicated from WordPress.
- Tick I understand and want to proceed
- Click Develop , then click Authorize
You’ll discover ChatGPT reveals a warning that personalized MCP web servers come with risk. That’s reasonable. Only link web servers you trust fund, and right here you’re linking your own WordPress site.
Don’t see Produce MCP Application? Customized MCP applications are still a newer ChatGPT attribute, and what you can utilize depends upon your plan and settings. OpenAI’s assistance write-up on developer setting and MCP applications has the existing details.
Step 5: Ensure it’s connected
You’ll recognize it functioned when your application appears in the left sidebar under Set up Mine says BBAI MCP. You can transform it off or remove it from there later if you need to.
One more point I always do: ask ChatGPT if it can see your site. In my instance it said yes, it can see the link and was ready to go.
Component 2: Transform your ChatGPT website to WordPress
This is the fun part. You inform ChatGPT what to develop, and it builds it on your WordPress website.
Action 1: Offer ChatGPT the construct prompt
Go back to the chat where you created your site. This way ChatGPT currently has the style before it. Then provide it a punctual. Right here’s the one I utilized:
Build the Copper & Flow Pipes site to match the accepted style as very closely as feasible. Usage Beaver Building Contractor AI MCP, personalized HTML components where they generate a closer match, and Beaver Themer for the header and footer. Post the offered original pictures to the WordPress Media Collection and use them in the page. Check the desktop and mobile previews, repair any concerns you find, then share a hosting sneak peek for my evaluation. Do not release till I accept.
Swap in your very own site’s name. Here’s why each part remains in there:
- “Suit the accepted style” tells ChatGPT the style is done, so it duplicates it instead of obtaining innovative.
- “Custom-made HTML components where they generate a closer match” provides it area to obtain the complicated sections right.
- “Beaver Themer for the header and footer” implies your header and footer get developed as Themer formats, not stuck inside the web page.
- “Post the provided original images” places your images by yourself website.
- “Examine the desktop computer and mobile sneak peeks” makes ChatGPT check its very own work and repair what it locates.
- “Do not release until I accept” keeps you in control. Absolutely nothing goes live without you.
Want indigenous Beaver Home builder components instead of custom-made HTML? Most likely to Setups > Beaver Home Builder AI > Setups The MCP Design Setting establishing lets you choose Indigenous Modules, Customized Modules, or Crossbreed. You can likewise choose whether native sections utilize rows and columns or box modules
Step 2: Evaluation the staging draft
Currently allow it do its thing. Mine took about 16 minutes, so get hold of a coffee.
When it’s done, ChatGPT informs you the staging draft is ready and provides you a sneak peek web link. Mine also detailed what it did:
- Published the plumbing pictures to the Media Library and utilized them on the page
- Inspected desktop and phone-width designs, after that dealt with the mobile format and the hero comparison
- Validated the header food selection services mobile
- Constructed the header and footer as Beaver Themer drafts, set to reveal only on the Copper & Circulation pages
Absolutely nothing was published, similar to I asked.
Click the preview web link and have a look. Mine looked just like the initial layout. The hover effects, pictures, material, accordion, and get in touch with create all came via.
One heads up. ChatGPT told me the telephone number and email were comprised. It likewise set the get in touch with type as a trial that will not send out. If you’re building an actual site, swap in genuine get in touch with information and examine your kind before you release.
Action 3: Examine your Media Library
Want evidence the pictures really relocated? Open up Media > Collection in your dashboard.
ChatGPT side-loaded every image from the layout. They’re hosted on your WordPress site currently, out ChatGPT.
Component 3: Edit the page in Beaver Building contractor
Since it’s in WordPress, you could be asking yourself: can I edit this page?
Yes, you totally can. It’s a Beaver Builder page, so you edit it the way you edit any type of Beaver Contractor page.
Step 1: Edit message right on the web page
Click Beaver Building contractor to open up the page in the builder. After that click any kind of area and you’ll see plenty of choices.
Intend to update the duplicate? Click the message and begin inputting. You can bold it, italicize it, and change the heading degree from the little toolbar.
Step 2: Open Designs for more control
Click the three dots on an area and select Designs A setups panel opens on the best side, and every little thing in it matches the area you selected.
It has a couple of tabs throughout the top:
- Content is where you change images and edit the title, the text, the icons, and the buttons.
- Layout is where you readjust the style system settings.
- Code provides you the HTML, CSS, and JavaScript for that section.
- Advanced has things you would certainly expect from any Beaver Home builder component: margins, breakpoints, show settings, and much more.
You can additionally drag and drop sections around, duplicate them, and delete them. All right stuff you currently like around developing with Beaver Contractor functions right here as well.
Step 3: Ask the AI conversation inside WordPress
This following part is really cool. Click the AI button on top of the building contractor and a Beaver Building contractor AI chat box opens up. You can trigger it best inside WordPress, for anything on this page. This article walks you through exactly how to setup up the AI chat capacity in Beaver Home builder.
Allow’s say I desire a testimonial area. I typed: “Can you add a testimonial area on this web page?”
It said “Done” and added one using the very same brand name design and typefaces as the original design. You can maintain making modifications in that chat as you go.
Step 4: Publish
Happy with it? Click Done , after that Publish
That’s it. You now have a complete web page that began in ChatGPT and stays in WordPress. It’s totally editable and mobile responsive.
That this workflow is for
If you like designing in ChatGPT, this conserves you the worst component: rebuilding it by hand. Style it in ChatGPT, convert it to WordPress, and edit it in Beaver Building contractor.
If you run an agency, it’s a nice method to obtain a client website began fast. You still hand off a normal WordPress site your customer can edit. Couple it with a Style System and every new web page Beaver Building contractor AI develops afterwards stays on brand name.
Designing in other AI devices as well? The same idea helps moving a Claude design to WordPress and converting a Charming style to WordPress Not exactly sure when to use the chat, MCP, or Design Kits? Here are 3 ways to construct with Beaver Home builder AI
FAQ
Yes. It’s a Beaver Builder page. You can modify text on the page, open Styles for every section, edit the code, and drag, replicate, or remove sections.
Not if you tell it not to. My punctual claims “Do not publish till I approve,” and ChatGPT left the page as a draft with a sneak peek link.
Into your WordPress Media Collection. ChatGPT submits them, so they’re organized on your own site.
Not with this setup. Among the site needs is that your website is publicly reachable over HTTPS.
It depends on you. The MCP Layout Mode setting in Beaver Home builder AI lets you select Native Components, Custom-made Modules, or Hybrid. My punctual likewise allow ChatGPT utilize custom HTML components where they matched the layout much better.
You require a strategy that allows you include customized MCP apps. OpenAI is still rolling this out, so check OpenAI’s aid article for the present listing.
Try it on your website
Want to see Beaver Building contractor AI prior to you set up anything? Attempt it totally free Decrease in your name and e-mail and you obtain a web link to a live play ground. Absolutely nothing to download.
Currently a Beaver Contractor customer? Get the Beaver Builder AI plugin from your My Account page. Unsure which prepare includes it? The prices page lays it out.
Arrangement docs live at docs.wpbeaverbuilder.com/bb-ai Of what’s new, review the 1.0 launch blog post and the 1.0. 1 update
Attempted it? I ‘d love to hear exactly how it went. Send us your feedback
