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:
Enhance your design by providing specific context about your use case, such as data structures or API functionality. Custom instructions help the AI understand how to properly interact with content and create relevant designs.
The example below demonstrates how to provide Visual Copilot with information about a blog post content model and Content API usage. These types of instructions guide the AI to generate layouts and content structures aligned with specific requirements.
Your instructions depend on your use case and should differ from the given example.
To add instructions:
- In the Generate tab, click Instructions.
- In the dialogue that opens, input relevant details to provide the AI with context.
- Click Save.
Visual Copilot can take design inspiration from existing websites when creating new content. By providing a URL as reference, you can guide the AI to generate designs that align with a specific visual language.
When you supply a website URL and request a landing page, for example, Visual Copilot analyzes the reference site's color schemes, typography, spacing, and overall aesthetic to create content that feels cohesive with the existing brand identity.
To provide style inspiration to the Visual Editor AI:
- In the Generate tab, click Add Style Inspiration.
- In the dialogue that opens, add a URL to the first input just under the instructions "Provide a stye inspiration for AI to follow while generating content".
- Click Save.
- Tell the AI what you'd like to generate.
In the video example below, the user enters https://www.builder.io/ in the input so that the AI can refer to Builder.io's homepage for style guidelines.
The user then prompts the AI with a detailed request, after which the AI creates a section with the correct styles and layout along iwth a place for the user to add an image.
For more detail, check out the Make it Real launch event, which features the topics covered here and includes a question and answer session with Builder's CEO, Steve Sewell.
Explore Builder's approach to AI, including privacy, in How Builder Uses AI.