The Builder Chrome extension provides a way to begin an agent directly from your web application.
Visit the Builder.io extension page on the Chrome Web Store to install the extension.
After installing, we recommend that you pin the extension for quick access:
- Click the Extensions button to the right of the address bar.
- Click the pin button next to Builder.io in the extensions list.
The screenshot below shows where to pin the extension.
The Builder Chrome extension can be used directly within your product to launch an agent. The extension requires you to pick a part of the page to edit and provide a prompt.
For this feature to work, you must already have your application connected to a Project within Builder and must have pull requests enabled.
To create prompts with the Builder Chrome extension:
- Go to your application.
- Open the Builder Chrome extension.
- Make sure you're on the Builder Agent tab.
- Click Start.
- Select which part of the page you'd like to make changes to.
- Write your prompt, and the click Continue.
- On the following page, select your Project.
- The first time the extension is used on a domain, Builder will ask whether or not you want to associate the domain with this Project. Make your selection, clicking either Skip or Map Domain.
- Click Start Working.
- Once the agent has started, click Open Branch to watch it work.
To get a design from Chrome to Figma:
- Go to the page you want to copy into Figma.
- Open the Builder Chrome extension.
- Click Copy Layout.
- Optional: Clear the Outline Builder Components checkbox to remove blue overlays for non-Builder pages.
- Click any section of the page to copy. Press the Up Arrow key to expand the selection area.
- Go to Figma and open the Builder Figma plugin.
- Go to the Import tab.
- In the Paste from Chrome section, press
Cmd/Ctrl + vto import the copied layouts.
The browser automatically resizes to capture the page at multiple screen sizes for responsiveness.
This video shows copying a section of a Builder Page and pasting that section into Figma:
In some cases, the Chrome extension downloads a builder.json file.
To import the downloaded layout:
- In Figma, open the Builder Figma plugin.
- In the Import tab, under the Paste from Chrome section, click upload a builder.json file.
- Select the downloaded JSON file.
For more on what you can do with the Builder Figma plugin, see Import from Figma.