Mlola UI

Mlola UI components, tokens and design rules for coding agents, with a markup checker

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

Что умеет

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

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

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

    Mlola UI components, tokens and design rules for coding agents, with a markup checker

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

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

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

    https://ui.mlola.com/mcp

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

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

    Авторизация

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

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

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

    https://ui.mlola.com/mcp

    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 откроет окно входа в сервис. Войдите и подтвердите доступ.

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

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

    https://ui.mlola.com/mcp

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

    Вручную:

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

    Авторизация

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

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

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

    get_design_rulesThe rules for building UI with Mlola: compose first, color by role, measure with the scales, shared state words, touch and focus. Read once before writing UI.
    search_componentsFind components, blocks, pages and templates by what they do (for example 'date range', 'chat input', 'pricing'). Returns name, tier (free or Mlola Pro) and a one-line description.
    get_componentEverything needed to use one item: import, every prop with fixed values (variant, tone, size, side…) and its default, the classes it styles and the data-* values each reacts to, dependencies and the install command. Set include_source to read a free component's source.
    get_tokensThe --ml-* tokens grouped by purpose (planes and ink, color roles, spacing, type, density, shape, depth, motion, layers…). Filter with a group name or part of a token name.
    check_markupChecks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, misuse of data-theme or data-mode, and in style attributes, <style> blocks and utility classes (bg-[#fafafa]) hand-written colors, spacing written by hand instead of the --ml-space-* scale, overridden theme tokens and text faded with opacity. Each issue names its line. Run it on markup you wrote before finishing: pass the whole page or file, <style> blocks included, not an excerpt, since it only checks what it is given.
    get_render_catalogThe components an agent may compose at runtime with Mlola Render, as A2UI v0.9 messages: each component's props and allowed values, how surfaces, data binding and actions work, and complete examples. Read once before composing a surface. format "schema" returns the A2UI catalog (JSON Schema) instead.
    check_renderChecks A2UI messages (createSurface, updateComponents, updateDataModel, deleteSurface) against the Mlola Render catalog before they render: components and props that do not exist, values a component does not offer, colors or styles set by hand, fields and controls without a name, a missing root, children that do not exist or form a loop, headings that skip a level, values outside a range. Each error names its JSON Pointer path and the fix. Pass every message of the surface: one object, an array, or JSON Lines.
    render_uiShows an interface in the conversation: a form, a status card, a table of results. Pass A2UI messages composed from the Mlola Render catalog (read get_render_catalog first); they are checked, and drawn with Mlola components where the host shows MCP Apps. When the person presses a button, their next message carries the A2UI action with what they entered. Where the host shows no apps, this answers with the check's report.
    get_install_commandHow to set Mlola up: the commands to run in a project to add components, blocks, pages or templates (with the license step for Mlola Pro items), and the stylesheet link and script for a page with no build step. Leave names out for the setup alone.