Builder's Visual Editor AI handles various tasks, such as generating and editing content, styling components based on style guides, and adding interactivity by connecting content to data or responding to user actions. Visual Editor AI also creates mini-apps, making prototyping and building interactive apps faster than ever.
To generate content in the Visual Editor with Visual Editor AI:
- In the Generate tab, describe the content you want to generate. The more context you can provide the AI, the better.
- When the AI has completed the content generation, select Accept or Reject to apply or dismiss the AI suggestions.
- Start a New Chat or provide additional instructions for the AI to tweak.
The video below shows adding an announcement bar to an existing page.
To use Visual Editor AI to edit content:
- Go to the Generate tab.
- Optionally copy a reference to the content you wish to change.
- Describe the edit you want to make in the input and click Enter.
- Review the AI changes and select Accept or Reject to apply or dismiss the changes.
- Start a New Chat or continue the existing conversation to edit or generate content.
The video below shows prompting the AI to adjust text within a specific banner on the page.
Visual Copilot creates pages or sections, per your instructions, using your custom components.
For Visual Copilot to have something to work with, you must have a selection of custom components. For details, read Integrating Custom Components.
Using AI to generate content with your components:
- In the AI Chat tab, describe the type of content you'd like.
- Click Enter, and it will generate content for your custom components.
Visual Copilot allows you to:
- Include built-in components: Specify if you'd like the AI to use the Builder built-in components.
- Allow custom styles: Specify whether or not to use your styles or styles generated by the AI. This feature helps align with established design systems.
The following video demonstrates generating a page based on instructions and using custom components:
Visual Editor AI can use your Space's registered design tokens, custom components, templates, and Symbols. To do so, reference the element within your prompt.
If using Figma Smart Export, Visual Editor AI can reference Figma component or layer names.
In the video below, an existing content entry is updated using Visual Editor AI. The AI is able to add a pricing section custom component with some customizations.