Lovable for WordPress? The First AI WordPress Builder is Here

Key Takeaways

WordPress powers 43% of the web with thousands of plugins, SEO, and user management. But let's be honest, building with WordPress has usually meant dealing with annoying drag and drop grids, rigid templates, and endless plugins just to get a site production ready. I don't know about you guys, but in the past, I really have not enjoyed my time working with WordPress, and I used to actually have a WordPress website. Now, that changes today because there's a tool called Vibe for WordPress by Tenweb. Now, this is the world's first AI native vibe coding front-end builder that's fully integrated with WordPress for the back end. It's a pretty big leap beyond the drag and drop, and it gives unlimited design freedom on the front end with the scalability, stability, and the ecosystem of WordPress, which is the reason why a lot of people use that in the first place. Now, you can simply type a single prompt, generate a full WordPress website, and you have it instantly hosted, secured with SSL, backed up, and optimized. You also own all of your code. You have thousands of plugins at your fingertips and every project is production ready as soon as it's generated because of the fact that you're using WordPress. So today I'm going to show you exactly how this works. Let's dive into it and let me explain to you how to use this tool to create a productionready WordPress site with AI. Okay, so I'm on the website here. You can see it's the AI website builder here by Tenweb who has really been kind of leading the way for AI native development for WordPress. I've worked with them in the past before and you can see that you can simply describe the site just like you would in a lot of other tools and it can generate it for you. Now, first of all, I do want to disclose that I did team up with Tenweb for this video who again I've worked with in the past and who is really the best company when it comes to AI development for WordPress. It is 100% open source. So any of the code that you generate is yours which is why I'm comfortable sharing it. Now, this tool is called Vibe for WordPress, and it's really designed for companies and developers that benefit from the stability of WordPress, right? So, like agencies, small business owners, a SAS platform, marketplaces, there's all kinds of companies that want all of that management built in. They don't need a fully custom, you know, Python site or something along those lines. Now, they are actually positioning themselves here as the lovable for WordPress. I think that's a pretty good comparison and again allows you to go beyond the drag and drop. Anyways, let's dive into it. So, what I'm going to do here is just go to this site. Now, you don't need to make an account right away. It will prompt you for one later on. What I'm going to do is I'm just going to type coffee shop, okay, called, you know, cup of Java website or something. Okay, let's go ahead and generate that. Uh, that will take a second. It should start generating our site. So, it's been a minute here and you can see that it's now generated the structure of my site. So, we have the homepage, right? We have all of the different sections like the header and the footer and then all of the other sections on the page as well as the other pages like the menu, about us, contact and location, etc. If we wanted to, we could add another page here, right? We can give it a title. So, let's just do something like, I don't know, our team as another page and then proceed. And you can see that it will actually generate this page for us. And it should use AI to actually come up with the structure. So, there you go. It automatically gives us the different pages. And if we wanted to add another section, we can do that manually from here. Now any of this we can change later on but this is all generated with AI just to make it a lot faster for us and then from here we can edit the site structure the name all of this kind of stuff. So for example we have the website name Cup of Javaformational type of site you know food and beverage five pages and then if we want we can go here to the description and we can change this to be something that is more accurate for the site. So what I'm going to do is actually adjust this description then I'll be right back. All right. So I've adjusted this here to be kind of like programming themed which I think will be funny. And now I'm going to go ahead and press on generate. And I'm just going to sign into an account here. You can just make a new one. Again, it's free to try this out. And we'll see what it's able to generate for us. Okay, so I just signed in. It's now going through this process here where it's preparing the environment, you know, installing WordPress, all of that kind of stuff. Let's wait for that to finish. Then I'll be right back. Okay, so the generation is finished. You can see we have this nice website. It actually didn't take that long to build it. And there's a lot of features to go through here in terms of how to actually start working with this and adjusting it. Now, obviously, a lot of the information, right, is just boilerplate right now because we didn't give it all of the data that we want. But you can see that you have kind of an AI chat window on the lefth hand side here where you can just directly tell it any changes you wanted to make and it will go here, integrate with WordPress and make those changes for you. Now, you also can click between the different pages. So, home, we can click into the menu for example, you know, contact location, our team, etc. And if we just want to change something quickly without using AI, we can press this button right here, which is the select toedit. I can go here and I can say, you know, explore our nice menu or something and I can go ahead and press apply. Now, I also, if you I click on these, can ask for a quick change. When I do that, it's going to use AI to generate that change. Since I'm on the free version, I don't want to waste my AI credits. Um, but I will use the AI later on. So, let's go ahead and press on save. Now, there's a bunch of other stuff here as well. Because this is open source, again, you have the ability to go to the code editor. All of this code is yours. You can view all of it, right? You can check everything. You can see that's actually using React. So if you are a developer and you want to adjust something, you can just go ahead and write the code, you know, directly inside of here and it will automatically run. Cool. Now, let's toggle back from the code editor here and let's get it to make some changes to the homepage. So let's go back here. So I'm just going to type a prompt here and I'm going to go with something a little bit more vague because I'm curious what this is going to do for us. I'm going to say change the theme of my site to be lighter and more welcoming. Let's go ahead and press enter and I want to see what that's going to do for us. Okay, so I just made this change. I was just exploring some of the different pages here to make sure that that was accurate. And you can see that if we want to see all the changes it made, I can actually press on the code diff here. And when I do that, it will show me all the different files. So I can open this up and I can see, you know, all of the adjustments that it's made. It doesn't look like it adjusted the colors too much, just a little bit. So it's kind of a subtle difference, which I guess is kind of what I was asking for. And you get the idea. Now, let's say I don't like this and I want to roll back to the previous version. Then I can just simply go here and press on restore. When I do that, it will bring me back to the old version. And then if we go back to the homepage, for example, and we refresh from this little thing right here. Brings us back to the version that we were seeing before. So that's interesting, the fact that we can look at the code differences, right? And again, we can go in the code editor and we can just kind of manually modify anything that we want here and press through the different files, then take this code completely offline if we wanted to do that. Now, similarly to other editors, I can press the select to edit, right? I can edit a huge section. When I do that, it'll be referenced directly in the chat. So, I can either ask for a quick change or I can go to the chat. You can see that it's referencing this diff. Like, if I press this references the H1 tag, if I press, you know, this entire section, for example, references the section right in the chat. So, I can go here, just say, hey, I want to change the section or do something about what I'm talking about. And then I can actually make those changes. Now, as well as that, you do have the full version history of the project as well. So, if you go here to the history, you can see all of the stuff that you asked for it to do. And then you can switch between uh between it even if you've reverted any of those changes. And then of course when you're ready to go, you can press on this publish button and it is just published up and you can start using it, right? It has the SSL, it has the SEO automatically and I'm going to show you some more of those features because so far we're just looking at the UI, but remember this is all deployed with WordPress so you get all of the advantages of that WordPress back end. Okay, so about a minute later you can see it's deployed now. We can connect our domain and just get one for free or we can just press on the default domain that it gave us. And then you see that we're here inside our fully deployed WordPress website. And like you would imagine, I can edit this and I can go right into the WordPress admin panel. So if I go here for example, I can go to like dashboard and then it's going to bring me to the dashboard where I can start managing this. You can see we're now inside of WordPress admin which if you ever use WordPress, you are definitely familiar with. And then we can start, you know, changing the appearance, changing the plugins, managing the different users. if we had that, right? You get the idea. Now, let's say I want to change some of the SEO features, for example, for my website. Well, I'm going to go back here and I'm going to go to the dashboard of 10 web because that's how we created this site, right? And when I do that, it's going to show me the ability to edit the site, which would bring me back to this editor or to view all of the other information about it. So, you can see I'm in my project. I'm going to go to manage. And then when I click this, it gives me the page speed scores, right? And then I have the ability to do things like change the branding, right? Go into the advanced settings. look at the credentials for my hosting service, look at the plugins, look at the pages, the image optimizer, all of that kind of stuff. Go to the domains, right? And you get the idea. I also have features like backups. So, for example, if I go here, I can create a manual backup or just daily at 3:00 a.m. It will automatically create that for me. And all of these features are just out of the box provided to you. And you don't need to set them up like you would if you were coding your own custom site or you weren't using something like WordPress. Now, I'm just looking here because there's some features that I haven't messed with yet. for example, CloudFare CDN, image optimizer, all of this kind of stuff. Some of them do require the pro version of Tenweb, which you do need to pay for. But I think it's interesting that they just have it all built in. Then even things like the branding overview, right? We can see the logos, we can adjust them, we can change the mission, we can change the vision. You get the idea. Now, look, I'm not going to go through every single feature here. The point of this video was just to make you aware that something like this does exist. If you are someone that benefits from the advantages of WordPress, then I would definitely say this is a good option to go with. Considering how modern the front end is, the fact that it's written in React, which is much more modern than, you know, standard HTML or the templates that all these WordPress sites typically use, it gives you that full control to really create whatever you want. For example, if some WordPress site came to me and said, "Hey, can you edit my front end?" I can't really do that for them right now unless they're using something like this where they have React, which is a modern framework that I know that I can go into, start adjusting, start messing with, etc., and utilize the power of this kind of AI editor. So, anyways guys, that is going to wrap up this video. If you enjoyed, make sure to leave a like, subscribe to the channel, and I will see you in the next one. [Music]