Marmoui

by mahmoudilyan

303 downloads

Not rated

GitHub Website

About

Design-system knowledge for AI agents: live React component APIs, patterns, and generated-code validation. Agents build real dashboards, not slop. Free.

Details

Author: mahmoudilyan
Downloads: 303
Categories: Developer Tools, Design

- 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

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Marmoui

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

From the repository

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.

`get_knowledge_version`

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

`get_design_guidelines`

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_components`

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_components`

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_component_info`

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_pattern`

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.

`review_generated_code`

⚠️ 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_component_usage`

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.

`get_tenant_theme`

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.

`get_design_md`

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.

`generate_component`

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.

`get_agent_connect_config`

Returns ready-to-paste MCP configuration for Cursor, Claude Code, or Codex. Use on the Connect page or when setting up a new project.

`deploy_prototype`

`get_prototype_feedback`

Fetch inline comments from a shared prototype as structured data and Markdown. Pull into Cursor/Claude to iterate on feedback.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "marmoui": {
            "marmo-ui": {
                "type": "http",
                "url": "https://mcp.marmoui.com/mcp"
            }
        }
    }
}

McpServers

{
    "marmo-ui": {
        "type": "http",
        "url": "https://mcp.marmoui.com/mcp"
    }
}

Marmo UI is an MCP server + open-source React design system (@marmoui/ui,
MIT). Connected agents read live component APIs and composition patterns and
validate their generated code with review_generated_code — catching wrong
imports and invented props before the user sees them. Anonymous free tier
(no signup, npx marmoui init); Pro adds on-brand generation from a
DESIGN.md and a hosted team design-system site.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

get_knowledge_version

get_design_guidelines

list_components

search_components

get_component_info

get_pattern

review_generated_code

validate_component_usage

get_tenant_theme

get_design_md

generate_component

get_agent_connect_config

deploy_prototype

get_prototype_feedback

Claude Desktop / Cursor

McpServers

Install

More like this

Sentry

Github

Git

GitLab

Context 7

Playwright

`get_knowledge_version`

`get_design_guidelines`

`list_components`

`search_components`

`get_component_info`

`get_pattern`

`review_generated_code`

`validate_component_usage`

`get_tenant_theme`

`get_design_md`

`generate_component`

`get_agent_connect_config`

`deploy_prototype`

`get_prototype_feedback`