Made in Builder.io

Visual Copilot Livestream | Dec 6 @10am PST

Introducing Visual Copilot: Figma to code with AI

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

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

Builder's AI features help you use natural language for a range of tasks, including content creation and editing, image and content generation using your components, and the creation of mini apps.

Tip: Any field in Builder that features a magic wand is editable with AI. Click the Magic Wand button to open the AI dialogue and tell the AI, using natural language, how you'd like the content changed.

While AI offers significant benefits and improvements to workflows, it is important to understand its potential limitations. We recommend taking the time to familiarize yourself with the technology and to start using AI features in a considered manner as it continues to mature.

To use AI to generate content in the Visual Editor:

  1. In the Insert tab, expand the Visual Editor AI section.
  2. Click the Generate New Content button.
  3. In the dialogue that opens, describe the type of content you'd like to generate. For example, "A page with a hero image at the top and 3 columns with 3 rows of tiles".
  4. Provide a website as style inspiration.
  5. Click Generate.
  6. When the generation is complete, the dialogue displays options based on your prompt.
  7. Click on the one you'd like and then click in the Visual Editor work to drop in the design.

The above video demonstrates this process.

To edit content with AIin the Visual Editor:

  1. Select the block you'd like to edit.
  2. Click the Edit Existing button. Alternatively, click the magic wand button that shows when you select the block.
  3. In the dialogue that opens, describe the type of edit you'd like to make.
  4. Click Modify.

The above video demonstrates this process.

Example instructions to the AI might include:

  • "Make the font bigger"
  • "Change the background color and add some padding."
  • "Translate copy into another language, as in the following sections of this document."

To edit multiple Text blocks with AI in the Visual Editor:

  1. Select the blocks you'd like to change.
  2. Click the Magic Wand button or press Cmd/Ctrl+o.
  3. In the dialogue that opens, tell the AI what you'd like to change about the copy; for example, the tone.
  4. Click Modify.

The following video demonstrates changing the tone of multiple Text blocks from formal to friendly and informal:

To add an AI-generated image:

  1. Double-click or select and click the Edit button for a block.
  2. In the Photo dialogue that opens, click on AI Generate.
  3. Click Generate.
  4. AI generates a selection of images.

The following video demonstrates generating images and selecting one:

experimental

An experimental feature, the AI Components Generator creates pages or sections, per your instructions, using your custom components.

You must have a selection of custom components for the AI to have something to work with. For details, read Integrating Custom Components.

Using AI to generate content with your own components:

  1. Press Cmd/Ctrl+k to open the Command Palette.
  2. In the dialogue that opens, describe the type of content you'd like.
  3. Click Generate.
  4. AI generates a page or section, depending on your instructions. Tweak as needed.

The AI Components Generator dialogue provides two toggles that can help you guide the generation process:

  • Include built-in components: Specify if you'd like the generator to use the Builder built-in components.
  • Allow custom styles: Specify whether or not to use your own styles or styles generated by the AI. This feature is helpful for aligning with established design systems.

The following video demonstrates generating a page based on instructions and using custom components:

experimental

An experimental feature, the Mini App Generator creates small apps within the Visual Editor.

  1. Press Cmd/Ctrl+k to open the Command Palette.
  2. In the dialogue that opens, describe the type of app you'd like to make.
  3. Click Generate.
  4. AI generates a small app.

The following video demonstrates generating a small mini app:


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

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

Get the latest from Builder.io

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Solutions

Ecommerce

Marketing Sites

Landing Pages

Mobile Apps

Multi-brand

Headless CMS

Product

Visual Copilot

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

Product

Features

Pricing

Product

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Developers

Builder for Developers

Documentation

Dev Tools

Try Builder Playground

Open Source

Builder

Mitosis

Qwik

Partytown

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Solutions

Ecommerce

Landing Pages

Multi-brand

Headless CMS

Popular Guides

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Frameworks

React

Next.js

Qwik

Gatsby

Angular

Vue

Nuxt

Hydrogen

All Integrations

CMS

React

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners


Templates

Success Stories

Showcase

Use Cases

Company

About

Careers

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms