Quick start

For Vue, follow the Vue setup guide; the Studio workflow and AI tools are the same.

This walkthrough uses a React library called Acme UI. You can complete the design manually; AI is optional.

You can use the MIT-licensed component source without an account. This walkthrough uses the hosted Studio to save a customized library and install it through its private registry, which requires an account and a library connection token.

1. Create your library

Create an account, confirm your email address, then open the editor. Your libraries are private to your account.

Choose New library, name it Acme UI, and select React with a light starting appearance. Leave the optional design description empty for this walkthrough, then select Create library.

2. Set a visual direction

Open Customize and try these changes:

The preview updates immediately. Switch between Components and Blocks to check the same choices across different interfaces. The Accessibility view reports text contrast for the main semantic color pairs.

Want one component to look different? Select it in Components, then adjust its override at the top of Customize. Reset removes that override and restores the shared design values.

3. Optionally refine with AI

Open AI assistant and describe a concrete change:

Make this a compact developer workspace. Keep the blue accent, use subtle shadows, and reduce the dialog corner radius to 8px.

Inspect the proposed changes before applying them. You can undo a change in the preview. If the assistant asks for clarification, answer it before applying anything. See working with AI for custom components and the limits of generation.

4. Save a version

Select Save to store the current design. Version history lets you restore an earlier design into the preview, then save it as a new version. Restoring a theme does not remove custom components already saved to the library.

If another session has changed the library, saving reports a conflict. Reload and inspect the newer version before continuing.

5. Install and render a component

Save any pending changes, then open Connect and choose Create connection. Copy the token shown once. With Node.js 24 or newer installed, run the official CLI from your application's folder using the library ID shown in Connect:

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

Keep your token in the terminal environment, outside source and version control. The CLI remembers the library ID in .coderocket/manifest.json and prints the required runtime dependencies; install those in your app. React and React DOM must use matching versions. See CLI and coding agents for configuration and token renewal.

You can also choose Export and copy the ZIP's components/ and styles/ folders into your app. Follow export and installation for that setup.

Import the compiled styles once, then use the source directly:

import { Button } from "./components/ui/button";
import { ThemeScope } from "./components/ui/utils";
import "./styles/components.css";
import "./styles/theme.css";

export default function App() {
  return (
    <ThemeScope>
      <Button>Save changes</Button>
    </ThemeScope>
  );
}

Your button uses the saved Acme UI theme. It renders from local source and CSS. Connect its onClick callback to your application when you add behavior.

Keep CODEROCKET_TOKEN set when using the CLI again. List available items, add more components, or save a new design in the Studio and sync it:

npx @coderocketapp/cli@latest list
npx @coderocketapp/cli@latest add dialog
npx @coderocketapp/cli@latest sync

The CLI preserves locally edited files and places conflicting updates in a review folder.