CLI and coding agents

You can work entirely from an exported ZIP. Use a connection when you want your terminal or coding agent to read the latest saved version of a library.

The MIT-licensed component source is available without a CodeRocket account. The hosted registry used by the CLI and MCP requires an account, a saved library and a connection token. Installed source runs locally without a connection.

Create a connection

1. Save the library in the editor, then open Connect.
2. Name the connection for the machine or agent that will use it.
3. Choose Create connection and copy the token shown once.
4. Copy the generated setup commands or MCP configuration into your development environment.

A connection can read only its library. It expires after 90 days and can be revoked from the same dialog. Put its token in your terminal or agent's protected environment; keep it out of source files, prompts and public URLs.

Install with the CLI

With Node.js 24 or newer installed, run the official npm package from your application folder. Copy your library ID from Connect and provide the token in your terminal environment:

In bash or zsh, paste your connection token at the hidden prompt and press Enter:

printf "Connection token: "
read -rs CODEROCKET_TOKEN
export CODEROCKET_TOKEN
printf "\n"
npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID
npx @coderocketapp/cli@latest add button dialog

The CLI remembers the library in .coderocket/manifest.json; it never writes the token to project files. Keep CODEROCKET_TOKEN available for later commands, including in new terminals. You can instead set CODEROCKET_LIBRARY and run npx @coderocketapp/cli@latest init without a positional ID. No global installation is required.

Install the listed runtime dependencies and import the generated styles once. See export and installation for React/Next.js, or Vue and Nuxt setup. The connection reads the framework from your saved library and serves the matching source and dependencies.

Commit .coderocket/manifest.json and .coderocket/lock.json with the installed source. The CLI writes integration instructions and agent rules to .coderocket/README.md and .coderocket/AGENTS.md. The import command analyzes local files without uploading them and does not require a token.

CODEROCKET_SERVER defaults to https://ui.coderocket.app. If you use a different Studio deployment, set its origin in the environment before init and keep it set for subsequent commands. Connect includes that variable when needed.

Your local edits stay yours

The CLI compares file hashes before applying an update. If it finds a local edit or deletion, it stops the installation and writes the proposed changes into a .coderocket/review-* folder. Review and merge those changes in your codebase; the CLI does not silently replace your work.

Save changes in the editor before syncing. A connection reads saved versions, not another browser's unsaved preview.

Use the shadcn registry (React)

Vue libraries use the CodeRocket CLI or MCP above. The instructions below target React projects.

Open Connect → shadcn registry and copy the registry entry into your existing components.json. The configuration uses an authorization header from your environment to keep the library private.

You can then install a component through your configured registry:

npx shadcn@latest add @coderocket/button

The local-change protection described above belongs to the CodeRocket CLI. When using another installer, review its proposed changes and your version-control diff.

Connect an agent with MCP

Open Connect → Coding agents · MCP to copy the configuration for your saved library. Use Node.js 24 or newer and an MCP client that supports local stdio servers:

{
  "mcpServers": {
    "coderocket": {
      "command": "npx",
      "args": ["-y", "@coderocketapp/mcp@latest"],
      "env": {
        "CODEROCKET_LIBRARY": "YOUR_LIBRARY_ID",
        "CODEROCKET_TOKEN": "YOUR_CONNECTION_TOKEN"
      }
    }
  }
}

Replace the placeholders in your client's private configuration and keep it outside version control. If the client has protected secret settings, provide CODEROCKET_TOKEN there and remove its entry from the JSON. Restart or reconnect the MCP server after configuration. The token is passed to the server as an environment variable.

The connector gives your agent read access to:

• The saved design model, tokens and revision.
• Design rules and integration conventions.
• Component and block search.
• Source files, dependencies and installation paths.

For example, you can ask an agent to “build a settings form using this library's input, select and button components.” The agent has the source and design context it needs to reuse your library. Design changes still happen in the editor, where you review and save them.

The MCP server reads the library; your agent uses its own tools and permissions to edit your application. If the token expires or is revoked, create a new connection for the same library, update the environment and reconnect.

Include your design rules

Every source export includes AGENTS.md with the library's conventions. It asks agents to reuse existing controls, consume semantic tokens, and preserve keyboard and focus behavior.

If your project already has an AGENTS.md, merge the relevant design rules into it. Preserve your existing project-specific instructions.

Give an assistant the public reference

Use Copy for AI on any documentation page. Paste the result into your preferred assistant, such as ChatGPT, Claude, Cursor, Copilot or Codex, and describe what you want to build. The copied context includes this page’s Markdown and links to source installation and agent setup. It works without a CodeRocket connection.

This is the public reference. To work with your own saved components and theme, give your coding agent the exported files or connect it through MCP. Keep connection tokens in the agent’s protected environment settings.

Component and block pages also offer Open in editor. Choose an existing library or create one; the editor keeps the component you selected. You can customize its design, inspect its code and export the source from there.

The Markdown link opens a plain-text version of the page, useful for both people and tools. /llms.txt provides the documentation index; /llms-full.txt contains the full collection for tools that need it.