MUP — Model UI Protocol

繁體中文

Внесите интерактивный UI в чат с LLM — чтобы каждый мог испытать агентный ИИ, а не только разработчики.

Текущая версия: 0.2.11 | Протокол: mup/2026-03-17

Демо

Слайды — ИИ создаёт презентацию вживую

Claude создаёт полную презентацию с диаграммами, таблицами и темами — всё через вызовы функций.

PDF в презентацию — ИИ читает статью и представляет её

Claude читает статью об AlexNet из PDF, делает заметки в Markdown, захватывает рисунки при сотрудничестве человека и ИИ, создаёт презентацию из 19 слайдов с диаграммами и таблицами, затем показывает её слайд за слайдом в новом режиме чтения внутри панели — всё с живым озвучиванием.

Звуковой пэд — ИИ сочиняет трек с нуля

16 инструментов, синтезированных в браузере, ноль сэмплов. Claude сочиняет электро-свинг трек слой за слоем, с управляемым событиями повествованием, синхронизированным с каждым переходом секции.

Related MCP server: MCP Kkebi

Что такое MUP?

MUP — это интерактивный UI-компонент, который живёт внутри чат-интерфейса LLM.

Он объединяет визуальный интерфейс с вызываемыми функциями. Пользователь управляет им, нажимая кнопки; LLM управляет им через вызовы функций. Обе стороны видят действия друг друга в реальном времени.

Простейший MUP — это один файл .html — без этапа сборки, без фреймворка, без SDK.

Зачем?

Агентный ИИ мощен, но сегодня он заперт за текстовыми командами и инструментами разработчика. Большинство людей никогда не могут его испытать.

MUP меняет это. Он помещает кликабельный визуальный UI прямо в чат — так что любой может использовать агентные возможности, не написав ни одного промпта.

Ключевые идеи

• Общие функции. Функция может вызываться LLM (как инструмент) или запускаться пользователем (через UI). Обе стороны работают с одним и тем же состоянием через один и тот же код.

• LLM как оркестратор. MUP'ы не общаются друг с другом. LLM читает выходные данные и решает, что делать дальше.

• Просто HTML. Напишите манифест, зарегистрируйте функции, готово. Поставляйте один файл.

Доступные MUP

• Chat — Встроенный, всегда доступен

• Slides — Редактор презентаций с диаграммами, таблицами, темами, режимом чтения и экспортом (демо)

• PDF Reader — Просмотрщик PDF с извлечением текста со страниц и выделением/захватом областей

• Markdown — Рабочее пространство Markdown с аннотациями и управлением документами

• Sound Pad — 16-пэдовый синтезатор с секвенсором, громкостью на трек и системой событий (демо)

• Chord Pad — Клавиатура теории музыки с 5 синтезаторными голосами, аккордовыми последовательностями и воспроизведением мелодий

• Diagram — Диаграммы узлов и связей с автоматической раскладкой (блок-схемы, интеллект-карты, архитектуры) с несколькими алгоритмами раскладки

• Star Map — Интерактивная карта звёздного неба на основе местоположения с созвездиями, эклиптикой и Млечным Путём

• Voice — Синтез и распознавание речи (режим Jarvis)

• Notes — Рабочее пространство со стикерами, группами, стилями и экспортом

• Pixel Art — Пиксельный холст с фигурами, ASCII-паттернами, заливками и экспортом в PNG

• Timer — Таймер обратного отсчёта / секундомер с завершением по событиям

• Progress — Отслеживание прогресса задач

• Больше примеров в archive/examples/ (игры, продуктивность и т.д.)

Сфокусированная разработка

Для итеративной разработки одного MUP с помощью Claude (редактируйте .html → Chrome горячо перезагружает → пользователь взаимодействует → канал отправляет обратно в Claude → повторяйте), смотрите mup-mini-mcp-server — родственный проект в стиле каркаса, который загружает ровно один MUP и предоставляет только инфраструктуру: горячую перезагрузку, WebSocket-мост и отправку по каналу. Никакого каталога, сетки или лишнего.

Документация

• Спецификация — Определение протокола: манифест, функции, жизненный цикл, обработка ошибок

• Философия дизайна — Почему MUP спроектирован так, и что мы намеренно опустили

• Примеры — Примеры MUP с разбором

Установка

npm (рекомендуется)

npm install -g mup-mcp-server

Или запустите напрямую:

npx mup-mcp-server --mups-dir ./my-mups

Также доступен в реестре MCP-серверов.

Из исходников

git clone https://github.com/Ricky610329/mup.git
cd mup/mup-mcp-server
npm install && npm run build

Начало работы

С Claude Code (рекомендуется)

claude mcp add --transport stdio --scope user mup -- npx mup-mcp-server

Перезапустите Claude Code. Откроется окно браузера по адресу http://localhost:3200. Используйте панель MUPs, чтобы загрузить папку с MUP-файлами .html, или начните со встроенного виджета Chat.

Режим реального времени по каналу

MUP'ы могут отправлять взаимодействия прямо в разговор Claude через уведомления канала. Чтобы включить:

claude --dangerously-load-development-channels server:mup

Это позволяет MUP'ам доставлять действия пользователя в Claude в реальном времени. Без этого флага все функции MUP продолжают работать — взаимодействия просто доставляются через опрос вместо отправки.

С Claude Desktop

Добавьте в ваш claude_desktop_config.json:

{
  "mcpServers": {
    "mup": {
      "command": "npx",
      "args": ["mup-mcp-server"]
    }
  }
}

Быстрый пример

<script type="application/mup-manifest">
{
  "name": "Counter",
  "description": "A counter. User clicks +/-, LLM can set or read the value.",
  "functions": [
    {
      "name": "setCount",
      "description": "Set the counter to a specific value",
      "inputSchema": {
        "type": "object",
        "properties": { "value": { "type": "number" } },
        "required": ["value"]
      }
    },
    {
      "name": "getCount",
      "description": "Get the current counter value",
      "inputSchema": { "type": "object", "properties": {} }
    }
  ]
}
</script>

Поместите это в MUP-совместимый хост, и оно заработает.

Архитектура

┌──────────────────────────────────────────┐
│             MUP (.html file)             │
│        manifest + UI + functions         │
└──────────────────┬───────────────────────┘
                   │ loaded by
                   ▼
            ┌──────────────┐
            │  MCP Server  │
            │ (Claude Code │
            │  / Desktop)  │
            └──────┬───────┘
                   │ WebSocket
                   ▼
      ┌─────────────────────────────┐
      │        Browser Panel        │
      │  (MUP grid + Chat widget   │
      │   + workspace manager)     │
      └─────────────────────────────┘

История звёзд

Лицензия

MIT