Marmoui
@mahmoudilyan
About Marmoui
Design-system knowledge for AI agents: live React component APIs, patterns, and generated-code validation. Agents build real dashboards, not slop. Free.
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"marmo-ui": {
"type": "http",
"url": "https://mcp.marmoui.com/mcp"
}
}
}Tools
14Returns the MCP knowledge version: gitSha, indexedAt, componentCount, patternCount, uptimeSeconds. Call this ONCE per session before generating UI code so you know how fresh the design-system data is. Cheap to call. If gitSha is "unknown" or indexedAt is far in the past, surface that to the user before relying on the data.
MANDATORY FIRST CALL before writing any @marmoui/ui code in this session. Returns a step-by-step generation checklist (which tools to call, in what order), critical rules (no namespace sub-components, PageSection is self-closing, no Sidebar export), component patterns, and ICON LIBRARY RULES. Pass iconLibrary (default "phosphor"; also "material" | "lucide" | "tabler" | "heroicons" | "feather") to get that library's import source, icon name map, and weight/style mapping — and pass the SAME value to review_generated_code so it enforces it. Ask the user which icon library they want before writing UI code. Call topic="patterns" to get the generation checklist specifically.
List all available @marmoui/ui components with names, descriptions, categories, and prop counts. Use to discover what exists. Prefer `search_components` when you already know the use case (form, table, dialog, etc.).
Search @marmoui/ui by keyword (e.g. "form", "table", "dialog", "avatar"). Preferred discovery tool — returns the 5-8 most relevant components for a need. Call this before `get_component_info` when unsure which component to use.
Get exact props (with types and defaults), code examples, composition patterns, and common mistakes for a single @marmoui/ui component. REQUIRED before using any component for the first time in a session — prevents hallucinated props (e.g. variant="danger" on Badge, size="lg" on Text) that fail at build time.
Get a complete, validated composition example for a common UI pattern. Available: app-layouts (ASK USER which of 4 layout ids before any full page), app-shell, confirmation-dialog, dialogs-for-other-actions, data-table-with-filters, form-with-validation, posthog-tracking. Call app-layouts first for full pages — returns layout selection flow + AppLayout usage. Pass iconLibrary (default "phosphor") so the usage note tells you which icon import source to rewrite the pattern's icons to. Returns code + inline validation report. Call with no arguments to list all patterns.
⚠️ MANDATORY — call this on every piece of code you generate before returning it to the user. Validates TSX/JSX against real @marmoui/ui prop signatures and returns { valid, errors[], warnings[], suggestedFixes[], iconLibrary }. Catches: (1) unknown imports, (2) Tabs.List/Tabs.Trigger namespace misuse → auto-suggests TabsList/TabsTrigger fix, (3) PageSection used as wrapper (must be self-closing), (4) hallucinated props, (5) icons imported from the wrong icon library (pass iconLibrary — default "phosphor" — matching what you passed to get_design_guidelines; wrong-library icon imports are ERRORS). If valid=false, fix all errors and call this again. DO NOT return code with errors to the user.
Validate a TSX/JSX snippet against real @marmoui/ui prop signatures. Returns `{valid, issues[]}`. Prefer `review_generated_code` for post-generation review (it also auto-fixes namespace patterns and suggests related patterns). Use this tool when validating user-provided or existing code rather than newly generated code.
Returns the authenticated tenant's customized theme tokens, CSS variables export, and component overrides. Call after auth to apply tenant-specific styling in generated code.
Generate a portable DESIGN.md for the authenticated tenant — brand color, type, tokens, and component inventory — that any AI agent can read to generate on-brand UI. Pass format="markdown" (default) for the DESIGN.md string or format="json" for structured data. Output is deterministic for a given tenant.
Validate and optionally save a custom component for the authenticated tenant. Runs review_generated_code validation before persisting. Use for AI-generated or customized components.
Returns ready-to-paste MCP configuration for Cursor, Claude Code, or Codex. Use on the Connect page or when setting up a new project.
Register a prototype for sharing and get a share URL. Reviewers can leave inline comments via the Marmo overlay.
Fetch inline comments from a shared prototype as structured data and Markdown. Pull into Cursor/Claude to iterate on feedback.
Overview
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, andbuildcommands - 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/uidirectly 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.
Frequently asked questions
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.
Basic information
More MCP servers

Termany
thinkany-aiAgent-Native Terminal
Capital.com MCP
capital-com-svCFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. 81.31% of retail investor accounts lose money when trading CFDs with this provider. You should consider whether you understa
Sugra API MCP
Sugra Systems, Inc.Official MCP server for the Sugra API, giving AI agents source-attributed access to 1,500+ endpoints across 36 data domains from 160+ primary sources. Covers markets, economics, company fundamentals, government, news, cl
Legion MCP
faulkjMCP-native LLM councils for debates, juries, blind panels, voting, refinement, and custom multi-model deliberation.
CoinLobster
CoinLobsterThe only MCP server with live whale trades across 15 exchanges plus on-chain DEX flow. Smart Money Radar, real liquidations and outcome-scored signals. No API key required.
Comments