marmo-ui — Claude Code MCP server: live React design-system APIs
Wires your agent to live Marmo UI component APIs so it builds dashboards from real props instead of guessing them.
claude mcp add --transport http marmo-ui https://mcp.marmoui.com/mcpWhat marmo-ui does
Marmo UI is a React 19 design system under MIT: tables, charts, forms, app shells, and both themes driven by one token set. The MCP server hands your agent current component APIs, composition patterns, and a review_generated_code check. Bad imports and made-up props get fixed before you open the file.
The server is hosted at https://mcp.marmoui.com/mcp, so there is nothing to run locally. The component library is separate: npm i @marmoui/ui, with react and react-dom 19 as peer dependencies. Claude users can take the plugin from the mahmoudilyan/marmoui marketplace, which bundles the MCP, the marmo-ui skill, and the /marmo-ui:init, /marmo-ui:design-md, /marmo-ui:build commands.
Free tier keeps generation correct in Marmo's default styling. Your own brand — colors, type, tokens, component overrides — sits behind Pro at $9.99/mo with a 14-day trial: that needs a DESIGN.md and a personal MCP token. Generation runs inside your agent on your LLM tokens, and the code lands in your repo.
What it helps with
- build a billing dashboard from ready-made components
- catch invented props and broken imports before review
- point the agent at the current library API instead of training-data guesses
- generate screens in your own brand colors and tokens
- keep light and dark themes on a single token set
Example prompts for the agent
- Build a billing dashboard with Marmo UI.
- Run the generated code through review_generated_code and fix what it flags.
- Build a user-creation form from @marmoui/ui components
How to install marmo-ui
Platform CLI: remote server
claude mcp add --transport http marmo-ui https://mcp.marmoui.com/mcpPlatform CLI: remote server
codex mcp add marmo-ui --url https://mcp.marmoui.com/mcpConfig file
{
"mcpServers": {
"marmo-ui": {
"url": "https://mcp.marmoui.com/mcp"
}
}
}Config file
{
"servers": {
"marmo-ui": {
"type": "http",
"url": "https://mcp.marmoui.com/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http marmo-ui https://mcp.marmoui.com/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about marmo-ui
How do I install marmo-ui in Claude Code?
Run claude mcp add --transport http marmo-ui https://mcp.marmoui.com/mcp. For the plugin with its commands and skill, add the marketplace first with /plugin marketplace add mahmoudilyan/marmoui, then /plugin install marmo-ui@marmoui-plugins.
What does marmo-ui do?
It serves your agent the live API of a React design system: component props, composition patterns, and validation of generated code. The agent then assembles UI from real components rather than invented ones.
Do I need an account to use marmo-ui?
No. The free tier and npx marmoui init work without an account. A personal MCP token is only needed for Pro mode, where generation follows your brand.
