> For the complete documentation index, see [llms.txt](https://docs.intelligems.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intelligems.io/general-features/visual-builder/ai-visual-builder.md).
# AI Visual Builder
### Accessing the AI Builder
1. Open any test or personalization experience and navigate to the **Visual Builder**
2. Click the **AI Assistant** button in the toolbar
3. Type your prompt describing the change you want to make
4. Review the result — the change will be previewed live on the page
5. Click **Save and exit** when you're done, then save your test or experience to apply the changes
***
### How it works
When you submit a prompt, the AI Builder analyzes your site, including fonts, colors, and existing component styles, and generates a style guide it uses to ensure any new or modified elements match your storefront. For complex requests, it verifies its own output before returning results.
Your Shopify products, collections, and pages are already loaded into its context, so it knows your catalog before you ask.
Every change the AI Builder creates is a standard Intelligems modification under the hood:
* Text and copy changes are created as **text modifications**, just like those added manually in the Visual Builder
* Inserted elements are created as **generic components** — AI-generated HTML/CSS components with editable properties
* Reordering and structural changes are applied as **CSS/JavaScript modifications**
This means all AI-generated changes are visible and editable in the Visual Builder after the fact. You don't have to re-prompt to make a small tweak, although you can.
Because every AI-built change is a standard mod, you can also:
* **Test it.** Run an A/B test between an AI-built mod and your control using the same Intelligems testing flow you already use.
* **Personalize it.** Show the mod to a specific audience: first-time visitors, mobile users, or any segment you can target with Intelligems.
### What can the AI Builder do?
The AI Builder handles a wide range of on-site modifications, including changes that would otherwise require custom code or developer involvement.
#### Edit text
Change copy anywhere on the page.
> *Try: "Change 'Top-rated' to ‘Most Loved’ on the home page"*
#### Show or hide elements
Conditionally show or hide any page element.
> *Try: "Hide the sale banner on all product pages"*
#### Insert new elements
Add new content to the page that matches your site's existing style — trust badges, announcements, sections, and more.
> *Try: "Add a trust badge under the buy button that says 'Free returns, no questions asked'"*
#### Reorder page sections
Move elements or sections to a different position on the page.
> *Try: "Move the reviews section above the product description"*
#### Bulk changes
Apply the same modification across multiple matching elements at once.
> *Try: "Remove all sale badges claiming more than 80% off across the page"*
#### Replace images
Swap out images with alternatives from your Shopify media library — or upload a reference image directly.
> *Try: "Swap the hero image with the summer campaign photo from my media library"*
#### Ask for ideas
Not sure where to start? Ask the AI what to try, not just what to build. It can suggest changes based on your page or your last prompt.
> *Try: "What should I test on this page?" or "What else should I do based on the last change we made?*
***
### Uploading images
You can upload images directly into the AI Builder chat. This works in two ways:
* **As a reference for style or content.** Upload a design mockup, brand asset, or screenshot and ask the AI Builder to match it. For example: *"Make the announcement bar look like this"* with a screenshot attached.
* **To swap in a specific image.** Upload the image you want to use and ask the AI Builder to place it. For example: *"Replace the hero image with this"* with your new photo attached.
Supported file types include images, PDFs, CSVs, and markdown files.
***
### Editing AI-generated changes
After the AI Builder creates a modification, you can edit it directly in the Visual Builder without re-prompting:
* **Generic components** expose editable properties like text content, font color, background color, or images. Click the component in the builder to see what's adjustable.
* **Text modifications** can be updated just like any manually added text mod. See the [Visual Experience Builder documentation](https://docs.intelligems.io/general-features/onsite-editor-1) for details.
* **CSS/JS modifications** can be opened and edited in the code editor. See the [Visual Experience Builder documentation](https://docs.intelligems.io/general-features/onsite-editor-1) for details.
* **Ask for controls.** If you want to adjust a property without re-prompting, ask the AI to build settings into the mod. For example: *"Add a setting so I can change the badge color without re-prompting."* The settings will appear as editable properties on the component, just like a generic component.
***
### Tips
* **Be specific in your prompts.** The more context you give, the better the result. "Add a trust badge under the 'Safe and Secure Checkout' badge that says 'Free of synthetics and toxins'" will produce a better match than "add a trust badge."
* **The AI Builder uses your live site for context.** Changes are previewed on your real storefront, so results reflect your actual page content and structure.
* **For bulk changes, describe the pattern clearly.** Prompts like "remove all product badges that claim a sale over 80% off" work well when the pattern is consistent across the page.
* **You can layer prompts.** Each prompt adds to the existing set of modifications in your experience. There's no need to re-describe previous changes.
* **Upload images for richer context.** Attaching a screenshot or asset gives the AI Builder a clearer target to work toward.
***
### Things to note
The AI Builder is in early beta and improving rapidly. A few things to keep in mind:
* Not all structural changes are possible via prompt. Some complex layouts may require manual adjustments or custom code
* Results may vary on highly customized or non-standard Shopify themes
***
*For manual edits, see the* [*Visual Experience Builder*](https://claude.ai/general-features/onsite-editor-1) *documentation.*
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.intelligems.io/general-features/visual-builder/ai-visual-builder.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.