marmo-ui

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

¿Debería usar esto?

Calidad y seguridad

A
Calidad de la descripción
100%
Integridad del esquema
86%
Calidad de los nombres
99%
Riesgo de envenenamiento
100%
Coincidencia de permisos
100%
Cumplimiento del protocolo
100%

Basado en el análisis automatizado de las definiciones de herramientas y el cumplimiento del protocolo.

Costo de contexto

~2,206Tokens (definiciones de herramientas)
~951 BTamaño de respuesta típico
Impacto moderado en la atención (1.72% del contexto de 128k)

Este es el número aproximado de tokens que se consumen cada vez que las herramientas del servidor se cargan en el contexto de un modelo. Los recuentos más altos reducen la atención disponible para otras tareas.

Instalar

Instalación con un clic

Agrega esto a tu archivo `claude_desktop_config.json`:

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

Puntos de conexión remotos

https://mcp.marmoui.com/mcpstreamable-http

Qué puede hacer

Inventario de herramientas

Herramientas (14)

🟢 Solo lectura🟡 Escritura🔴 Eliminación⚪ Desconocido
🟢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.

Esquema de entrada

{
  "type": "object",
  "properties": {}
}
🟢get_design_guidelines(topic, iconLibrary)

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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "topic": {
      "type": "string",
      "enum": [
        "all",
        "imports",
        "styling",
        "icons",
        "patterns",
        "accessibility"
      ],
      "description": "Specific guideline topic (default: \"all\")"
    },
    "iconLibrary": {
      "type": "string",
      "enum": [
        "phosphor",
        "material",
        "lucide",
        "tabler",
        "heroicons",
        "feather"
      ],
      "description": "Icon library the agent should import from. Default: \"phosphor\". Ask the user which library they want before writing UI code; if they have no preference, omit this and the default (Phosphor) applies. Supported: phosphor, material, lucide, tabler, heroicons, feather."
    }
  }
}
🟢list_components(category, status)

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

Esquema de entrada

{
  "type": "object",
  "properties": {
    "category": {
      "type": "string",
      "description": "Filter by category (e.g., \"Components\", \"Layout\")"
    },
    "status": {
      "type": "string",
      "description": "Filter by status (e.g., \"stable\", \"beta\")"
    }
  }
}
🟢search_components(query, limit)

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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "query": {
      "type": "string",
      "description": "Search query — matches against component names, descriptions, categories, and prop names"
    },
    "limit": {
      "type": "number",
      "description": "Maximum results to return (default: 10)"
    }
  },
  "required": [
    "query"
  ]
}
🟢get_component_info(componentName)

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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "componentName": {
      "type": "string",
      "description": "Name of the component to get information about (e.g. \"Button\", \"Card\", \"Input\")"
    }
  },
  "required": [
    "componentName"
  ]
}
🟢get_pattern(patternId, iconLibrary)

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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "patternId": {
      "type": "string",
      "description": "Pattern identifier, e.g. \"app-shell\", \"data-table-with-filters\", \"confirmation-dialog\", \"dialogs-for-other-actions\". Omit to list all available patterns."
    },
    "iconLibrary": {
      "type": "string",
      "enum": [
        "phosphor",
        "material",
        "lucide",
        "tabler",
        "heroicons",
        "feather"
      ],
      "description": "Icon library the caller is using. Default: \"phosphor\". The returned usage note tells the agent which icon import source to use, and the inline validation enforces it. Supported: phosphor, material, lucide, tabler, heroicons, feather."
    }
  }
}
🟢review_generated_code(code, context, iconLibrary)

⚠️ 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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "code": {
      "type": "string",
      "description": "The complete TSX/JSX code you just generated. Must import from @marmoui/ui."
    },
    "context": {
      "type": "string",
      "description": "Optional: describe what the code is supposed to do (e.g. \"settings page with tabs\"). Helps produce more targeted feedback."
    },
    "iconLibrary": {
      "type": "string",
      "enum": [
        "phosphor",
        "material",
        "lucide",
        "tabler",
        "heroicons",
        "feather"
      ],
      "description": "Icon library the code must import icons from. Default: \"phosphor\". Pass the SAME value you passed to get_design_guidelines. When set, imports from any other icon library are reported as ERRORS. Supported: phosphor, material, lucide, tabler, heroicons, feather."
    }
  },
  "required": [
    "code"
  ]
}
🟡validate_component_usage(code, iconLibrary)

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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "code": {
      "type": "string",
      "description": "TSX/JSX code snippet to validate against @marmoui/ui"
    },
    "iconLibrary": {
      "type": "string",
      "enum": [
        "phosphor",
        "material",
        "lucide",
        "tabler",
        "heroicons",
        "feather"
      ],
      "description": "Optional: icon library the code must import icons from. Default: \"phosphor\". When set, imports from any other icon library are reported as errors. Supported: phosphor, material, lucide, tabler, heroicons, feather."
    }
  },
  "required": [
    "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.

Esquema de entrada

{
  "type": "object",
  "properties": {}
}
🟢get_design_md(format)

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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "format": {
      "type": "string",
      "enum": [
        "markdown",
        "json"
      ],
      "default": "markdown",
      "description": "Output format. \"markdown\" returns the DESIGN.md string; \"json\" returns structured data."
    }
  }
}
🟡generate_component(componentName, description, code, save)

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.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "componentName": {
      "type": "string",
      "description": "PascalCase component name, e.g. CustomStatCard"
    },
    "description": {
      "type": "string",
      "description": "What the component should do"
    },
    "code": {
      "type": "string",
      "description": "Generated TSX code using @marmoui/ui primitives"
    },
    "save": {
      "type": "boolean",
      "description": "Save as tenant component override if validation passes"
    }
  },
  "required": [
    "componentName",
    "description",
    "code"
  ]
}
🟢get_agent_connect_config(client)

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

Esquema de entrada

{
  "type": "object",
  "properties": {
    "client": {
      "type": "string",
      "enum": [
        "cursor",
        "claude",
        "codex"
      ],
      "description": "Target agent client. Omit to get all configs."
    }
  }
}
🟡deploy_prototype(prototypeId, title, deployUrl)

Register a prototype for sharing and get a share URL. Reviewers can leave inline comments via the Marmo overlay.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "prototypeId": {
      "type": "string",
      "description": "Unique prototype identifier (slug)"
    },
    "title": {
      "type": "string",
      "description": "Human-readable prototype title"
    },
    "deployUrl": {
      "type": "string",
      "format": "uri",
      "description": "Deployed URL if already live"
    }
  },
  "required": [
    "prototypeId"
  ]
}
🟢get_prototype_feedback(prototypeId, includeResolved)

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

Esquema de entrada

{
  "type": "object",
  "properties": {
    "prototypeId": {
      "type": "string",
      "description": "Prototype ID/slug to fetch feedback for"
    },
    "includeResolved": {
      "type": "boolean",
      "default": false
    }
  },
  "required": [
    "prototypeId"
  ]
}

Prompts recomendados

search_research
Search for information about [topic] using marmo-ui
Herramientas esperadas: search_components
find_specific
Find [specific item] using marmo-ui
Herramientas esperadas: search_components
retrieve_data
Get details about [item] from marmo-ui
Herramientas esperadas: get_knowledge_version
fetch_info
Fetch [information type] using marmo-ui
Herramientas esperadas: get_knowledge_version
list_items
List all [items] available in marmo-ui
Herramientas esperadas: list_components

Comunidad

Califica este servidor

Evidencia

Observaciones recientes

verificadoversión no registrada14 herramientas
verificadoversión no registrada14 herramientas