Edit with AI

The Visual Editor includes an AI assistant: ABlyft Lumen ("Lumen"). You describe a change in plain language, for example "Change this headline to 'Start your free trial' and make it red". Lumen creates the change and shows it on the page immediately.

You can then refine it step by step ("make the red a bit lighter"), add further independent changes and remove any of them individually. When you are happy with the result, save the variation as usual.

The AI works alongside the regular editing tools. Manual changes (edit element, edit HTML, move, hide, insert, extensions) and AI changes can be combined in the same variation. For the editor itself, see Visual editor.

Before you startCopy Anchor Link

• AI is enabled for your team. See Enable AI for your team.
• Your team has AI credits available. Credits are charged when you save, not for every message, see AI credits.

If a requirement is not met, the editor shows a message when you try to open the AI assistant, telling you what is missing.

Open the AI assistantCopy Anchor Link

There are two ways to open the assistant. Both open the same chat panel.

"Edit with AI" (element menu)

1. Click an element on the page to select it.
2. In the element menu, choose "Edit with AI" (in the "Edit" group).

The chat opens with the selected element as context. Your instruction then refers to exactly this element ("this headline", "this button").

"Build with AI" (toolbar)

1. Click "Build with AI" in the bottom toolbar.

The chat opens without a selected element. Lumen then works with an overview of the page. If it is unclear which element you mean (for example "make the button bigger" on a page with several buttons), Lumen asks a question instead of guessing.

Select or change the element from the chatCopy Anchor Link

Above the input field, the chat shows the current element context:

• "Select element" / "Change": click it, then click an element on the page. It becomes the context for your next instructions. To cancel, click "Cancel" in the chat or press Esc.
• ✕ removes the element from the context. Lumen then uses the page overview again.

The chat panelCopy Anchor Link

• Move: drag the panel by its header.
• Resize: drag the lower right corner.
• Close: use ✕ in the header or press Esc while typing. Reopening restores the conversation.
• Clear chat: the trash icon in the header deletes the conversation after a confirmation. Your AI changes are kept and can still be refined; Lumen just no longer knows the earlier conversation.
• Conversation history: kept for the current variation while the browser tab is open, including after the editor reloads the page. Closing the tab starts a fresh conversation. The saved AI changes themselves are not affected.

Write instructionsCopy Anchor Link

• Press Enter to send and Shift+Enter for a new line. An instruction can have up to 2,000 characters.
• Lumen replies in the language you write in.
• Be specific about what should change and, if no element is selected, where.
• Only one request can run at a time. While Lumen is working, the chat shows a working indicator.

Examples:

• "Change this headline to 'Start your free trial' and make it red."
• "Make the red a bit lighter."
• "Make this button green and the text bold."
• "Hide the newsletter teaser in the footer."

AI changesCopy Anchor Link

Each result consists of one or more AI changes. An AI change has:

• an ID, for example ai_k3j9x0p2qa,
• a short description,
• the targeted element,
• the CSS and/or JavaScript that implements it.

For every successful step, the chat shows which changes were affected:

For each change you can:

• click the target selector to highlight the element on the page,
• expand CSS and JavaScript to see the generated code with syntax highlighting (both are collapsed by default),
• use Copy to copy the code.

Refine or add changesCopy Anchor Link

• Refinements update the existing change. "Make the red a bit lighter" right after "make the headline red" updates the same AI change, so no duplicate is created.
• Independent requests create a new change. "Make this button green" creates a separate change, so each one can be removed individually.
• Lumen never changes or removes manual changes made with the regular editor tools.

PreviewCopy Anchor Link

Changes are applied to the page immediately, so you can check them before saving. A step is only reported as successful once it has been applied to the preview without errors.

If the target element is not on the page yet, for example because the content loads later, the chat shows a hint. The change is applied as soon as the element appears.

When something goes wrongCopy Anchor Link

• The change fails in the preview (for example a script error): nothing is applied and the page stays as it was. The chat shows the error with "Ask AI to fix", which sends the error back to Lumen, and "Retry".
• The AI returns an unusable result: nothing is applied and you can retry.
• Your last step was wrong: "Undo this AI step" below the latest answer restores the previous state. Only the most recent AI step can be undone this way.

Manage AI changes in "Changes"Copy Anchor Link

AI changes appear in the "Changes" dialog of the toolbar, marked with an AI badge and their description:

• Unsaved: AI changes that are new or modified since the last save, marked "new" or "modified".
• Saved: AI changes that are already saved.

Hovering over an entry highlights the targeted element on the page. The delete icon removes this single AI change. The preview reloads without it, and all other changes stay in place.

SaveCopy Anchor Link

Save as usual with "Save" in the toolbar. AI changes are saved together with all other changes of the variation.

Saved AI changes are delivered to your visitors with the snippet, like every other Visual Editor change. They run after the manual changes of the variation. When you open the variation in the Visual Editor again, all saved AI changes are applied and can be refined further.

AI creditsCopy Anchor Link

Credits are charged when you save, not per message. You can try ideas and refine them in the chat; credits are only used when the result is saved.

• Saving new or modified AI changes costs 50 credits per save, no matter how many AI changes the save contains.
• No credits are charged for saving again without new AI changes, saving only manual changes, or saving after removing AI changes.
• Saving again after further AI refinements is charged again.
• After a save that used credits, the confirmation message shows how many credits were charged.

Charges from the Visual Editor appear on the page AI Usage with the source "AI Visual Editor". See AI credits.

Edit AI changes outside the Visual EditorCopy Anchor Link

In the variation settings, the Visual Editor data (Settings from Visual Editor) can still be edited as JSON. AI changes can be removed there, but not created or modified. Use the Visual Editor for that.

Privacy and securityCopy Anchor Link

Lumen only receives what it needs for your request:

• your instruction and the recent chat messages,
• the selected element, or a compact overview of the page if no element is selected,
• the AI changes of the variation and a short summary of your manual changes (which elements and properties were changed).

The whole page is not sent.

Before page content is sent, it is cleaned:

• Scripts, styles, form field values, password fields and hidden fields are removed.
• E-mail addresses, phone numbers, long numbers (for example card numbers) and token-like strings are replaced with placeholders.
• URLs are sent without query parameters.

Further safeguards:

• Text on your website is treated as data, never as instructions for the AI.
• Generated code must not send data anywhere or access cookies or browser storage. Code that tries to is rejected.
• Generated code follows the same rules as code you write yourself in a variation. It uses the ABlyft helper ablyftTools.waitForElement to wait for elements.

LimitsCopy Anchor Link

A request usually takes a few seconds, up to about half a minute for complex changes.

FAQCopy Anchor Link

Do I pay for every message?Copy Anchor Link

No. Credits are only charged when you save new or modified AI changes.

Will Lumen overwrite my manual changes?Copy Anchor Link

No. Lumen only creates, updates or removes AI changes. Manual changes are never touched.

Can I edit the generated code myself?Copy Anchor Link

You can view and copy the CSS and JavaScript in the chat. To change an AI change, describe the adjustment to Lumen. If you want to maintain the code yourself, copy it into a variation of the type Code, see Variations.

I cleared the chat. Are my changes gone?Copy Anchor Link

No. Clearing only removes the conversation. All AI changes stay in place and can still be refined.

Why is "Edit with AI" not available?Copy Anchor Link

AI must be enabled for your team, see Before you start. The editor shows which requirement is missing.

Next stepsCopy Anchor Link