--- title: AI variation development agent slug: personalization/docs/LKGq-ai-variation-development-agent docTags: createdAt: 2026-07-20T15:44:38.194Z --- :::hint{type="success"} **Products** - Optimizely Web Experimentation - Optimizely Personalization The availability of features may depend on your plan type. Reach out to your Customer Success Manager if you have any questions. ::: [Optimizely Agent Platform](docId\:IzAAN1fw7whD1HB4iODAB) uses AI in the [Visual Editor](../../personalization/build-campaigns/new-visual-editor/new-visual-editor.mdx) to help you modify and update existing website elements, create new ones, and generate and apply enhancement suggestions, while maintaining brand consistency by automatically retrieving page styles. Powered by Agent Platform, the variation development agent lets you make changes with natural language. You do not need to write custom code. The development agent also generates a variation for you in a few clicks. It uses the changes already made in your experiment's other variations to suggest what to build next. You can generate additional variations this way without repeating the same instructions each time. For example, the development agent can complete the following tasks: - Update a call-to-action's (CTA) styles with dynamic effects to increase clicks, while keeping brand guidelines. - Add a butter bar with a sale promotion that includes a countdown timer. - Provide suggestions to improve the menu layout for better discoverability. - Generate different variants of a section of the page to accomplish a specific goal. - Redesign a webpage based on a theme. :::hint{type="info"} **Note** The variation development agent is only available in the [new Visual Editor](../../personalization/build-campaigns/new-visual-editor/new-visual-editor.mdx). ::: ## Prerequisites See [Configure Web Experimentation for Agent Platform](docId\:hlHMQy1FYLEFZuoQwEAep) and ensure you have the following prerequisites: - You must log in through Opti ID. - You must have your Web Experimentation or Personalization and Agent Platform instance connected in the [Product Connections](docId\:pe0pbUJveWrG8ewvZWDRE). - You must be using the [new version of the Visual Editor](../../personalization/build-campaigns/new-visual-editor/new-visual-editor.mdx). - You must have the following tools [Enabled in Mark chat](docId\:SXjD3qqg-0gS2g4KajfyO):  - `exp_ve_apply_change` - `exp_ve_element_glob` - `exp_ve_element_grep` - `exp_ve_element_read` - `exp_ve_element_tree` - `exp_ve_get_change_schema` - `exp_ve_get_selector` - `exp_ve_list_pending_changes` - `exp_ve_revert_change` - `exp_ve_validate_change` ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/H44od7LLaw9E12oGe8HW8_image.png) See [System tools for Web Experimentation](docId\:Th9aZyqV4rYrSGlcbC6pI) or [System tools for Personalization](docId\:SG6JCUkaZ9CUtEygy1hmU). ## Use Mark to edit a variation in the Visual Editor 1. Go to **Optimizations** and select an experiment or campaign. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/itsy1D8yY3rgWis49gdw4_image-1.png) 2. Go to **Design > Variations** and click **Visual Editor** in that variation's row. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/pfnOv_RdGQ2cnS8huZo78_image-2.png) 3. Click **Build Variation**. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oeTwaNvUIrebOXdNu5Y1o_image-3.png) 4. Enter what you would like to change about the page, such as *Improve the Get started button to increase more clicks*. See [Tips and tricks](docId:0aAtuf82Px4hgmN8FL_p-) for help with effective prompt writing for Mark. Mark uses the Visual Editor to make the updates and validates the results. 5. Click **Save All** if you like Mark's changes. If not, iterate with Mark until the changes look good or click **Undo All** to start over. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/MkEZaZn9-Y0OkWLLSvqn6_image-4.png) You can repeat this process to update anything on the site, including updates that require custom code to change, as Mark generates that custom code for you. ## Generate a new variation with the development agent Instead of building each variation from scratch, you can let the development agent create one for you. The agent reviews the changes already made in your experiment's other variations and it then suggests distinct, high-impact ideas for what to build next. Your role is to review and approve the changes. 1. Open an experiment that has at least one variation with changes. 2. In the variation bar, click **+** and select **Generate New Variation**. Optimizely creates a variation and starts the development agent. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/LHsMS1a6gkzvQHxqMm7pK_image-5.png) 3. Review the variation ideas the agent suggests, then do one of the following: - Select a suggested idea for the agent to build. - Click **Something else** to describe a different change. - Click **Skip** to build the variation yourself. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/7DGeYcUSwbig7FAmkTLsT_image-6.png) 4. Review the changes the agent applies, including the before-and-after comparison and the reasoning for each change. 5. Click **Save All** to keep the changes, or **Undo All** to discard them. ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/UBcH6L-zvXv7t7s4QyFIr_image-7.png) **How it works** - **Context-aware suggestions** – The agent uses the changes from your experiment's other variations as context. Its ideas complement what you have already tested instead of repeating it. - **High-impact focus** – The agent targets high-impact areas such as the hero section and primary calls to action. - **Reviewer control** – The agent applies the changes as a preview. Optimizely saves them only after you click **Save All**. ## Tips and tricks :::ExpandableHeading ### **Be explicit and precise.** Write explicit and precise prompts to Mark. Adding more context to your prompts leads to better results. **Example** - **Initial prompt** – *Create a 24-hour countdown timer.* (This might reset each time the page reloads.) - **More specific prompt** – *Create a countdown timer that counts down to July 24, 12:00 a.m. GMT.* (This ensures the timer functions as expected, counting down to a specific date and time.) ::: :::ExpandableHeading ### **Focus on the desired outcome.** Instead of just telling Mark what to do, explain why you want it done. This helps Mark understand the underlying goal and generate more effective and relevant variations. **Example** - **Initial prompt** – *Change the button color to blue.* - **More specific prompt** – *Change the 'Add to Cart' button color to a vibrant blue to increase its visibility and encourage more clicks.* (This clarifies the objective of increased visibility and click-through rates.) ::: :::ExpandableHeading ### **Specify constraints and limitations.** If there are any design system rules, brand guidelines, or technical limitations, communicate them clearly. This prevents Mark from generating variations that are unusable or off-brand. You can also use [skills](docId:1HTjxW2J-ZOkYEZMwnasU) to help guide Mark. **Example** - **Initial prompt** – *Add a new heading here.* - **More specific prompt** – *Add a new H2 heading above this section, using the 'Optimizely Blue' color and 'TT Commons Book' font, as per our brand guidelines.* (This incorporates specific brand constraints.) ::: :::ExpandableHeading ### **Guide iterative refinement.** AI-generated variations might not be perfect on the first try. Provide feedback on initial results and refine your prompts to guide Mark to the desired outcome. **Example** - **Initial prompt** – *Make the headline more engaging.* - **Mark response** – *Here's a new headline: 'Unlock Your Potential Today!'* - **Refinement prompt** – *That's a good start. Now, make the headline more benefit-driven and include a sense of urgency, similar to the tone of our 'Cool-girl confident' voice pillar.* (This guides Mark to a more specific tone and benefit.) ::: :::ExpandableHeading ### **Consider user experience (UX) and accessibility.** Prompt Mark to think about the end-user experience. Encourage requests that improve usability, readability, and accessibility for all visitors. **Example** - **Initial prompt** – *Add some text here.* - **More specific prompt** – *Add a short paragraph of explanatory text here, ensuring it has sufficient contrast for accessibility and is easily scannable for users on mobile devices.* (This emphasizes UX and accessibility considerations.) ::: :::ExpandableHeading ### **Provide negative constraints (what not to do).** Sometimes it is clearer to tell Mark what not to do, especially if you encounter undesirable outcomes. **Example** - **Initial prompt** – *Add a pop-up for our newsletter.* - **More specific prompt** – *Add a newsletter signup pop-up, but ensure it does not appear immediately on page load and is not intrusive; perhaps trigger it by exit intent.* (This prevents common UX pitfalls.) ::: ## Use cases The dev agent, powered by Agent Platform, changes how you create and optimize digital experiences. By using natural language processing and maintaining brand consistency, it lets marketers and developers rapidly iterate, test, and personalize website elements without requiring extensive coding. The following are key scenarios where the agent significantly enhances your workflow: :::ExpandableHeading ### **Rapidly modify and style elements.** Refine and restructure your on-page content for better readability, conciseness, or impact, ensuring your message resonates with your audience. - **Information decongestion** – Transform lengthy paragraphs into concise bullet points or summaries to enhance user comprehension. - **Example prompt** – *Convert this product description into three key bullet points highlighting its main benefits.* - **Text refinement** – Adjust the tone, length, or clarity of any text content to match specific campaign objectives or audience segments. - **Example prompt** – *Make the headline more concise and impactful, focusing on urgency.* - **CTA optimization** – Generate compelling and clear calls-to-action that encourage conversions. - **Example prompt** – *Suggest three alternative phrases for the 'Learn More' button that emphasize immediate value.* ::: :::ExpandableHeading ### **Enhance and optimize content.** Refine and restructure your on-page content for better readability, conciseness, or impact, ensuring your message resonates with your audience. - **Information decongestion** – Transform lengthy paragraphs into concise bullet points or summaries to enhance user comprehension. - **Example prompt** – *Convert this product description into three key bullet points highlighting its main benefits.* - **Text refinement** – Adjust the tone, length, or clarity of any text content to match specific campaign objectives or audience segments. - **Example prompt** – *Make the headline more concise and impactful, focusing on urgency.* - **CTA optimization** – Generate compelling and clear calls-to-action that encourage conversions. - **Example prompt** – *Suggest three alternative phrases for the 'Learn More' button that emphasize immediate value.* ::: :::ExpandableHeading ### **Insert dynamic elements and create widgets.** Introduce new functional or promotional elements to your webpage to capture attention, provide information, or drive specific actions. - **Promotional banners** – Add "butter bars" or sticky banners for sales announcements, limited-time offers, or important alerts. - **Example prompt** – *Add a prominent banner at the top of the page announcing a 20% off sale, with a countdown timer ending on December 31st.* - **Interactive widgets** – Integrate new interactive components like countdown timers, searchable frequently asked question (FAQ) sections, or social proof elements. - **Example prompt** – *Insert a customer testimonial carousel below the hero section, featuring positive reviews.* - **Visual storytelling** – Generate and place images to support your content, creating different scenes or showcasing products from various angles. - **Example prompt** – *Replace the current product image with a variation showing the smartwatch from a different angle, perhaps on a person's wrist.* ::: :::ExpandableHeading ### **Explore designs and layout optimization.** Explore multiple design directions and optimize page layouts for improved user experience, visual hierarchy, and conversion rates. - **Layout suggestions** – Receive AI-driven recommendations for improving the arrangement and presentation of elements on a page. - **Example prompt** – *Provide suggestions to improve the menu layout for better navigation on mobile devices.* - **Variant generation** – Quickly generate multiple distinct design variations for a specific page section or an entire webpage based on a theme or objective. - **Example prompt** – *Generate three different variants for the product listing section, focusing on a minimalist design, a grid layout, and a featured product highlight.* - **Full-page redesigns** – Experiment with new page designs or themes to test radical changes and discover optimal user journeys. - **Example prompt** – *Redesign this entire product page based on a 'modern and clean' aesthetic, prioritizing product imagery and clear pricing.* ::: :::ExpandableHeading ### **Experiment and personalize iteratively.** Create and refine variations directly within the Visual Editor, supporting continuous optimization cycles. - **Building on success** – Create variations based on existing successful ones, letting you continuously refine and improve high-performing experiences. - **Example prompt** – *Take the current winning variation of the checkout page and create a variant that simplifies the shipping information section.* - **Personalized experiences** – Develop tailored content and layouts for different audience segments, ensuring relevance and maximizing impact for each user group. - **Example prompt** – *Create a personalized hero banner for returning customers that highlights recently viewed items.* ::: ## Example credit usage The following figures represent the average number of [Optimizely Agent Platform credits](docId:3cuntY2ClCymI4MbfGSjT) consumed when calling the AI variation development agent for different use cases: - **Add a pop up modal to sign up to become a member** – 30 - **Add a promotional banner at the top that includes a coupon code that can be copied** – 30 - **Update the navigation bar so each button has a spacing of 12px** – 70 - **Update the menu to be more visually appealing with a goal to increase clicks** – 70 - **Add an enlargement effect to the product catalog items upon hover** – 70 - **Add a 24 hour countdown timer below the banner** – 70 - **Add a modal on the favorite icon displaying a message for visitors to add to the list of favorites** – 70 - **Introduce a "Why Buy From Us?" section highlighting unique selling propositions** – 130 - **Add an** **add-to-cart** **button on every product catalog** – 130  - **Make the navigation bar sticky so it persists even when I scroll down** – 130 - **Rearrange the menu and move the "Sale" button as the first item** – 130 - **Redesign the page with a more modern and visually driven layout that increases user engagement and conversion rates** – 130 :::hint{type="warning"} **Important** Credit consumption is dependent on your webpage structure and scope of changes applied. ::: ## Troubleshoot The following sections cover common errors you may encounter when using the variation development agent. Each issue includes the likely cause and steps to resolve it. :::hint{type="info"} **Note** Any code Mark generates is a custom code solution and falls outside the scope of Optimizely Support. ::: ### Connection lost ::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-5bhD2JJJbg4FeHclF7-1_image.jpeg" size="30" isUploading="false" width="385" height="105" darkWidth="385" darkHeight="105" showCaption="false"} A [Content Security Policy (CSP)](docId\:b-GFREGoIaBgPFDQNT2Wo) on your website is blocking the connection. Resolve this by doing one of the following: - Install the [Optimizely Web companion extension](https://chromewebstore.google.com/detail/optimizely-web-companion/bkbpcjnocdcicihmligkgbilodhakkio) and enable it. - Add the required [sources](docId\:eOWVtGMZ_DjeiWEkwya8P) to your site's CSP header. ### Unable to find the selector This error is caused by disabled Agent Platform tools. Enable the [necessary tools](docId:0aAtuf82Px4hgmN8FL_p-). ### Something unexpected happened This error indicates that your Agent Platform instance is not connected to your Experimentation or Personalization instance. To resolve it, a Mark Administrator must connect the correct Agent Platform instance to your Experimentation or Personalization instance. See [Get started with Optimizely Agent Platform for administrators](docId\:pe0pbUJveWrG8ewvZWDRE) for steps on connecting products. :::hint{type="info"} **Note** If you use Opti ID, administrators can turn off generative AI in the Opti ID Admin Center. See [Turn generative AI off across Optimizely applications](docId\:X5U0kKD2azV5cIdNqwGNj). :::