private beta
Builder Projects gives you a way to create and iterate on applications using AI and visual editing. Prototype ideas, build web apps, convert Figma designs to code, and even submit pull requests by connecting to your GitHub repo.
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:
This example shows extending an existing app with additional prompts. The video below shows using the following prompt:
"Create a product upsell section that's featured on a cart page that has a dynamic zone, structured data, and personalized targeting."
When the user presses Enter, the AI creates the upsell section. The user then requests placeholder images and updated copy, and the AI makes these changes resulting in a completed and colorful end result.
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.
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 working with Builder Projects and Builder's AI, visit:
- Builder Figma Plugin. Learn how to use the Builder Figma plugin to get your design into Builder.
- AI Credits. Understand Builder's AI credits and how and when they apply.
- Builder Projects: best practices. Get tips and insights to work even smarter.
- Connect GitHub to Projects. Connect your repo to Builder so you can edit your code visually and create PRs with Builder.