private beta
Projects let you 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, select the Projects tab in the left nav.
To create a net-new application from a prompt, just type in what you want in the prompt box at the top of the projects page and hit enter.
You can then visually edit your generated app and continue to prompt to extend and refine your project.
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 hitting cmd+v or ctrl+v
Once you are happy with your visual changes, choose Update Code at the top and the AI will apply your visual changes to the code.
Note: We currently only support React projects (including Next.js, React with Vite, etc). More framework support is coming soon.
From the Projects page, choose Connect Repo.
You will then need to 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)
Once setup, choose Save.
We will then clone your repo, install dependencies, run your dev server, then launch you into the Builder.io Visual Editor for visual editing.
When you are happy with your updates, choose Send PR in the top right of the Visual Editor
This will create 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
