Marmo UI

Design-system knowledge for AI agents: live React component APIs, patterns, and generated-code validation.

От сообществаРаботаетБез входаГлобальныйБесплатноТолько чтение

Что умеет

  • 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
  • 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 na
  • 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

Какие данные видит

Нужен ли аккаунт

Не нужен: сервер работает без входа

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

Как подключить

Как подключить Marmo UI к Claude

Адрес сервера, который нужно вставить в настройках Claude:

https://marmoui--mahmoudilyan.run.tools

  1. Откройте Claude (сайт claude.ai или приложение для компьютера).
  2. Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
  3. Нажмите Добавить пользовательский коннектор (Add custom connector).
  4. Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
  5. В чате нажмите + → Коннекторы и включите новый коннектор.

Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

Авторизация

После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

Как подключить Marmo UI к ChatGPT

Адрес сервера, который нужно вставить в настройках ChatGPT:

https://marmoui--mahmoudilyan.run.tools

  1. Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
  2. Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
  3. Откройте Настройки → Коннекторы и нажмите Создать (Create).
  4. Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
  5. В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
  6. В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

Авторизация

При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

Как подключить Marmo UI к Cursor

Адрес сервера, который нужно вставить в настройках Cursor:

https://marmoui--mahmoudilyan.run.tools

Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

Вручную:

  1. В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
  2. Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
  3. Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

Авторизация

Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

Список инструментов сервера (14)

Технические названия из tools/list. Нужны только разработчикам.

get_knowledge_versionReturns 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_guidelinesMANDATORY 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_componentsList 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_componentsSearch @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_infoGet 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_patternGet 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_usageValidate 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_themeReturns 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_mdGenerate 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_componentValidate 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_configReturns ready-to-paste MCP configuration for Cursor, Claude Code, or Codex. Use on the Connect page or when setting up a new project.
deploy_prototypeRegister a prototype for sharing and get a share URL. Reviewers can leave inline comments via the Marmo overlay.
get_prototype_feedbackFetch inline comments from a shared prototype as structured data and Markdown. Pull into Cursor/Claude to iterate on feedback.