mup

MUP — Model UI Protocol

繁體中文

将交互式 UI 带入大模型聊天，让每个人都能体验 Agentic AI，而不只是开发者。

当前版本：0.2.11 | 协议：mup/2026-03-17

演示

幻灯片 — AI 实时制作演示文稿

Claude 通过函数调用创建完整的幻灯片，包含图表、表格和主题。

PDF 转演示文稿 — AI 阅读论文并进行演示

Claude 从 PDF 中阅读 AlexNet 论文，记录 Markdown 笔记，通过人机协作捕获图片，制作包含图表和表格的 19 页演示文稿，然后在全新的面板内阅读模式中逐页演示——全程实时讲解。

音效板 — AI 从零创作曲目

16 种由浏览器合成的乐器，无需采样。Claude 逐层创作一首电音摇摆曲目，并通过事件驱动的讲解与每次段落切换同步。

---

什么是 MUP？

MUP 是一种存在于大模型聊天界面中的交互式 UI 组件。

它将可视化界面与可调用函数组合在一起。用户通过点击按钮来操作；大模型通过函数调用来操作。双方都能实时看到彼此的操作。

最简单的 MUP 是一个 .html 文件——无需构建步骤、无需框架、无需 SDK。

为什么？

Agentic AI 功能强大，但如今它仍受限于文本命令和开发者工具。大多数人都无法体验它。

MUP 改变了这一点。它将可点击的可视化 UI 直接放进聊天中，让任何人无需编写任何提示词，就能使用 Agentic AI 的能力。

	传统聊天	使用 MUP
用户交互	输入文本命令	点击按钮、拖动滑块、查看实时画面
工具结果	对用户隐藏，只有大模型能看到	双方都能查看和交互
适用人群	知道正确提示词的高级用户	任何人

核心理念

• 共享函数。 函数既可以由大模型调用（作为工具），也可以由用户触发（通过 UI）。双方通过同一段代码操作同一状态。
• 大模型作为协调者。 MUP 之间不会相互通信。大模型读取输出，并决定下一步操作。
• 只需 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 — 任务进度跟踪
• Chess — 棋盘和吉祥物演示，包含基本移动规则（未实现将军／将死和吃过路兵）
• 更多示例见 archive/examples/（游戏、效率工具等）

专注开发

如需与 Claude 迭代构建单个 MUP（编辑 .html → Chrome 热重载 → 用户交互 → channel 推送回 Claude → 重复），请参阅 mup-mini-mcp-server——这是一个脚手架式的姊妹项目，只加载一个 MUP，并仅提供基础功能：热重载、WebSocket 桥接和 channel 推送。没有目录、没有网格，也没有其他附加功能。

文档

• 规范 — 协议定义：清单、函数、生命周期、错误处理
• 设计理念 — MUP 为何如此设计，以及我们有意省略的内容
• 示例 — 示例 MUP 及演示说明

安装

npm（推荐）

npm install -g mup-mcp-server

或直接运行：

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

也可在 MCP Server Registry 中获取。

从源代码安装

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

开发

需要 Node.js 22.13 或更高版本。在仓库根目录运行：

npm run setup  # install and build both servers from their lockfiles
npm test       # build, test both servers, and check MUP manifests/scripts

路径	用途
mup-mcp-server/	仪表板宿主、工作区、流水线、调度器
mup-mini-mcp-server/	单面板宿主、热重载、channel 事件
mups/	维护中的面板和演示
spec/	协议文档、架构、示例
scripts/	仓库验证
archive/	历史实现和示例

两个软件包均可独立安装。在任一软件包中运行 npm test 时，都会先重新构建该软件包。CI 会在 Node.js 22 上测试这两个软件包。有关修复内容和验证范围，请参阅审查报告。

两个宿主都绑定到 127.0.0.1，并接受本地 UI 的来源。请运行可信的 MUP：同源 iframe 设置支持浏览器存储和媒体 API，但并非不可信 HTML 的隔离边界。仪表板的工作区注册会授予对工作目录的访问权限。

入门

使用 Claude Code（推荐）

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

重启 Claude Code。浏览器窗口会在 http://localhost:3200 打开。使用 MUP 面板加载包含 MUP .html 文件的文件夹，或从内置的 Chat 小组件开始。

实时 channel 模式

MUP 可通过 channel 通知，将交互直接推送到 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)     │
      └─────────────────────────────┘

Star History

License

MIT