{"id":99801,"date":"2024-03-21T11:23:03","date_gmt":"2024-03-21T09:23:03","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=99801"},"modified":"2024-03-21T13:06:00","modified_gmt":"2024-03-21T13:06:00","slug":"we-are-open-sourcing-our-ai-site-builder","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/we-are-open-sourcing-our-ai-site-builder\/","title":{"rendered":"We’ve Created an AI-Powered WordPress Site Builder That We Are Open-Sourcing Today. This Is QuickWP"},"content":{"rendered":"\n

A couple of weeks back, we released the prototype of QuickWP<\/a>, an AI-powered WordPress site builder that uses OpenAI<\/strong>, an FSE theme<\/strong>, and WordPress Playground<\/strong> to generate a personalized theme for the user based on the topic and description of your website.<\/p>\n\n\n\n\n\n\n\n

If you haven’t checked it out yet, you can see the preview of QuickWP<\/a> on Twitter (aka X).<\/p>\n\n\n\n

\"QuickWP<\/figure>\n\n\n\n

Building QuickWP has been a challenging and learning experience for us, and today, we are open-sourcing the code base for the project so you can also learn from it and maybe even build something awesome upon it.<\/p>\n\n\n\n

In this article, I will discuss the ideas, challenges, and things we learned by working on QuickWP. I hope this helps you if you ever face similar challenges.<\/p>\n\n\n\n\t\t

<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tCheck out Quick-WP, an open-source #AI-powered #WordPress site builder<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n
<\/div>\n\n\n\n

The idea<\/h2>\n\n\n\n

While we have thought of experimenting with AI and OpenAI APIs for a while, we never planned to create an AI website builder. Previously, we tried integrating AI with the Otter Blocks<\/a> plugin to generate layouts from available patterns using AI prompt, but that implementation was quite primitive. The results were very generic and did not consider user context much in the provided result.<\/p>\n\n\n\n

Given that patterns in Block Editor are easy to break even with minor changes, we could not simply ask GPT to create patterns on the fly or even ask it to replace content.<\/p>\n\n\n\n

It all changed when we thought of this idea based on wireframes. It is simple: we create an FSE theme with wireframes and extensive color palettes. And then, with AI, we pick the patterns based on user prompts.<\/p>\n\n\n\n

In FSE themes, using the theme.json<\/a> file properties, we can easily modify the styling of the entire website from one place. And the same is applied to our patterns so that we have uniformity across the website without worrying about different patterns having different settings that need to be modified separately.<\/p>\n\n\n\n

Here, we also use a CC0 image directory to populate the website with images to give a better starting point to the user.<\/p>\n\n\n\n

While the idea sounds simple enough, it required some trials and errors for us to reach the point where it could generate results that were good enough for the user. The goal was to spend as little time as possible to create a prototype that users can use as a SaSS from the product website.<\/p>\n\n\n

<\/div>\n\n\n\n

Overview of project stack<\/h2>\n\n\n\n

The project required more than one part, so we used a number of stacks, i.e., whatever made it easier for us to prototype as quickly as possible.<\/p>\n\n\n\n

Here are the various parts of the project:<\/p>\n\n\n\n