Register: How DealMaker 10x'd Productivity With AI-First Model

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io
Contact sales

Register: How DealMaker 10x'd Productivity With AI-First Model

Announcing Visual Copilot - Figma to production in half the time

The Builder CLI is a command-line tool that powers several key functions for developers including code generation, code sync, and more.

  • Command-line scripts are accessible through the builder.io/dev-tools NPM package.
  • Some of the commands in this document are for Publish Spaces, while others are for Fusion Spaces.

Prerequisite for Publish

If you have a Publish Space, you must have integrated your codebase with Builder to use the Builder CLI. For more details, see Publish Quickstart.

Space type: Publish Space

Requirements: a Builder snippet ID

The add command adds code generated from a Publish Space to your local codebase. When successfully run, the command creates new files within a given directory. Replace <SNIPPET_ID> with your code snippet's ID.

npx "@builder.io/dev-tools@latest" add <SNIPPET_ID>

To access a snippet ID:

  1. Within a Fusion Project, click the Develop tab.
  2. Click Generate Code.
  3. Adjust the code by prompting the AI as desired. For more details, see Get Started with Fusion.
  4. Click Sync Code.

An add script appears which includes the snippet ID.

Develop Space with the Develop tab open, code generation having occurred, with an arrow pointing towards the Sync Code button.

Space type: Fusion or Publish Space

The auth command re-triggers authentication from the command line. This is useful should you need to change your authenticated Space or you are having any issues with authentication.

npx "@builder.io/dev-tools@latest" auth

To reset your credential and log out, include the --reset flag.

npx "@builder.io/dev-tools@latest" auth --reset

Space type: Fusion or Publish Space

The auth status shows information about your Space and user account.

npx "@builder.io/dev-tools@latest" auth status

Space type: Fusion or Publish Space

Requirements: a Builder fiddle URL, your Public API Key

The code command triggers code generation within a local codebase. Replace <URL> with your design URL and SPACE_ID with your Space's Public API Key.

npx "@builder.io/dev-tools@latest" code --url <URL> --spaceId <SPACE_ID>

The code command can take the following flags:

flagdescription

--cwd

The working directory for the command.

--help

View usage instructions and additional flags.

--prompt

Provide instructions through the command line rather than an interactive dialog with the CLI.

--spaceId

Your Space's Public API Key

--url

The design URL to generate code from.

--disableMCP

Disable MCP server support.

--privacyMode

Enable privacy mode for codegen (encrypts sensitive data).

There are two types of configuration files that can be used with the code command to customize code output.

  1. File exclusion configuration, like .builderignore.
  2. Rule files, such files within .builder/rules/ or separate .builderrules files.

Additionally, Builder CLI recognizes .cursorrules files used by the Cursor AI Code Editor. For more detail on creating rules for the the Fusion AI, see Project configuration files.

Space type: a Fusion Space

Requirements: a local repository

The index-repo command analyzes your entire repository to understand your component architecture and typically achieves high mapping accuracy, enabling effective code generation.

npx "@builder.io/dev-tools@latest" index-repo

The index-repo command can take the following flags:

flagdescription

--spaceId

Your Space's Public API Key

--designSystemPackage

Provide a specific package or scope to focus the command, such as --designSystemPackage @company/ui. Consider running within design system repo instead.

--includeDirectories

Increase the scope of indexing outside of the current directory by providing a comma-separated list of absolute paths. This is not necessary if component definitions are in the workspace you are indexing.

--includeDirectories "/your/path, /your/other/path"

--skipHeader

Skip the display headers. This is useful for CI or automation.

--debug

When set to true, enables debug logging with API call details.

--verbose

When set to true, enable verbose output.

--force

When set to true, forces operation despite warnings.

--cwd

Provide the working directory for the command.

--components

Allow the re-indexing process to focus on a specific component or list of components. This is useful when testing or refining document creation.

--components="Button" or --components="Button,Input"

To instead generate code using a web interface, visit Figma to Fusion. If you'd rather generate code through a command-line interface, Generate Code with Builder CLI.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Trust Center

Cookie Preferences