Marmoui

What is Marmo UI?

Marmo UI is a design system and hosted MCP server that lets CLI-based AI agents (Claude Code, Codex, Cursor, Gemini CLI) build production React dashboards and apps in minutes. It provides real components, live props, validation, and optional brand customization — all without AI slop.

How to use Marmo UI?

Connect your agent with npx marmoui init (free, no account), install npm i @marmoui/ui, then ask your agent to build with Marmo UI. For Claude Code, install the plugin via /plugin marketplace add mahmoudilyan/marmoui and use /marmo-ui:* commands. The component library also works standalone — import @marmoui/ui/style.css and use any component.

Key features of Marmo UI

• Open-source React 19 design system (MIT) with tables, charts, forms, and app shells
• Hosted MCP server providing live component APIs, composition patterns, and generation rules
• Automated validation (review_generated_code) that catches wrong imports and invented props
• Claude Code plugin with /marmo-ui:init, design-md, and build commands
• Free tier makes agents correct; Pro tier adds on-brand generation via DESIGN.md
• Works as a regular component library without any AI agent

Use cases of Marmo UI

• Build a billing dashboard or admin panel by simply asking your agent
• Generate brand-consistent UIs across multiple agents using a shared DESIGN.md (Pro)
• Quickly prototype and ship production‑ready React apps without manual component selection
• Use @marmoui/ui directly in any React 19 project, agent or not
• Integrate with Claude Code, Codex, Cursor, or Gemini CLI for code generation

FAQ from Marmo UI

What is the difference between Free and Pro?

Free includes the core component library, live MCP props/validation, and default Marmo styling. Pro ($9.99/mo, 14-day trial) adds on-brand generation via your DESIGN.md, a composition patterns library, pro blocks, and a personal hosted design-system page.

What are the peer dependencies for @marmoui/ui?

React 19 and react-dom are required as peer dependencies.

Where does the generated code live, and who owns it?

Generation always happens in your agent with your LLM tokens; the code lands directly in your repo and you own it fully.

Can I use @marmoui/ui without an AI agent?

Yes — it works as a regular React component library. Import @marmoui/ui/style.css once, then use any exported component.

What is the license for the component library?

@marmoui/ui is released under the MIT license and is free forever; components that ship free never move behind the paywall.