Made in Builder.io

Watch the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
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:

For more information on the use of AI in Builder, including privacy, read How Builder Uses AI.

To leverage more AI features in Builder, visit Visual Copilot.


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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy