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 CI and one-time migrations.
Do It With a Skill
The CLI and the skills overlap deliberately. register-component and import-design-tokens do in conversation what studio:component:register and studio:design-token:add do at a prompt.
curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh
Pick the CLI when you want a repeatable command in a script, and the skill when you want the component read and inferred for you.
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 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>
Find the project ID in Studio: open your project, then Settings, then General. Confirm which project is active any time with csdx studio:project:get.
The Full Command Set
Each command is a section of the command reference, with its usage and flags. Section generation is the exception: it has its own page, because it is a guided flow rather than a single call.
| 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 agentic equivalent 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.
Related
- Registering components · Generate components from Figma · Design tokens: the concepts the component/token commands operate on.