Marmo Ui

Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "marmo-ui": {
      "command": "npx",
      "args": [
        "-y",
        "marmoui"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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

Terminal

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."

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.

One command — npx marmoui init — wires Claude Code, Codex, Cursor and Gemini CLI to the Marmo MCP

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.

Light	Dark

Free vs Pro

	Free	Pro — $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

Code

├── 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:

server.ts

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.

bash

git clone git@github.com:mahmoudilyan/marmoui.git
cd marmo-ui
pnpm install
pnpm dev            # UI package + docs site (localhost:3002)

Command	Description
`pnpm dev:ui`	Develop the UI package only
`pnpm build`	Build all packages and apps
`pnpm lint`	Run ESLint across the monorepo
`pnpm type-check`	Run TypeScript type checking
`pnpm changeset`	Add 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.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Marmo Ui

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "marmo-ui": { "command": "npx", "args": ["-y", "marmo-ui"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/marmo-ui?style=directory)](https://allmcps.com/mcp/marmo-ui)

HTML Embed

<a href="https://allmcps.com/mcp/marmo-ui"><img src="https://allmcps.com/api/badge/marmo-ui?style=directory" alt="Marmo Ui on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

40Quality signal: Fair · 40/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity4/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Marmo Ui →Install in Claude Desktop Install in Cursor Install in VS Code

Marmo Ui

Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "marmo-ui": {
      "command": "npx",
      "args": [
        "-y",
        "marmoui"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

Marmo UI

Platform, docs & pricing → marmoui.com

Terminal

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."

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.

One command — npx marmoui init — wires Claude Code, Codex, Cursor and Gemini CLI to the Marmo MCP

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.

Light	Dark

Free vs Pro

	Free	Pro — $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		✓

Monorepo structure

Code

├── 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:

server.ts

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.

bash

git clone git@github.com:mahmoudilyan/marmoui.git
cd marmo-ui
pnpm install
pnpm dev            # UI package + docs site (localhost:3002)

Command	Description
`pnpm dev:ui`	Develop the UI package only
`pnpm build`	Build all packages and apps
`pnpm lint`	Run ESLint across the monorepo
`pnpm type-check`	Run TypeScript type checking
`pnpm changeset`	Add 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.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Marmo Ui

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "marmo-ui": { "command": "npx", "args": ["-y", "marmo-ui"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/marmo-ui?style=directory)](https://allmcps.com/mcp/marmo-ui)

HTML Embed

<a href="https://allmcps.com/mcp/marmo-ui"><img src="https://allmcps.com/api/badge/marmo-ui?style=directory" alt="Marmo Ui on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

40Quality signal: Fair · 40/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity4/15

Community engagement0/10

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Marmo Ui →Install in Claude Desktop Install in Cursor Install in VS Code

Marmo Ui

Quick Install

Client Config & Setup

Documentation Overview

Marmo UI

How it works

Light and dark from one token set

Free vs Pro

Monorepo structure

Using @marmoui/ui directly

Development

Contributing

License

Related MCP Servers

Reviews

Frequently Asked Questions about Marmo Ui

AllMCPs Directory Badge

Technical Specs & Signals

Feature Your MCP Server

Own this project?

Share & Embed

Explore more

Marmo Ui

Quick Install

Client Config & Setup

Documentation Overview

Marmo UI

How it works

Light and dark from one token set

Free vs Pro

Monorepo structure

Using @marmoui/ui directly

Development

Contributing

License

Related MCP Servers

Reviews

Frequently Asked Questions about Marmo Ui

AllMCPs Directory Badge

Technical Specs & Signals

Feature Your MCP Server

Own this project?

Share & Embed

Explore more

Using `@marmoui/ui` directly

Using `@marmoui/ui` directly