Fusion is the first AI-powered visual canvas that integrates directly with your existing codebase, understands your design systems, and creates production-ready code that works with your current architecture.
- Offload repetitive coding work to AI and reduce development timelines by 50-80% (based on Beta feedback).
- Design and develop by providing Builder with natural language, screenshots, Figma designs, PDFs, URLs, and more.
- Visually edit pages and then transform those changes into code.
- Leverage your developer's already existing workflow by creating pull requests directly to GitHub with code changes and summaries.
Builder Fusion integrates into your existing workflow, allowing you to generate code that matches your coding style. To use Fusion to contribute to your codebase:
- 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.
While there are several ways to use Fusion, the main feature of Fusion is Projects.
Projects within Fusion connect directly to your GitHub repositories, letting you visually edit code and create applications with AI assistance.
After connection, configure your project to launch and view your code running within Builder. You can interact directly with your running application using Builder's Visual Editor, the Code Editor, or by iterating with AI.
After connecting your GitHub repository to Builder, prompt the AI to make changes to your code. With Fusion, you can:
- Create text prompts that describe what changes you wish to make to your application.
- Include Figma designs directly to the AI, using the Builder Figma plugin.
- Add images, MCP servers, and more context to the AI, adding Context to your Project.
- Converse with the AI to provide feedback, ask questions, or brainstorm ideas.
- Provide custom instructions to the AI, to influence the code it generates.
Builder's AI will understand the context of your codebase, and make changes accordingly. Builder's AI can leverage internal and public APIs, external URLs, and much more to quickly generate new features or solve bugs in your own code.
For more details on how to best influence the AI, visit Project best practices.
Once you're done with the changes to your application, create a pull request to go directly to GitHub. With pull requests, you can:
- Suggest changes to your team without committing your code directly to the codebase.
- Seamlessly integrate with other developers, leveraging the workflow they already use.
- Get help from @builder-bot, who will directly Edit your pull requests.
For more details, visit Create a pull request.
The previous sections give you an idea of what you can do with Builder Fusion. To get started playing with Builder, a few terms and concepts can help:
| Concept | Description |
|---|---|
Organization | The top-most level of your Builder account, an Organization usually represents a company or group of related Spaces. For more information, see Understanding Organizations. |
Space | A single app, a Space resides within an Organization. A Space is where you do your daily tasks such as Create apps from prompts. |
Projects | Builder Fusion allows you to create and connect multiple Projects. Visit the Projects overview to learn more. |
Users | Create and maintain all users in your Organization and then specify which Space(s) those users can access. For more information, see Managing Users, and Roles and Permissions in a Space. |
Integrations/plugins | A built-in or custom feature that helps two resources work together. For example, the built-in integrations for Figma helps you import designs directly from Figma into Builder. |
Block | A Block is a drag-and-drop UI feature of Builder that you can use to create Page and Section layouts. For example, use Text blocks for copy, Columns for side-by-side layout, or create your own custom components. You can find all available components in the Insert tab within the Visual Editor. |
Responsive | Responsive apps adapt by design to any screen width. You can check out any site's responsiveness by opening it on various devices or changing the width of the browser. A responsive site maintains its integrity and accessibility on any device. Responsiveness is a core part of the Develop product. For more detail, see Intro to Responsive Design. |
Get familiar with key actions you can perform with Builder Fusion.