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:
Use custom instructions to give Visual Copilot the context it needs to generate more accurate and relevant content. By specifying details like your content model, API usage, or layout goals, you can guide the AI to build exactly what you need, faster and more reliably.
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.
The green checkmarks 
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.
The green checkmarks
Explore Builder's approach to AI, including privacy, in How Builder Uses AI.