Visual Copilot: create content, add interactivity, connect data

in beta

With Builder's Visual Copilot you can use AI for various 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 easier than ever.

Generate content

To generate content with Visual Copilot:

Go to the AI tab to open the AI chat window.
In the input, describe the type of content you want to generate.
Select Accept or Reject to apply or dismiss the AI suggestions. Visual Copilot makes the changes to the Page.
Start a New Chat or provide additional instructions for the AI if you need personalized content generation.

Example instructions to the AI might include:

"Generate a 2x2 grid layout with borders rounded."
"Create a hero banner with a title and CTA button."

The video below shows creating a hero banner with a title and CTA button.

Edit content

To use Visual Copilot to edit the content:

Select the block to edit.
Navigate to the AI tab.
Describe the edit you want to make in the input field.
Press Enter to generate the content.
Review the AI suggestions and select Accept or Reject to apply or dismiss the changes. Visual Copilot updates the page accordingly.
Start a New Chat or continue the existing conversation to edit or generate content.

Example instructions to the AI might include:

"Translate the Hero copy into Spanish."
"Change all button backgrounds to match the brand's primary color."
"Make this button turn red when you hover over it."

The video below shows translating copy in a header and a paragraph into Spanish.

The next video shows adding some Learn More buttons, changing their color to black, and adding a red hover state:

Generating content with your components

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:

Add interactivity

Interactivity improves the user experience by making components like buttons, forms, links and others respond to user actions.

Steps:

Select the component where you want to add interactivity.
Go to the AI tab and describe how you want the component to behave based on user interactions.
Press Enter to generate the content.
Review the AI suggestions and choose Accept or Reject to apply or dismiss the changes.

Example instructions to the AI might include:

"Add a button that says Learn More and links to the About Us page."
"Create a login form with username, password, and a Submit button that sends the data when clicked."
"Make the pagination and sort buttons functional."

The following video shows creating a login form:

Generate mini apps

Use Visual Copilot to create small apps within the Visual Editor.

Navigate to the AI tab.
In the prompt area, describe the type of app you would like to make.
Click Enter.
AI generates a small app.

The following video demonstrates generating a mini app:

Connect your data

Connect data to your content from Builder data models or external APIs to display the data directly in your app.

You can connect data to your content in two ways:

Custom Instructions: Provide API or data source details to the custom instructions option. Visual Copilot will have the context for the data.
Data Tab in the Visual Editor: Use the Data tab to connect to a Builder data model or an external API. Once connected, you can refer to this data in your custom instructions and provide a prompt for how it should be displayed.

To connect data using Custom Instructions:

Go to the AI tab and click Edit Instructions.
Provide details about the data source and close it.
Provide a prompt to use the data.
Review the AI-generated suggestions and choose Accept or Reject.

To connect data using the Data Tab:

Go to the Data tab in the Visual Editor.
Select a data source (either a Builder model or an external API).
Provide the prompt to use the data (e.g., as a table or a list).
Review the AI-generated suggestions and choose Accept or Reject.

Example instructions might include:

"Add a list view of users in a table."
"Replace the content with data, showing email IDs and locations in a list view."

The video below shows connecting to data using Visual Copilot.

For more information on connecting manually to your data, visit Data Binding.

The green checkmarks indicate successful actions from the prompt. Clicking on them reveals the code snippet for that specific action. At the end, the diff icon shows the changes made to the code compared to the previous version.

What's next

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.

Was this article helpful?