AI-First Visual Editor Built for WordPress

0:00Why AI Code Needs a Visual Editor

0:00What if you could ask AI to build a website for you? Instead of getting a block of code you can barely control, you can open it directly in WordPress and edit it visually with AI or through code. That's the idea behind UiChemy Composer. An AI first visual editor for WordPress. Because UiChemy Composer brings AI, visual editing and code together in one place. It's an AI first visual editor for WordPress that uses real HTML, CSS, and JavaScript, giving you the freedom to create with AI, edit visually, and take full control when you need it, all while keeping your website in WordPress. And with 90 plus Google page speed performance, you get advanced design capabilities without compromising

0:42From One Prompt to a Finished Website

0:42on performance. In this video, I'll walk through how UiChemy Composer works and how you can go from a quick AI prompt to a complete dynamic WordPress experience. So, let's get started. Here's the prompt where I've described a highly advanced branding studio website with an immersive award-level web experience integrated with smooth GSAP and WebGL based sections. Let's send it. It starts by understanding the concept, planning the structure, setting the creative direction, and then begins building. And within just a few minutes, the website is ready. Here's the generated artifact.

1:15Let's open it. And look at this. A clean hero section with a bold headline. As we scroll, each section comes in smoothly with interactive GSAP and WebGL based

1:25Bringing the AI Build Into WordPress

1:25animations. All right. Next, we'll convert this site into WordPress, giving you full control to manage everything easily through both CMS controls and AI. And this is possible with UiChemy, through which you can Build anywhere, own it in WordPress. So first install and activate UiChemy on your WordPress dashboard. Once we are inside the UiChemy dashboard, you'll see three modules. Figma plug-in where you can convert any Figma design into an editable WordPress page. AI website creator where you can build a complete website from a prompt or client brief.

1:58An AI agent where you can connect any AI tool to WordPress. Once connected, convert any AI generated website into an editable WordPress site. We'll cover the other two in separate videos. So for this workflow, we're going straight to

2:12Connecting Claude to WordPress With MCP

2:12AI agent. To set up the AI agent, there are four simple steps. First, generate the connection. Then select your AI tool. You'll find the most popular AI tools listed here. For this demo, I'm selecting Claude desktop. And step three, add the MCP server. There are two ways to connect your AI tool with MCP. Using a prompt or using the config. With config, you simply copy the configuration and add it to your claude config file. There's also a quick way to do this. You get an autoconnect option where you copy the provided command, run it in your terminal, and it handles the setup automatically. For this demo, we'll use the easiest option. Copy the prompt and paste it into Claude code.

2:51After the execution finishes, quit Claude completely and reopen it. Now, let's ask Claude to confirm the connection. All right, the connection is confirmed. Now let's ask Claude to analyze the generated website code from a UI/UX perspective and understand how each part of the site is structured. Once it has a clear understanding of the code, we'll use the UiChemy MCP to bring the site into WordPress with every section built using the UiChemy Composer. The goal is to closely match the original site's visual design, interactions, and overall user

3:26Importing the Site and Reviewing the Result

3:26experience. Let's send it. It starts by precisely understanding the code, loading the UiChemy build process with its AI capabilities, analyzing the design system, including the complex animations and WebGL elements, and then planning the entire build step by step. This process may take a few minutes, so please allow a few moments and watch this smart workflow in action. The process is now complete and you can check all the details. Here's the WordPress page link. Let's take a look.

3:57As you can see, the final result is remarkably close to the original. The visuals, layout, and scroll animations have been recreated with impressive

4:07Visual Editing: Text, Layout, Spacing and Borders

4:07accuracy. Now, let's click on edit with Elementor. Here you can see the structure with each and every section created using UiChemy Composer. Let's scroll down a bit. Suppose I want to update the styling of this heading. I'll click on the section and the UiChemy Composer editor opens immediately. I want to make the word built pink in color. I'll select it and you can see the floating panel with quick edit controls. Let's change the color and select pink from the global color palette. We can also quickly change the font family, adjust the font size and modify the alignment. All of these controls are also available in the side panel where we can add more properties when needed. Next, we have layout. Here we can control the display type. In this case, it's currently set to grid and quickly adjust the position, width, height, and gaps. Then we have spacing where we can control the outer and inner spacing. Under background, we can set a background color or add an image with its related settings. We also have gradient options under colors. And next is border controls where we can customize the border settings.

5:14Everything is quick and easy to access. For example, let's quickly increase the border radius of this card.

5:21Developer Tab: Classes, Forms and Dynamic Loops

5:21Now let me show you what we can do from the developer tab. Here we get the class-based editing system. There are also options like mark as loop and form which I'll cover shortly along with many other controls. Currently you can see one class is selected with the UI prefix. Notice that each card has sharp corners. Let's apply a border radius here and you can see it's applied to every card. That means this is a common class shared across these cards. So a change made from one place is applied to all of them. If we select local instead the change applies only to the selected card. Now if we have a form on the website simply select the form and from the developer tab choose mark as form.

6:03Now the form becomes dynamic and you can see all the available form settings here. Let's publish it and fill out the form. I'm quickly entering the details and clicking submit. As you can see the form has been submitted successfully. So whenever someone submits the form, we can manage all the submissions from the UiChemy form submissions section. Let's open it and you can see all the submissions right here. Perfect. Now suppose we want to make the blog section dynamic. Simply select the blog card and choose mark as loop. This makes the section dynamic and automatically fetches and displays the post data. You can also explore all the additional post related settings here.

6:41And this is WordPress. So we can make our content dynamic using custom post types, ACF, jet engine or metabox as well. All right, let's come back on other advanced controls like effects, animation and custom CSS which is available in design tab as well. Next is the code tab where we get four inner tabs. First is standard which gives us full access to the code including HTML,

7:06Code Tab, Global Manager and Scroll Timeline

7:06CSS and JavaScript. Then we have assets where we can add any third-party CSS or JavaScript libraries whenever needed. Page contains all the page level information including the head and footer sections. It also includes details about global design properties and any third-party CSS or JavaScript libraries used on the page. Then we have the site tab which contains all the site level information. And finally globals.

7:32Let's open the global manager. Here you'll find all the global styles used throughout the design, including colors, typography, and dimensions. You can also import and export your global settings from here, as well as sync them with Elementor. Next, we have the scroll timeline, which gives you the flexibility to set up and control GSAP

7:53AI Chat: Editing With the Pick Tool

7:53and WebGL animations. Okay, now let's move on to AI chat. A powerful way to make quick design changes with AI and turn your ideas into reality faster. To enable AI chat, we need to connect our AI tool with UiChemy Composer. And there are two ways to do this. The first is connect CLI. The second is AI connector. When you open the settings, you'll find a list of popular AI tool connectors. Simply install the connector, add your API key, and AI chat will be enabled. For this demo, I'll connect using the CLI. So, let's click connect CLI. Allow access to the browser. Next, you'll see two options, terminal and AI assistance. The quickest option is terminal. Simply copy the command and run it in your terminal.

8:36Before running the command, make sure you're already logged in to claude code. I'm already logged in. So, let's run the command. And within a few seconds, the AI tool connection is established. Now, let's click start chatting. All right. Now, let's scroll down and pick a section to bring our creativity into action. Let's select this one. Before using AI, let me quickly fix the alignment using the editor. Let's add proper gaps and remove the margin from the button so the spacing looks balanced. Now coming back to AI chat, I'll click on the pick tool and select the element. You can see the target element is identified here. From the AI chat box, we can select the AI model.

9:15Let's enter. Apply a gradient color animation to the text. Let's send it. And within a few moments, it's applied. Amazing. You can see how quickly we can change the complete look and feel of a section. And it's not just about modifying existing sections. We can also generate complete sections and even pages simply by describing what we want.

9:38Draw Tool and Theme Builder

9:38Next, let me show you the draw feature in composer. For this, I'm selecting the footer. But since the footer is a global section, we can't access it directly from here. So, first let's publish the page and go to the UiChemy Composer dashboard. From here, let's open theme builder. You can see the header and footer along with display conditions where we can control where they are applied dynamically. We can also copy the short code, preview the template and manage different archive and single page templates. Let's click edit. From the structure, I'll select this section and first fix the alignment of this bold text. Now let's use the draw tool. I'll draw a line around the element we want to target. And immediately the floating chat box appears at the bottom. Let's enter. Apply a smooth alphabet pop-up animation on hover and ensure the popping letter uses the pink color from the brand palette. Let's send it. Within a few seconds, it's applied. You can see how smoothly each letter pops up on Hover. It adds a really interactive and engaging effect. Let's click publish and

10:44Outline, Layers, History and Wrap-Up

10:44check the final result. Perfect. Next, we have outline view where we can see the hierarchy of each element. This makes it easier to understand the structure of the page and see how much space each section and element occupies. Then we have layers where you can see the complete layer structure of the page. This makes it easy to see how each element is nested and how it fits within the overall structure. Next is history where you can view the history of all the changes. Not only that, you can work with the UiChemy Composer directly on the front end as well, making it easier to build, customize, and preview your website in real time. And a quick note, all the prompts I used are linked in the description below. All right, so this is UiChemy Composer, the AI first visual editor for WordPress. Explore Composer and integrate this new workflow into your upcoming projects. If you have any questions, feel free to drop them in the comments and don't forget to share your feedback. For more amazing AI powered WordPress workflows, subscribe to our channel. Stay curious, keep learning, and I'll see you in the next one.