Work with the assistant

The assistant is an interface to your design-system model. It does not rewrite the entire component library for every prompt.

Be specific

Use warmer surfaces and rounder cards, but keep the current primary color and button corners.

The server requests a structured proposal from Gemini. The proposal is checked against the model schema and supported token paths. Color changes are checked for text contrast. Invalid output can be repaired once; it is not silently applied.

Review before applying

The proposal lists the values that would change. Apply to preview changes the local editor state. Save creates a persistent version. Undo remains available before saving.

If you edit the design while a proposal is in progress, the old proposal cannot overwrite your newer changes. Request another proposal using the updated design.

Missing information

An ambiguous request may return a clarification. No changes accompany a clarification. Add the missing details to your prompt and try again.

Privacy and availability

The prompt and the current design values are sent to Google's Gemini service to produce a response. Provider keys stay on the server. CodeRocket does not store raw prompts in its application history; it stores the validated proposals used to explain changes.

If Gemini is unavailable or not configured, the assistant reports the issue. The visual editor, existing components and exports remain usable. There is no simulated AI response.

Create a component or block

Use Create component in the editor to describe a form, card, settings panel or file selector. Gemini composes the existing primitives into a structured tree. The renderer produces editable React or Vue sources, matching the library’s framework, from that tree; generated strings are never executed as JavaScript.

Review the preview, source and specification, then choose Accept and save component. The accepted component becomes part of the library's exports, registry and MCP catalogue. Its version is stored with its specification, source and validation metadata.

This early-access generator supports composition of the available layout and form primitives. It does not invent a working backend or arbitrary new browser behavior. File selection stays local until your application's callback handles it; application buttons use the onAction prop in the exported source.

The schema, tree and labels are checked before the preview. The editor then runs axe accessibility checks on the rendered preview; acceptance stays disabled until those checks pass. Components remain experimental until you test the integration, keyboard behavior and application actions in their final context.

Source, tests and stories

Accepted compositions include their structured specification, editable React or Vue source, an SSR smoke test and a Storybook story in the ZIP export. Connect the exported stories to your application's Storybook theme decorator. Run the tests and accessibility checks in that application before promoting an experimental component to production.

The current generator assembles validated primitives. It does not execute arbitrary generated JavaScript or invent application backends. Unsupported behavior requires clarification and implementation in your own action callbacks.

Use your library with a coding agent

To give your coding agent the saved design rules and catalogue, open Connect → Coding agents · MCP. The official npm server runs with npx -y @coderocketapp/mcp@latest and requires Node.js 24 or newer. Set CODEROCKET_LIBRARY and CODEROCKET_TOKEN in the MCP client's environment, using the library-scoped connection created in the Studio. Keep tokens out of prompts and source files. Copy the complete MCP configuration.

The MCP server provides read-only access to the saved library. Your agent can fetch source and use its own tools to integrate it into your app. Save Studio changes before requesting an updated design. To install and sync from a terminal, use npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID with the token in your environment, then add or sync as shown in the CLI guide.

Hosted connections require an account and a saved library. The public documentation and MIT-licensed component source can be used with an assistant without an account or connection token.