Connect with your code editor
The Builder extension for Projects launches Builder's Visual Editor directly from any Visual Studio Code editor, including Cursor and Windsurf.
Overview
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.
Prerequisites
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.
Install the extension
Step 1: Install from the Extensions tab
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.
Step 2: Access the extension
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:
Launch Projects
To connect with Projects, begin by doing the following:
- Click the Builder icon in the Activity Bar.
- Choose to either start a development server or connect to an already running server.
Use the link at the bottom of the extension pane to switch between the Start Dev Server button and the Connect to Dev Server button.
Use the input fields to modify the development dev server command or URL.
Start the dev server
If you select the start the dev server option, the extension attempts to auto-detect your development server command and your server URL.
To adjust either setting, edit the appropriate fields. To edit the Dev Server URL, uncheck the Auto-detect checkbox.
Connect to a running server
If you select the connect to a running server option, you may need to input or edit the URL for your development server, if it cannot be automatically detected.
Adjust editing mode
By default, the Builder extension opens the Visual Editor within VS Code. However, you have three options for launching your project:
- Browser
- Code Editor
- Desktop App
To select a different option, click the three-dot menu within the extension pane. Choose Visually Edit With, followed by your choice of editing mode.
Prompt changes
Type your prompt into the Builder plugin's text box. Builder's AI tools 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.
Coding agent chat
To use Builder within your codebase, but without a Visual Editor, navigate to the Chat tab after clicking the Builder extension. This opens a panel where you can work with the AI on your codebase.
Use the Chat tab to adjust code or ask questions about your codebase, using Builder's suite of AI tools.
Authenticate
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 Builder 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.
Manage ports and processes
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.
