experimental
With Builder's Projects, you can create net-new applications from prompts or connect existing Github repositories for visual editing.
Key use cases include:
- Prototyping
- Web application development
- Internal tool development
- Integrating Figma designs to live codebases (including functionality)
To access projects, go to Projects in the left side bar in the Builder app.
To create a net-new application from a prompt:
- Go to Projects in the Builder app.
- In the prompt box at the top of the Projects page, type in what you want to generate and press enter.
- If you'd like changes to the generated app, make additional requests of the AI or manually.
To manually make tweaks, click the Edit button at the top of the screen. See the Insert tab and Style tab documentation for details on adding and styling new elements.
This example shows prompting the AI to create a basic customer relationship management app.The video below shows using the following prompt:
"Create a CRM app."
When the user presses Enter, the AI creates the the app:
Note: Projects currently supports React projects — including Next.js, React with Vite, and others. Additional framework support is in active development.
From the Projects page, click Connect Repo.
When prompted, connect a Github account. Be sure you give permissions to either All Repositories, or the specific repositories you want to connect to Builder.
Next, you will need to provide a few settings, such as:
- Development Server Port - the port the development server runs on for this application (for instance, port 3000 for Next.js)
- Install Command - The command to run to install your dependencies
- Development Server Command - the command to run your development server (not your production build)
- Primary Branch Name - this is the branch we will clone
- Environment Variables - include any environment variable key/value pairs to be supplied to your server (they are included with the install command and dev server command)
When you're done configuring the project settings, click Save.
Builder then clones your repo, installs dependencies, runs your dev server, then launches the Builder.io Visual Editor for visual editing.
When you are happy with your updates, click Send PR in the top right of the Visual Editor:
This creates a Pull Request in Github with your changes.
Once a Pull Request is created, you can leave comments and tag @builderio-bot to make changes. The Builder agent will then push updates to the pull request according to your asks
When you have a Project open in the Visual Editor, go to Figma, select a design you want to convert to code, and launch the Builder.io Figma plugin.
Then, choose Export Design and then Copy to Builder.
Then, in the Builder.io Visual Editor select any element and then paste by pressing Cmd/Ctrl+v.
Once you are happy with your visual changes, choose Update Code at the top and the AI applies your visual changes to the code.
To import a number of designs from Figma into one Project, copy the project in Figma using the Builder Figma Plugin and paste it into the Projects AI prompt.
- In Figma, select the design you want to use.
- In the Builder Figma Plugin, on the Export tab, click the Export Design button.
- When the export process is complete, click Copy to Builder.
- In Builder Projects, tell the AI to use that design by giving it instructions and pasting your copied design into the prompt. (The copied design might paste in as code.)
- Press Enter when you're ready and the AI generates the project according to your instructions.
In the video below, two Figma designs are exported with the Builder Figma Plugin and pasted with Cmd + v into the prompt with instructions to create a carousel with the two designs.
Apply design changes to existing code without regenerating code. Assuming you have a design already in Builder Projects:
- In Figma, select and update the design for a component that exists in Builder.
- In the Builder Figma plugin, on the Export tab, click the Export Design button.
- When the plugin has finished processing, click the Copy to Builder button.
- In Builder Projects, tell the AI to update the design and paste into the prompt the content that the plugin put in your clipboard when you clicked Copy to Builder.
This feature is especially useful when you’re working with components that are already part of your codebase, meaning you can update the design in place.
The video below shows a section in Builder, then the same section in Figma that has been edited with new colors. The user exports the design as usual, clicks the Copy to Builder button, and back in Builder Projects, pastes the copied design. The AI then updates the design.
Custom instructions play an exciting role in guiding AI-driven code generation in Builder to produce code tailored to your specific requirements and preferences. You can add instructions in plain, human language so the AI uses your preferences as a guide.
You can provide any information that would help the AI create work according to your specifications. For example, provide any APIs, style guidelines, or code snippets.
To give Builder Projects AI custom instructions:
- Click Add Instructions just below the prompt.
- Add your instructions.
- Click Save.
For more information on getting your Figma designs into Builder, visit: