The Builder extension for Projects launches Builder's Visual Editor directly from any Visual Studio Code editor, including Cursor and Windsurf.
The extension enables visual code editing directly within VS Code and similar IDEs, combining traditional development tools with Builder's Visual Editor.
- Automatically detects and uses existing
builder.config.jsonconfigurations. - Manages development server ports and processes to prevent conflicts.
- Provides real-time synchronization between visual changes and code.
Before beginning, make sure you have:
- The latest version of Visual Studio Code and Node.js.
- Access to Builder Projects.
- An existing project with a frontend framework.
To install the extension:
- Open the Extensions tab in Visual Studio Code.
- Click the search box, type Builder, and select the Builder official extension.
- Click Install.
After installation, the Builder icon appears in the Activity Bar.
- Click the Builder icon to open the extension.
This video demonstrates installing and accessing the extension from VS Code:
To connect with Projects, begin by doing the following:
- Click the Builder icon in the Activity Bar.
- Select where Fusion should launch from the dropdown menu.
You have three options for launching your project:
- Browser
- Code Editor
- Desktop App
Once you've selected your choice, click the Next button. Select how you'd like to start your application.
- To provide a run command to Fusion, choose Run dev command.
- To connect to an already running server, select Connect to dev server.
Then, click Launch Fusion.
The video below demonstrates the process of launching a Project within VS Code.
Choose either Run dev command or Connect to dev server to start your application, depending on your local setup.
If you select the Run dev command option, the extension will attempt to auto-detect your development server command and your server URL.
To adjust either setting, edit the appropriate fields. To edit the Development Server URL, uncheck the Auto-detect checkbox.
If you select the Connect to dev server option, you will need to input the URL for your development server.
To adjust either setting, edit the appropriate fields. To edit the Development Server URL, uncheck the Auto-detect checkbox.
Type your prompt into the Builder plugin's text box. Builder's AI tools will follow your prompt and make changes to your code, using your own codebase as its main frame of reference.
In the video below, a prompt is provided to Builder's plugin that suggests the creation of new reports and graphs at a particular route. These reports and graphs are added to the page, using the repository's color scheme and brand style. The changes are then committed to the codebase through VS Code's Source Control panel.
To use Fusion within your codebase, but without a Visual Editor, choose the Coding Agent Chat option after clicking the Builder extension. This opens a panel where you can work with the AI on your codebase.
The video below demonstrates how to open the Builder extension, relocate the window, and then launch the Coding Agent Chat within VS Code.
During the first launch, the extension prompts to authenticate with the Builder account and authorize a Builder Space. A browser window opens with the Builder authorization page.
- Select the Builder Space from the dropdown.
- Click Authorize to grant access.
- Return to VS Code to complete the setup.
Authentication is required once per VS Code project; the extension applies the same authenticaiton for future sessions.
This video demonstrates the authentication flow:
To log out of your Fusion account within VS Code, use the three-dot menu in the top-right corner. Or, open the VS Code Command Palette and choose Builder.io: Logout from Builder.
The extension performs these actions:
- Stops the development server process when closing the Webview tab.
- Cleans up proxy processes.
- Frees up used ports.
To manually stop processes, click the Stop button in the Projects panel or close the Webview tab.
After setting up the extension:
- For visual editing using AI, Figma to code, and creating apps from scratch, go to Builder Projects.
- To connect repositories with Projects, go to Connect GitHub to Projects.