Builder.io Import Prototype
Import a Builder.io prototype into the current project using the Builder dev-tools CLI.
Instructions
Step 1: Get the Builder URL
Ask the user for the Builder.io prototype URL if they haven't provided one. It must match this pattern:
https://builder.io/app/projects/...
Validate that the URL starts with https://builder.io/app/projects/. If the user provides a different URL format, tell them the URL must be of the form https://builder.io/app/projects/... and ask them to provide the correct one.
Step 2: Clarify the User's Intent
If the user's intention for what to import from the prototype is unclear or unspecified, ask them:
"What would you like to import from this prototype? For example: the full layout, specific components, styles, or something else?"
Use their answer as the {prompt} value. If the user's intent is already clear from context (e.g. "import the hero section" or "import the full page design"), use that directly without asking again.
Step 3: Run the CLI Command
Run the following command using the Bash tool:
npx --yes @builder.io/dev-tools@latest code --prototype "{builderUrl}" --prompt "{prompt}" --accept
Replace {builderUrl} with the validated Builder.io URL and {prompt} with the user's stated intent.
IMPORTANT: DO NOT KILL THE TERMINAL. THIS PROCESS MAY TAKE A WHILE TO COMPLETE (MAYBE MINUTES). WAIT FOR IT TO FINISH ON ITS OWN.
Gotchas
- Always validate the URL format before running the command. Reject URLs that don't start with
https://builder.io/app/projects/. - Don't assume intent. If there's any ambiguity about what the user wants from the prototype, ask. A vague prompt produces poor output from the CLI.
- Quote both arguments in the shell command to handle spaces and special characters correctly.
- The command uses npx, so it always fetches the latest version of
@builder.io/dev-tools. No installation step is needed.