What is the CodeRocket UI MCP server?
CodeRocket UI ships a read-only MCP server that exposes a saved library to an AI coding agent. Eight tools return the design system, its integration rules, and React or Vue components and blocks with source and dependencies, so generated screens follow your tokens instead of defaults.
CodeRocket UI combines React and Vue components, interface blocks and a typed design-system model. The MCP server is the agent-facing piece. It is read-only and serves one saved library: its design system, integration rules, components, blocks, source files and dependencies.
React libraries return React source, and Vue libraries return native Vue single-file components. The server never writes your project files. Your agent applies changes with its own tools.
What changes in your agent's output
- The agent reads your design rules first, then builds with your library's components rather than generic markup.
- Component source, dependencies and installation paths come from the library, so imports and styles are correct.
- Blocks give it whole application sections to start from, not only single controls.
- Updated designs only reach the agent after you save them in Studio, so the source of truth stays explicit.
How the setup works
- Open CodeRocket Studio, create a library and save it.
- In Connect, create a token for your agent and copy the library ID.
- Add the server entry with both values in its environment, then restart or reconnect the client.
Who the CodeRocket UI MCP server is for
Best for
- Teams building a product-specific component library that agents must follow, with React or Vue source they own.
- Design system owners who want rules enforced in generated code, as a code-side counterpart to a design systems knowledge server.
- Projects that already pair a registry workflow, such as shadcn, with their own tokens.
Not for
- Reading a Figma file. Use the Figma MCP server for design files.
- Zero-account setups. The hosted registry needs an account, a saved library and its token, although the MIT components work without it.
- Machines on older Node versions. The server requires Node.js 24 or newer.
Use it with UiChemy
CodeRocket output is React or Vue source for a front end you run. For WordPress, UiChemy works at the destination: AI to WordPress imports an existing AI build, and Composer edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect CodeRocket UI MCP Server: Your Design System for Agents to your AI client
npx -y @coderocketapp/mcp@latest --helpCreate and save a library
Open CodeRocket Studio, create a React or Vue library and save it.
Create a connection
In Connect, create a connection for your coding agent and copy the token, which is shown once. Copy the library ID from the MCP configuration shown there.
Add the server
Merge the entry above into your client's local stdio MCP settings. Keep the token out of version control and out of prompts, or use your client's secret settings.
Check the package
Run
npx -y @coderocketapp/mcp@latest --helpand--versionto confirm availability. Node.js 24 or newer is required.Restart and ask
Reconnect the client, then ask the agent to read your design rules and build with the library's components.
Client configuration
{
"mcpServers": {
"coderocket": {
"command": "npx",
"args": ["-y", "@coderocketapp/mcp@latest"],
"env": {
"CODEROCKET_LIBRARY": "YOUR_LIBRARY_ID",
"CODEROCKET_TOKEN": "YOUR_CONNECTION_TOKEN"
}
}
}
}Endpoints and ports
npx -y @coderocketapp/mcp@lateststdio, launched by the clienthttps://ui.coderocket.appOverride with CODEROCKET_SERVERcoderocket://design-rulesSame integration rules as Markdown90 daysRead-only, one library, revocable in ConnectWhat you can do with it
- Read-only by designThe server does not save Studio changes or write project files. The agent applies source with its own permissions.
- React and Vue from one modelReact uses Base UI and Vue uses native single-file components with Reka UI, sharing tokens and layouts.
- Scoped, expiring tokensA token grants read access to one library, expires after 90 days and can be revoked.
- Design rules as a resourceThe coderocket://design-rules resource exposes the same integration rules the get_design_rules tool returns.
- Components and blocksEight tools cover design system, rules, components and blocks, each returning source and dependencies.
- Open-source coreThe MIT components work with or without Tailwind and without an account or AI provider key.
Tools it exposes
get_design_system
Returns the latest saved design model and revision.
get_design_rules
Returns component conventions, token rules and integration instructions.
list_components
Lists available component names and descriptions.
search_components
Returns components matching a query.
get_component
Returns source files, dependencies and installation paths for a slug.
list_blocks
Lists available block names and descriptions.
search_blocks
Returns blocks matching a query.
get_block
Returns source files, dependencies and installation paths for a slug.
Frequently asked questions
What is the CodeRocket UI MCP server?
It is a read-only MCP server that gives an AI coding agent access to a saved CodeRocket library: its design system, integration rules, components, blocks, source files and dependencies. React libraries return React source and Vue libraries return Vue single-file components.
How do I install it?
Create and save a library in Studio, create a connection in Connect, then add a server entry that runs npx -y @coderocketapp/mcp@latest with CODEROCKET_LIBRARY and CODEROCKET_TOKEN in its environment. Node.js 24 or newer is required.
Do I need an account or an AI provider key?
The CLI and MCP need no AI provider key. Hosted registry access does need an account, a saved library and its token. The MIT-licensed component source can be used without an account or without this server.
Can the agent change my design system?
No. The server is read-only. It does not save Studio changes or write project files. Save changes in Studio before asking the agent to fetch an updated design, and review any source the agent writes in your application.
How do I fix a token or connection error?
Check that the library ID and token belong to the same saved library. If the token is expired or revoked, create another connection and update the environment. A custom Studio deployment needs CODEROCKET_SERVER set to its HTTPS origin.
How is it different from a Figma MCP?
It serves a coded component library and its rules, not a design file. The Figma MCP server reads Figma designs, so teams often use a Figma server for design intent and this one for the components that implement it.
What license does it use?
The README says the open-source core is MIT licensed, and GitHub detects MIT. Hosted registry access is a different matter, since it requires an account, a saved library and its token, so confirm the Studio terms before you depend on it.