Watch Now: 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

Watch Now: 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.

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: 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 Builder. 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