marmo-ui

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

사용해야 할까요

품질 및 안전성

A
설명 품질
100%
스키마 완전성
86%
이름 품질
99%
오염 위험
100%
권한 일치
100%
프로토콜 준수
100%

도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.

컨텍스트 비용

~2,206토큰 (도구 정의)
~951 B일반적인 응답 크기
중간 정도의 주의 영향 (128k 컨텍스트의 1.72%)

이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.

설치

원클릭 설치

`claude_desktop_config.json` 파일에 다음을 추가하세요:

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

원격 엔드포인트

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

할 수 있는 일

도구 목록

도구 (14)

🟢 읽기 전용🟡 쓰기🔴 삭제⚪ 알 수 없음
🟢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.

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

입력 스키마

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

커뮤니티

이 서버 평가하기

증거

최근 관측

검증됨버전이 기록되지 않음도구 14개
검증됨버전이 기록되지 않음도구 14개