Studio CLI
The Studio CLI is a code-side tool that runs from your terminal and writes files into your project (or entries into your Studio project) directly, no Studio web app interaction needed. Use it when you want a scriptable, repeatable alternative to the web UI and the LLM skills: register components, sync designs from Figma, import design tokens, sync responsive breakpoints, and generate Sections.
The CLI is a plugin on Contentstack's main CLI (csdx). Every command is deterministic (the same command produces the same result) which makes it a good fit for continuous integration (CI) and one-time migrations.
Installation
# Install the Contentstack CLI globally npm install -g @contentstack/cli # Install the Studio plugin csdx plugins:install @contentstack/studio
One-time setup
Three steps bind the CLI to your account, region, and Studio project.
1. Pick your region
csdx config:set:region
Pick from the available list (North America, Europe, Asia-Pacific, etc.). The session targets that region for the rest of its commands.
2. Log in
csdx login --oauth
Opens a browser for Open Authorization (OAuth). After signing in, pick the organization.
3. Link to a Studio project
csdx studio:project:set
Interactive: picks from the projects your account can access. Or pass one directly:
csdx studio:project:set --project-id=<project-id>
Confirm which project is active with csdx studio:project:get.
The full command set
Each command has its own page with usage, flags, and examples.
| Command | What it does |
|---|---|
| studio:project:set | Set the active Studio project for subsequent commands |
| studio:project:get | Show the currently active project and its details |
| studio:component:add | Generate a code component from a Figma design |
| studio:component:register | Register local component(s) with Studio by scanning a file or directory |
| studio:component:sync | Make a code component available in the Figma plugin for mapping |
| studio:design-token:add | Fetch design tokens from Figma, or generate them by analyzing the project |
| studio:design-token:config | Update configuration values in the generated register-design-tokens file |
| studio:responsive-options:sync | Sync responsive breakpoints from your registerBreakpoints function to the project |
| studio:section:create | Generate a Studio Section from a component + a connected content type |
When to use the CLI vs the LLM skills
Both paths exist. Pick what fits your workflow.
| Use the CLI when | Use the LLM skills when |
|---|---|
| You prefer terminal commands and scripts | You prefer natural-language chat in your editor |
| You're automating in CI | You're working interactively on a single component |
| You're running a one-time migration | You want the agent to infer decisions and ask clarifying questions |
| Your team standardizes on Contentstack tooling | Your team uses different LLMs across different IDEs |
The CLI is more deterministic. The LLM skills are more conversational. Several commands have an equivalent that runs as an agent under prompts/.
The Section generator has the richest flow of the set (matching a component to a content type, adding wrapper sections, and making inner components composable), so start with Generate a Section if that's why you're here.
- Studio CLI in the component workflow: the CLI seen from the "bring your own components" angle (register, Figma sync, tokens), with the typical component workflow.
- Registering components, Generate components from Figma, Design tokens: the concepts the component/token commands operate on.