PluginBench
MCP Server
Active
MIT

io.github.mahmoudilyan/marmo-ui MCP Server

io.github.mahmoudilyan/marmo-ui

Live React design-system APIs for AI agents to build production UIs with real components, not hallucinations.

RepositoryRegistry

What is the io.github.mahmoudilyan/marmo-ui MCP server?

The Marmo UI MCP server is a hosted knowledge server that gives AI agents (Claude, Cursor, Gemini) access to live React component APIs, composition patterns, and code validation. Instead of guessing from training data, agents read real component specs and validate generated code before delivery, eliminating invented props and wrong imports.

Marmo UI connects your AI agent to a production-grade React design system with live component APIs and validation. Agents can build dashboards, forms, and app shells using real components with correct props and imports, with optional on-brand generation via a DESIGN.md file. The free tier ensures correctness; Pro ($9.99/mo) adds on-brand styling, composition patterns, and hosted design-system pages.

How to install io.github.mahmoudilyan/marmo-ui

Copy-paste configuration for popular MCP clients.

transport: http
Config generated by PluginBench — verify against the source before use.
~/.cursor/mcp.json
{
  "mcpServers": {
    "marmo-ui": {
      "url": "https://mcp.marmoui.com/mcp"
    }
  }
}

Tools & capabilities

Tools this server exposes to the agent.

  • review_generated_code — Validates generated React code against live component APIs, catching wrong imports and invented props before output
  • get_component_apis — Retrieves live component specifications, props, and usage patterns from the Marmo UI design system
  • get_composition_patterns — Provides pre-built composition patterns (app shells, dashboards, forms) for agents to reference and extend

Use cases

  • Build production dashboards and data-driven UIs with validated React components
  • Generate on-brand app interfaces by uploading a DESIGN.md with your colors, typography, and token overrides
  • Create forms, tables, and charts with correct component props without hallucinated APIs
  • Validate AI-generated code in real time to catch component misuse before it reaches your codebase
  • Maintain consistent light and dark theme support across all generated interfaces

io.github.mahmoudilyan/marmo-ui MCP server FAQ

What is Marmo UI?

Marmo UI is a React design system with an MCP server that gives AI agents access to live component APIs and validation. Instead of hallucinating component props, agents read real specs and validate code before delivery.

Is Marmo UI free?

Yes. The free tier includes the React component library (@marmoui/ui, MIT), core MCP with live props and validation, and docs. Pro ($9.99/mo, 14-day trial) adds on-brand generation, composition patterns, and hosted design-system pages.

How do I connect it to Claude or Cursor?

Run `npx marmoui init` to wire your agent to the hosted MCP. For Claude Code, use `/plugin marketplace add mahmoudilyan/marmoui` then `/plugin install marmo-ui@marmoui-plugins`.

Do I need an account?

No account required for the free tier. Pro features require signing up at marmoui.com/connect to upload your DESIGN.md and get a personal MCP token.

Can I use @marmoui/ui without an agent?

Yes. @marmoui/ui is a standalone React 19 component library (MIT licensed) with tables, charts, forms, and app shells. Install via npm and import components directly.

Where does the generated code live?

All code generation happens in your agent with your LLM tokens. The code lands in your repository and you own it fully.

README (reference)

Source of truth, from the repository.

Marmo UI

The AI agentic designer. Point the agent you already use — Claude Code, Codex, Cursor, Gemini CLI — at Marmo and it builds production dashboards and apps in minutes: real components, real props, your own style. No AI slop.

Platform, docs & pricing → marmoui.com

npx marmoui init     # connect your agent (free, no account)
npm i @marmoui/ui    # the component library (MIT)

Then just ask your agent: "Build a billing dashboard with Marmo UI."

<!-- TODO: demo video goes here -->

The Marmo UI component library — data tables, charts, KPI cards, badges and more, rendered live at marmoui.com/components

How it works

  • @marmoui/ui — an open-source React 19 design system (MIT, public npm). Tables, charts, forms, app shells — everything a product UI needs, light + dark from one token set.
  • The Marmo MCP — a hosted knowledge server your agent connects to. Instead of guessing from training data, the agent reads live component APIs, composition patterns, and generation rules, and validates its output (review_generated_code) before reporting done. Wrong imports and invented props get caught and fixed before you ever see them.
  • Claude Code plugin — /plugin marketplace add mahmoudilyan/marmoui → /plugin install marmo-ui@marmoui-plugins. Bundles the MCP plus the marmo-ui skill and /marmo-ui:* commands (init, design-md, build) that enforce the find → generate → validate workflow.
<p align="center"> <img src=".github/assets/connect-agent.png" alt="One command — npx marmoui init — wires Claude Code, Codex, Cursor and Gemini CLI to the Marmo MCP" width="620"> </p>

Light and dark from one token set

Every component ships both themes off the same semantic tokens (bg, panel, ink, primary-*) — no parallel dark stylesheet, no hardcoded hex.

LightDark
<img src=".github/assets/docs-light.png" alt="Marmo UI docs, DataTable live preview in light theme"><img src=".github/assets/docs-dark.png" alt="The same DataTable preview in dark theme">

Free vs Pro

FreePro — $9.99/mo, 14-day free trial
React components (@marmoui/ui, MIT)✓✓
Core MCP — live props, validation, default Marmo styling✓✓
Docs, Figma library✓✓
On-brand generation — your DESIGN.md (colors, type, tokens, component overrides) drives every screen any connected agent generates✓
Composition patterns library (app shells, dashboards, forms)✓
Pro blocks, generated straight into your repo✓
Personal MCP token + hosted, brand-themed design-system page✓

Pro mode in one sentence: the free tier makes your agent correct; Pro makes it yours — run /marmo-ui:init (or write a DESIGN.md by hand), upload it at marmoui.com/connect, and every agent on your account generates UI in your brand instead of the Marmo defaults. Generation always happens in your agent with your LLM tokens; the code lands in your repo and you own it fully.

Monorepo structure

├── apps/
│   └── design-system-docs/    # marmoui.com — docs + marketing site
├── packages/
│   ├── ui/                    # @marmoui/ui — publishable component library
│   └── cli/                   # marmoui — npx marmoui init
└── tools/claude-plugin/       # Claude Code plugin + marketplace

The hosted MCP server and platform services live in a private repository; this repo talks to them only through the hosted MCP at mcp.marmoui.com.

Using @marmoui/ui directly

Works as a regular component library too — no agent required:

import '@marmoui/ui/style.css'; // once, in your app entry
import { Button, DataTable } from '@marmoui/ui';

React 19 + react-dom are peer dependencies. Component APIs and examples: marmoui.com/docs.

Development

Node 20+, pnpm 9.

git clone git@github.com:mahmoudilyan/marmoui.git
cd marmo-ui
pnpm install
pnpm dev            # UI package + docs site (localhost:3002)
CommandDescription
pnpm dev:uiDevelop the UI package only
pnpm buildBuild all packages and apps
pnpm lintRun ESLint across the monorepo
pnpm type-checkRun TypeScript type checking
pnpm changesetAdd a semver changeset

Contributing

See CONTRIBUTING.md — workflow, Conventional Commits (enforced by husky), and semver via Changesets.

License

MIT — see LICENSE. Components are free forever; a component that ships free never moves behind the paywall.

Related MCP servers

PAPassiv Web Tools logo

Passiv Web Tools

Active

Free web tools for AI agents: HTML to Markdown, compliance scan, page profile, security headers.

0
JavaScript
MIT
View repository →
IOio.github.mailercloud-com/mcp-server logo

io.github.mailercloud-com/mcp-server

AI tools for Mailercloud email marketing: campaigns, contacts, templates, sending & analytics.

View repository →
RORock's Apify Utility Actors logo

Rock's Apify Utility Actors

Active

Seven pay-per-event Apify Actors (PDF/CSV/links/sitemap/email/phone/VAT) as MCP tools.

0
MIT
View repository →
PIPillr, la donnée immobilière française logo

Pillr, la donnée immobilière française

Prix au m² communal, synthèse de marché et formalité d'urbanisme, sur données publiques françaises.

IOio.github.majiayu000/remem logo

io.github.majiayu000/remem

Active

Local-first automatic memory for Claude Code and Codex: capture, distill, and recall engineering decisions from SQLite.

25
Rust
MIT
View repository →
PEPerformance Co-Pilot logo

Performance Co-Pilot

Active

Query system performance metrics via MCP - CPU, memory, disk I/O, network, processes

0
Python
MIT
View repository →