Register now: Best Builder Practices for Marketers & Designers

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

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.

To generate content with Visual Copilot:

  1. Go to the AI tab to open the AI chat window.
  2. In the input, describe the type of content you want to generate.
  3. Select Accept or Reject to apply or dismiss the AI suggestions. Visual Copilot makes the changes to the Page.
  4. 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.

To use Visual Copilot to edit the content:

  1. Select the block to edit.
  2. Navigate to the AI tab.
  3. Describe the edit you want to make in the input field.
  4. Press Enter to generate the content.
  5. Review the AI suggestions and select Accept or Reject to apply or dismiss the changes. Visual Copilot updates the page accordingly.
  6. 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:

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:

  1. In the AI Chat tab, describe the type of content you'd like.
  2. 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:

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

Steps:

  1. Select the component where you want to add interactivity.
  2. Go to the AI tab and describe how you want the component to behave based on user interactions.
  3. Press Enter to generate the content.
  4. 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:

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

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

The following video demonstrates generating a mini app:

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:

  1. Custom Instructions: Provide API or data source details to the custom instructions option. Visual Copilot will have the context for the data.
  2. 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:

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

To connect data using the Data Tab:

  1. Go to the Data tab in the Visual Editor.
  2. Select a data source (either a Builder model or an external API).
  3. Provide the prompt to use the data (e.g., as a table or a list).
  4. 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.

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?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences