MUP — 模型界面协议

繁體中文

将交互式界面带入 LLM 对话——让每个人都能体验智能体 AI，而不仅仅是开发者。

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

演示

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

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

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

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

音板 — AI 从零开始创作一首乐曲

16 种浏览器合成乐器，零采样。Claude 逐层创作一首电子摇摆乐，事件驱动的讲解与每个段落转换同步。

Related MCP server: MCP Kkebi

什么是 MUP？

MUP 是驻留在 LLM 聊天界面中的交互式 UI 组件。

它将可视化界面与可调用函数捆绑在一起。用户通过点击按钮操作它；LLM 通过函数调用操作它。双方都能实时看到对方的操作。

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

为什么？

智能体 AI 很强大，但如今它被困在文本命令和开发者工具背后。大多数人从未体验过它。

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/（游戏、效率工具等）

聚焦开发

如需使用 Claude 迭代构建单个 MUP（编辑 .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 Server Registry 上获取。

从源码构建

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)     │
      └─────────────────────────────┘

Star 历史

许可证

MIT