Meet Fusion 1.0 - The First AI Agent for Product, Design, and Code

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io
Contact sales

Meet Fusion 1.0 - The First AI Agent for Product, Design, and Code

Announcing Visual Copilot - Figma to production in half the time

Fusion Projects is most powerful when you connect an existing repository. Fusion will intelligently look through your technology stack, existing components, code styles, and design system to generate code that works with your tools and your style.

To create a net-new application from an existing repository:

  1. Go to the Projects page in the Builder app.
  2. Click the Connect Repo button.
  3. Choose an application from your linked repositories.
  4. Define settings, such as the Project Name and the Setup Script.
  5. Click the Save button.

Builder transitions you to the Visual Editor, where it then sets up your application.

Connecting a repository to Fusion requires some technical knowledge, and may require some debugging. For a more technical explanation of setting up a repository, visit the Projects setup overview.

To refine your application:

  1. Go to the prompt field embedded on the left, within the Chat tab.
  2. Write a new prompt specifying what you'd like changed.
  3. Click Enter.

Fusion immediately begins to apply the changes.

For example, the following prompt would lead to Fusion adding a reminder banner to the top of the page with some specific details.

Include a small banner to the top of the page, reminding 
users when they need to RSVP by.

Without much guidance, Fusion does its best to fulfill your request. For more fine-grained control, switch to Design mode or Import from Figma.

For the absolute best results, follow Prompt essentials such as including a screenshot or supporting material.

When making a prompt, you can adjust code output in the following ways:

  • Attach files such as PDFs or images, Figma designs, or layouts copied from the Builder Chrome plugin.
  • Connect Integrations, which can provide you with access to other services such as Linear, Netlify, or Zapier.
  • Choose which AI model you wish to use, which affects code output and can decrease or increase the amount of Agent credits used.

When prompting within an existing Project, you have additional options:

  • Select a specific element to reference as context for your prompt by clicking the target icon.
  • Adjust rules and Project settings by clicking the cog icon.

To create a pull request after making changes to your Project, click the Create PR button. After clicking, Fusion generates the pull request and then opens a new tab, directing you to your pull request.

Share your pull request with your team to get feedback and potentially merge your changes into your live application.

For more details, visit Create a pull request.

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

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Trust Center

Cookie Preferences