> ## Documentation Index > Fetch the complete documentation index at: https://docs.growthbook.io/llms.txt > Use this file to discover all available pages before exploring further. # AI Mode: Generate A/B Test Variations With AI > Generate A/B test variations with natural language in the AI Visual Editor. Preview the proposed edits, then accept or change them. Enterprise **AI Suggestions** is available on Enterprise plans. AI mode is the fastest way to draft an A/B test variation in the [AI Visual Editor](https://docs.growthbook.io/app/visual). You describe what you want in plain language ("make the hero headline more urgent and the primary button green"), and the AI proposes specific DOM-level changes — element selectors, new content, new styles — that you can preview, accept, edit, or reject one at a time. ![The GrowthBook AI Visual Editor](https://mintcdn.com/growthbook-ea15456d/J3C3juKhu0f7KEr_/static/images/visual-editor/ve-ai-chat.png?fit=max\&auto=format\&n=J3C3juKhu0f7KEr_\&q=85\&s=68776b3c785a66ed6e12f84ee972aaf5) It's especially good for: * Multi-property changes ("make this card more premium") without touching each control * Change text content without needing to find the right content field in the property panel * Less technical users who don't want to think about CSS selectors You can mix AI mode and [Manual mode](https://docs.growthbook.io/app/visual/manual-mode.md) freely within the same variation — accept the AI's draft, then jump into Manual mode to fine-tune. ## Prerequisites Before AI mode is usable on your account: 1. **An org admin needs to configure an AI provider.** Go to **Settings → AI** in GrowthBook and add an OpenAI, Google, or xAI API key. See [AI Integrations](https://docs.growthbook.io/integrations/ai.md) for the full setup. 2. **Your plan must include AI features.** AI mode is part of the `ai-suggestions` commercial feature. Pro and Enterprise plans include it; Free does not. 3. **You need to be connected** to your GrowthBook account in the [AI Visual Editor side panel](https://docs.growthbook.io/app/visual/install-and-connect.md). If AI mode is greyed out in the side panel, the most common cause is that no AI provider key is configured yet for the organization. ## Opening AI mode After you open the side panel and target a URL, you'll see two top-level tabs: **AI** and **Manual**. AI is selected by default. The AI panel has three parts: * A **prompt box** at the top of the panel where you describe what you want. * A **chat log** that fills in as you make requests — each turn shows what you asked, followed by an assistant card with the proposed changes. * The **Changes panel** at the bottom of the side panel, which lists every change accepted so far for the current variation. When the chat log is empty, the prompt area also surfaces a few **suggested prompts** and **quick actions** to help you get started. ## Writing good prompts The AI does its best work when prompts are concrete about *what* and *where*, but loose about *how*. **Good:** * `Change the hero headline to something more urgent and benefit-led` * `Make the primary CTA button bright green and a little larger` * `Hide the secondary nav links on the right` * `Swap the hero image for one showing a person using a laptop in a coffee shop` * `Give me three alternative headlines for the product card` **Less good:** * `Make the page better` — too vague; the AI will guess and the result will be unfocused. A few tips that consistently improve results: * **Name the element by what it is, not how it's coded.** "The hero headline" works; ".hero h1" rarely needs to be in the prompt. * **Describe intent.** "More urgent," "more premium," "more playful" gives the AI a direction. * **Ask for variants.** "Give me three options" or "draft a few alternatives" produces multiple suggestions in one turn. * **Chain prompts.** A second prompt can refine the first ("the green is too neon — make it more muted"). When naming an element in text isn't enough, use **Select element** to pin it — see [Adding element context](#adding-element-context-to-a-prompt). > [!TIP] > > **"Set the title" targets the H1** > > If you say something like "set the title to X," the AI targets the visible `

` (or the most prominent heading) — not `document.title`. To change the browser tab title, say so explicitly: "change the page's browser tab title to X." ## Adding element context to a prompt Click **Select element** (`@`) below the prompt box, then click an element on the page. It appears as a chip above the prompt — you describe *what* to change; the chip tells the AI *where*. Pin multiple elements for batch edits; remove a chip with **×**. Use this when the page has repeated or ambiguous targets (two headlines, identical cards, several "Submit" buttons). **Example:** pin the hero headline, then prompt *"Make it more urgent and benefit-led"* instead of *"make the headline more urgent"*. For follow-up prompts on the same element without re-pinning, see [Multi-turn conversations](#multi-turn-conversations). ## Reviewing proposed changes When the AI returns, it adds an assistant card to the chat log. The card contains: * A short summary of what was changed and why. * One or more **diff cards** — each represents a single DOM change (a text edit, a style change, an attribute change, etc.). The diff card shows the element it targets and what's being set. Each proposed change is **previewed live on the page** as soon as it lands — you don't have to accept first to see the result. For each change you can: * **Accept** — the change moves into the Changes panel as part of the current variation. * **Reject** — the preview is reverted and the change is dropped. * **Edit** — open the change in Manual mode to tweak values before accepting. Reject doesn't end the conversation. You can ask for a different version ("more subtle — keep the original color, just bump the size") and the AI will produce a new proposal. ## Selector grounding When the AI proposes a change, it picks a CSS selector and validates it against the actual page DOM. If the selector doesn't match a real element, the change is rejected before it ever reaches you. This matters for two reasons: * **Reliability** — the AI can't propose changes against elements that don't exist or that match nothing. * **Stability** — the AI prefers stable selectors (semantic tags, stable classes, `data-*` attributes) over brittle ones (positional `nth-child` chains, random hash-suffix classes). The variation is more likely to keep working as your site evolves. If a proposal targets the wrong element, say so in the next prompt or pin the correct element and re-ask. ## Multi-turn conversations The chat log keeps the full thread for the current variation. You can layer changes: ``` You: change the hero headline to something more urgent AI: [proposes new headline] You: also make the headline larger AI: [proposes a font-size change on the same element] You: actually undo the size change and just bold it instead AI: [reverts size, proposes font-weight] ``` Each new turn sees the prior turns, so refinements work. If you want a clean slate, start a new variation. ## Image generation If you ask the AI to swap a hero image, generate product imagery, or anything else that requires a new image, AI mode hands off to the image-generation flow. You'll pick from one or more configured image models, optionally use the existing image as a visual reference, and accept the result into the changeset the same way as any other change. See [Images](https://docs.growthbook.io/app/visual/images.md) for a full walk-through, including the list of supported image models and which ones accept reference images. ## What gets sent to the AI For each prompt, the back-end sends to the configured AI provider: * Your prompt text * A simplified snapshot of the relevant DOM (typically the elements visible in the viewport, plus any selected element) * The URL of the page being edited * Optionally, a small system prompt that biases the model toward stable, accessible changes Your GrowthBook experiment metadata, metric values, user data, and SDK payloads are **not** sent. The connection uses your org's configured AI provider key — see [AI Integrations](https://docs.growthbook.io/integrations/ai.md) for the full data-sent inventory. ## Limits and caveats * **Single-page scope.** AI mode reasons about the page currently loaded in the AI Visual Editor's target URL. It can't propose changes against pages it hasn't seen. * **Selectors can still drift.** Even with selector grounding, large site rewrites or design-system changes can break previously-stable selectors. Run a sanity check on long-running visual experiments after major releases. * **Quality varies by model.** The org admin picks the underlying model in AI Settings — bigger/newer models generally produce better proposals at higher cost. The same prompt will produce different output across `gpt-4o-mini`, `gemini-2.5-pro`, and `grok-2`. * **AI mode is not a substitute for review.** Always preview the variation on a real page (and ideally a real preview link) before publishing. ## Next steps * **[Manual mode](https://docs.growthbook.io/app/visual/manual-mode.md)** — fine-tune accepted changes. * **[Preview and QA](https://docs.growthbook.io/app/visual/preview-and-qa.md)** — preview before publishing.