The short answer
If an AI tool handed you HTML, CSS and JS and you can't code, put it into WordPress as UiChemy Composer sections. Design Mode shows text, images, links, colors and spacing as plain fields on the page. Developer Mode holds the code for when someone needs it. The free plugin includes both modes. Editing by prompt (AI Chat) is on paid plans.
What you need
- The code the AI gave you: a ZIP or a folder of HTML, CSS and JS from Claude, Lovable, Bolt, v0, Cursor or a similar tool.
- A WordPress site you can log in to as an admin. A staging or local copy is fine to start, and UiChemy says those don't count against site limits.
- Elementor, Gutenberg or Bricks on that site. Composer runs inside all three, including free Elementor.
- The UiChemy plugin. The Free plan covers one live site with the full canvas and both editing modes.
- Optional: an AI provider for editing by prompt. That means your own OpenAI, Anthropic or Google key through the WordPress AI Client, or a CLI agent such as Claude CLI, Codex, Gemini or OpenCode, plus a paid plan for AI Chat.
Step by step
Understand what you're holding
AI site tools write three kinds of file. HTML is the content and structure: headings, paragraphs, images, buttons. CSS is the look: colors, fonts, spacing. JS is behaviour: menus that open, sliders that move. The trouble for a non-coder is that all three are text files with no buttons. Composer's answer is to keep the code exactly as code and put a visual editor on top, rather than translating it into a page builder's own format that nobody can read later.
Bring the code into WordPress
Install the UiChemy plugin, add the Composer widget to a page once, and connect Claude to your site with the one command UiChemy gives you. Then attach the AI tool's ZIP and ask Claude to convert it with the UiChemy MCP, so every section arrives as a Composer section. If you started in a specific tool, UiChemy has a page for each one, and Lovable to Elementor walks through the same route in detail.
Convert the attached ZIP to WordPress with the UiChemy MCP. Put each section into its own UiChemy Composer section, keep every word of the copy exactly as written, and list anything you could not convert.Make everyday edits in Design Mode
Click a section on the page and you see fields, not code: text, images, links, colors and spacing. Change a headline, swap a photo, fix a broken link. There is no code on screen, so there is nothing to break by accident. This is the mode UiChemy built for whoever owns the content, which is you.
Ask for bigger changes in plain English
Layout changes are where non-coders usually get stuck. With AI Chat you describe the change and Composer edits the real code, with the whole page and site in context. Ask for one change per message and name the section, so the rest of the page stays put. You can also circle something on the page and write what's wrong. AI Chat is on paid plans.
In the testimonials section only, show three cards per row on desktop and one per row on mobile, add a 24px gap between cards, and don't change any text or anything outside this section.Choose your AI, or skip it entirely
Composer works with the AI switched off. Every mode, panel and control still works, so you can do all your editing by hand. If you do want prompts, bring your own key from OpenAI, Anthropic or Google through the WordPress AI Client, or connect a CLI agent you already pay for. UiChemy's pricing page says Composer-only plans don't use Credits, because the AI runs on your own key or account.
Look under the hood only when you need to
Developer Mode shows the class editor, the code for the section, the page and the whole site, the layers panel and the global variables. You don't have to touch it. It's worth knowing it's there, because the day you hire a developer for one fix, they open the same section and read normal HTML, CSS and JS instead of a format only one builder understands.
Set colors once for the whole site
AI tools often hard-code the same blue in forty places. Composer keeps global colors and variables, so a brand color lives in one spot and every section follows when you change it. Ask AI Chat to move repeated values into variables once, and future color changes become a single edit.
Find every color used more than twice across this site, turn each one into a global color variable with a clear name, and replace the repeated values with those variables. Don't change how anything looks.Decide who else gets to edit
If a colleague or client will update the site, the role manager controls what each WordPress role can change, and front-end-only handover keeps them on the page instead of in the admin. The pricing page lists the role manager on paid plans.
What carries over and what does not
What you get
- The AI tool's pages living in WordPress as real HTML, CSS and JS, editable by someone who has never written code.
- Everyday changes done in plain fields in Design Mode, with nothing on screen that can break the layout.
- Bigger changes done by describing them, using your own AI key or account, or no AI at all.
- Code stored in your own database on your own hosting, readable by any developer you bring in later.
- A site that keeps running if your license lapses, because nothing is served from UiChemy.
What does not carry over
- AI Chat is on paid plans. The Free plan gives you the full canvas, Design Mode and Developer Mode, but no prompting.
- The Free plan covers one live site. Lifetime plans list 1, 25 or unlimited sites.
- Composer runs in Elementor, Gutenberg and Bricks today. Divi is coming but not live.
- If the AI tool built logins, a database or payments, those are not documented as converted. Composer edits what's on the page.
- Composer runs alongside your page builder today. It doesn't replace it yet.
- The role manager is listed on paid plans, so locking down a client's access needs one.
Troubleshooting
A prompt changed more than I asked for
Name the section and say what must stay the same, in the same message. One change per prompt is slower to type and much faster to review.
I can't find the AI Chat panel
AI Chat is a paid-plan feature, and it needs an AI provider connected: a key through the WordPress AI Client or a CLI agent. Design Mode still works without it.
A color won't change everywhere
That value is hard-coded in some sections instead of using a global variable. Ask AI Chat to replace it with the variable, or ask a developer to do it once in Developer Mode.
A menu or slider stopped working after an edit
That behaviour lives in JS. Undo the last change through the editor's history, then ask for the edit again and tell it to leave scripts alone.
The AI tool's login page converted but does nothing
Logins run on a server, and server functions aren't documented as converted. Use a WordPress plugin for accounts instead.
My license expired. Is the site down?
No. UiChemy says the plugin keeps working and the site keeps running. Updates and support pause until you renew.
Frequently asked questions
Do I need to know how to code?
No. Design Mode is text, images, links, colors and spacing in plain fields. Developer Mode is there if you ever want it, but nothing requires it.
What makes Composer different from a page builder?
Page builders store your page in their own widget format. Composer stores real HTML, CSS and JS and puts the visual editor on top, so the output is code first and a canvas second.
Can I use it without AI?
Yes. UiChemy describes Composer as a visual editor first, and every mode, panel and control works with the AI switched off.
Which AI providers work with it?
OpenAI, Anthropic or Google through the WordPress AI Client, or your own CLI agent: Claude CLI, Codex, Gemini or OpenCode. You bring your own key or account.
What's free?
The free plugin includes the full canvas plus Design and Developer modes on one live site. AI Chat is on paid plans. Paid lifetime plans come with a 14-day money-back guarantee.
Who owns the code?
You do. Everything Composer generates is raw HTML, CSS and JS in your own WordPress database, on your own hosting. Nothing is locked to UiChemy's service.
What happens if I stop paying?
The plugin keeps working and the site keeps running. Updates and support pause, and AI Chat needs a paid plan.
I haven't picked an AI tool yet. Where do I start?
Pick the one whose output you can approve fastest. The Bolt alternatives roundup compares the options. If you're rebuilding an old site rather than starting fresh, read how to rebuild a site without starting over, and if your team designs in Figma, Figma to WordPress for in-house teams is the closer fit.