> ## 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 Visual Editor

> Design, preview, and run A/B tests on your live site from a Chrome side panel — with AI-generated variations or a point-and-click editor, no code required.

Pro

**AI Visual Editor**
is available on Pro and Enterprise plans.

GrowthBook's AI Visual Editor is a no-code way to build and launch experiments on your website. Describe the change you want in natural language, review what the editor proposes, and ship a real A/B test without writing code or waiting on a deploy.

> [!TIP]
>
> **Install the extension**
>
> Get the [GrowthBook AI Visual Editor](https://chromewebstore.google.com/detail/growthbook-visual-editor/nbomejknbpkcpjdagefhichaajpoempk) from the Chrome Web Store, then [connect it to your account](https://docs.growthbook.io/app/visual/install-and-connect.md).

![Editing a page in the AI Visual Editor side panel](https://mintcdn.com/growthbook-ea15456d/J3C3juKhu0f7KEr_/static/images/visual-editor/ve-ai-main.png?fit=max\&auto=format\&n=J3C3juKhu0f7KEr_\&q=85\&s=3d88ff2c094a74c641485b5f5527baba)

The AI Visual Editor is a **Chrome side-panel extension**. You open it next to your site, pick the page you want to test, and make changes two ways:

* **[AI mode](https://docs.growthbook.io/app/visual/ai-mode.md)** — describe the change in plain language ("make the hero headline shorter and the CTA green") and the editor proposes the edits for you to preview and accept.
* **[Manual mode](https://docs.growthbook.io/app/visual/manual-mode.md)** — point and click to select any element and edit its content, typography, layout, background, classes, and more with structured controls.
* **[Figma & image import](https://docs.growthbook.io/app/visual/design-import.md)** — turn a Figma frame or a mockup image into a high-fidelity, testable component the editor builds and places on the page for you.

To actually render your variations on your live site, a developer integrates one of GrowthBook's front-end SDKs — the [Script Tag](https://docs.growthbook.io/lib/script-tag.md), [JavaScript](https://docs.growthbook.io/lib/js.md), or [ReactJS](https://docs.growthbook.io/lib/react.md) SDK — or renders them on a CDN with an [Edge SDK](https://docs.growthbook.io/lib/edge/cloudflare.md). See [Running on your site](https://docs.growthbook.io/app/visual/running-on-your-site.md).

## Benefits

* **Prompt-driven editing**: Describe changes to text, images, buttons, spacing, and more in [AI mode](https://docs.growthbook.io/app/visual/ai-mode.md). Pin an element when you want the AI to focus on a specific spot on the page.
* **Run experiments without dedicated eng time**: Draft and QA variations in the browser; your site still needs the GrowthBook SDK for production delivery. See [Running on your site](https://docs.growthbook.io/app/visual/running-on-your-site.md).
* **Manual precision**: Fine-tune typography, spacing, links, and visibility with structured controls when you know exactly what you want. See [Manual mode](https://docs.growthbook.io/app/visual/manual-mode.md).
* **Transparent by design**: Preview links, a debug panel, and warnings when you edit a live experiment. See [Preview and QA](https://docs.growthbook.io/app/visual/preview-and-qa.md).

> [!NOTE]
>
> **Join the AI Visual Editor community on Slack**
>
> Connect with the GrowthBook team and other users. [Join the AI Visual Editor channel on Slack](https://growthbookusers.slack.com/archives/C0BBMTLJUUT).

## Quick start

1. [Install and connect](https://docs.growthbook.io/app/visual/install-and-connect.md) the Chrome extension (\~30 seconds).
2. Open the side panel on the page you want to test and start editing in [AI mode](https://docs.growthbook.io/app/visual/ai-mode.md) or [Manual mode](https://docs.growthbook.io/app/visual/manual-mode.md).
3. [Set up the SDK](https://docs.growthbook.io/app/visual/running-on-your-site.md) on your site so variations render for real users.

Hitting a snag? See [Troubleshooting](https://docs.growthbook.io/app/visual/troubleshooting.md).

## Requirements

Your app must be a **front-end web app in a browser** (not native mobile or desktop). For other platforms, use [Feature Flags](https://docs.growthbook.io/app/features) in code.

> [!WARNING]
>
> **Client-side rendering can interfere with visual changes**
>
> Heavily client-side-rendered apps (React, Vue, Svelte) may flicker or fight the SDK when the framework re-renders the DOM. See [Running on your site → Strategy 4](https://docs.growthbook.io/app/visual/running-on-your-site.md#strategy-4-consider-whether-visual-testing-is-the-right-tool) for details and alternatives.

### SDK setup

Visual experiments only render if your SDK Connection has **Include Visual Experiments** enabled and the correct SDK is installed on your site. See [Running on your site](https://docs.growthbook.io/app/visual/running-on-your-site.md#create-an-sdk-connection) for the full setup.