To get started with Builder Fusion:
- Connect GitHub to Builder: connect your repo with Builder so that the change you make are actually in your codebase.
- Iterate and refine: chat with the AI to make modifications, refactor elements, or optimize code reusability.
- Send PRs: when you're ready for your changes to be incorporated into the codebase, send a pull request to your codebase.
Projects within Fusion connect directly to your GitHub repositories, letting you visually edit code and create applications with AI assistance.
To connect an existing GitHub repository:
- On the Projects page, click Connect Repo.
- Connect a GitHub account and grant access to all or selected repositories.
- Select a GitHub repository to use within Projects.
- In the Project Settings dialogue, update the configuration fields.
- Click Save.
In the video below, a repository is selected, builder-academy, from the Projects tab. The application is configured with environment variables and then launched.
For more detailed instructions, visit Connect GitHub to Projects.
After connecting your GitHub repository to Builder, prompt the AI to make changes to your code. Builder AI understands your design systems and overall project architecture.
To iterate with AI:
- Go to the Generate tab within a Project.
- Type what change you'd like to make to your running application.
- Include additional context like Figma designs, screenshots, PDFs, MCP servers, and more. Visit Add context to Projects to learn more.
- Send your prompt. Builder's AI makes changes and describes what it's doing along the way. Once it's done, the changes appear within the Visual Editor.
If the AI encounters any errors, click the Attempt to Fix button to automatically prompt the AI to debug the issue.
You can also directly make changes to your application via the Insert and Layers tab within the Visual Editor. Once your changes are complete, the AI implements those changes into code. Visit Project Modes to learn more.
In the video below, a new carousel feature is created based on a prompt and some existing Figma designs provided by the user. The resulting code is interactive and aligned with the provided design.
For more detailed instructions on how to best provide prompts, visit Projects best practices.
Once you're done with the changes to your application, create a pull request to go directly to GitHub. By creating a pull request, your changes do not have to be automatically merged but can be reviewed by software developers on your team.
To create a pull request:
- Within your Project Settings on the Projects tab, ensure your Commit Mode, under Advanced Settings, is set to Pull Requests.
- Within your Project, after you've made some changes to the project, click the Send PR button.
- You are then be brought to GitHub, where you can add your own comments or tag a software developer on your team.
After a pull request is made, you or other members of your team can mention @builder-bot to request changes to the code. Visit Edit your pull request with @builder-bot for more details.
In the video below, the Send PR button is clicked and a new pull request is created on the associated GitHub repository. A comment is then added to the pull request.
For more detailed instructions, visit Create a pull request.
The best way to learn what Fusion can do is to Connect a Project with GitHub and try out Builder's AI. Go to your Fusion Space's Projects tab to get started.