in beta
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 Visual Copilot to bind content to live data from Builder models or external APIs. Just provide the data source and context, and the AI can generate layouts that fetch and display your data, so you can build dynamic experiences in record time.
Connect data to your content from Builder data models or external APIs to display the data directly in your app.
Provide API or data source details as custom instructions to give Visual Copilot the context for the data.
To connect data by providing Visual Copilot with Instructions:
- Go to the Generate tab and click Instructions.
- Provide details about the data source and click Save.
- Provide a prompt to Visual Copilot to use the data.
Review the AI-generated suggestions and choose Accept or Reject.The video below shows connecting to data through an API endpoint provided in the AI Instructions.
Even if you haven't provided custom instructions, you can still provide your API endpoint to Visual Copilot in your request. In this next video, the API endpoint is only provided in the original prompt. While providing context in this method doesn't persist in the Space, it's great for rapid prototyping.
For more information on connecting manually to your data in the Classic UI, visit Data binding overview.
The green checkmarks 
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.
Explore Builder's approach to AI, including privacy, in How Builder Uses AI.