Using AI for Builder.IO Page Layouts

When editing a page layout, you can use the first 2 tabs to help create and sort out the content of the page manually. Alternatively, Builder.IO also has it's own AI feature that can be used to help easily bring your page to life, using prompts to build the blocks, components, and layout. This can be found on the left section as the third tab called Visual Copilot.

First, ensure you have selected a block or section to start populating some information. At this point, you will just need to make your prompts clear enough for what exactly you need.

For example:

"Generate 3 columns, with each column consisting of an image, heading, text and a button."

After typing the prompt, select the Up Arrow from the bottom right of the box (or press Enter on the keyboard) to generate the content.

Visual Copilot will provide a response in the "Chat" and a preview of the generated content on the middle section. You can then choose to Accept or Reject the outcome. Once accepted, you will see the Applied text appear, and an icon to the right (Show Diff) will allow you to see the code of what was generated in Builder.IO.

You can also see how the layout has been set in the Layers tab.

📘

NOTE:

In this example, though we specified to use 3 columns, it did not use the Columns component, rather 3 boxes as the containers for what will be inside each column. At times, this kind of change may not make much of a difference, however it will vary on the type of content generated, and how you plan to use it - so just keep that in mind when making the prompts if you need something specific done.