With Builder's Visual Copilot you can use Visual Editor AI for an array of tasks, such as generating and editing content, styling components based on the style guide, and adding interactivity by connecting content to data or responding to user actions. It also creates mini-apps, making prototyping and building interactive apps faster than ever.
To generate content in the Visual Editor with Visual Copilot:
- In the Generate tab, describe the content you want to generate. Be specific — 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 creating a page with collapsable sections that feature animated icons to indicate open and closed states.
To use Visual Copilot to edit content:
- Go to the Generate tab.
- 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 translating copy to Spanish and adding copy, spacing, and a button to the existing section.
The next video shows adding additional sections based on an existing section:
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:
To customize your workflow even better, explore how to Add instructions and style inspiration for Visual Copilot to follow when creating content. For more detail about about Builder's approach to AI, including privacy, visit How Builder Uses AI.