{
  "markdown": "# MUP — Model UI Protocol\n\n[![GitHub Stars](https://img.shields.io/github/stars/Ricky610329/mup?style=social)](https://github.com/Ricky610329/mup/stargazers)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n\n[繁體中文](README.zh-TW.md)\n\n> Bring interactive UI into LLM chat — so anyone can experience agentic AI, not just developers.\n\nCurrent version: 0.2.11 | Protocol: `mup/2026-03-17`\n\n## Demos\n\n### Slides — AI builds a presentation live\n\n[![Slides Demo](https://img.youtube.com/vi/GKeDc1DMLH0/maxresdefault.jpg)](https://youtu.be/GKeDc1DMLH0)\n\nClaude creates a full slide deck with charts, tables, and themes — all through function calls.\n\n### PDF to Presentation — AI reads a paper and presents it\n\n[![PDF to Presentation Demo](https://img.youtube.com/vi/GviEqEq88b4/maxresdefault.jpg)](https://youtu.be/GviEqEq88b4)\n\nClaude reads the AlexNet paper from a PDF, takes Markdown notes, captures figures with human-AI collaboration, builds a 19-slide presentation with charts and tables, then presents it slide by slide in the new in-panel reading mode — all narrated live.\n\n### Sound Pad — AI composes a track from scratch\n\n[![Sound Pad Demo](https://img.youtube.com/vi/e5JqRT9t5vU/maxresdefault.jpg)](https://youtu.be/e5JqRT9t5vU)\n\n16 browser-synthesized instruments, zero samples. Claude composes an electro swing track layer by layer, with event-driven narration synced to each section transition.\n\n---\n\n## What is MUP?\n\nA **MUP** is an interactive UI component that lives inside an LLM chat interface.\n\nIt bundles a visual interface with callable functions. The user operates it by clicking buttons; the LLM operates it through function calls. Both sides see each other's actions in real time.\n\nThe simplest MUP is a single `.html` file — no build step, no framework, no SDK.\n\n## Why?\n\nAgentic AI is powerful, but today it's trapped behind text commands and developer tools. Most people never get to experience it.\n\nMUP changes this. It puts clickable, visual UI right inside the chat — so anyone can use agentic capabilities without writing a single prompt.\n\n| | Traditional Chat | With MUP |\n|---|---|---|\n| **User interaction** | Type text commands | Click buttons, drag sliders, see live visuals |\n| **Tool results** | Hidden from user, only the LLM sees them | Visible and interactive for both sides |\n| **Who can use it** | Power users who know the right prompts | Anyone |\n\n## Key Ideas\n\n- **Shared functions.** A function can be called by the LLM (as a tool) or triggered by the user (via UI). Both sides operate on the same state through the same code.\n- **LLM as orchestrator.** MUPs don't talk to each other. The LLM reads outputs and decides what to do next.\n- **Just HTML.** Write a manifest, register your functions, done. Ship a single file.\n\n## Available MUPs\n\n- **Chat** — Built-in, always available\n- **Slides** — Presentation editor with charts, tables, themes, reading mode, and export ([demo](https://youtu.be/GKeDc1DMLH0))\n- **PDF Reader** — PDF viewer with page text extraction and region selection/capture\n- **Markdown** — Markdown workspace with annotations and document management\n- **Sound Pad** — 16-pad synthesizer with sequencer, per-track volume, and event system ([demo](https://youtu.be/e5JqRT9t5vU))\n- **Chord Pad** — Music theory keyboard with 5 synth voices, chord progressions, and melody playback\n- **Diagram** — Auto-layouted node-and-edge diagrams (flowcharts, mind maps, architectures) with multiple layout algorithms\n- **Star Map** — Location-based interactive star map with constellations, ecliptic, and Milky Way\n- **Voice** — Speech synthesis and recognition (Jarvis mode)\n- **Notes** — Sticky-note workspace with groups, styles, and export\n- **Pixel Art** — Pixel canvas with shapes, ASCII patterns, fills, and PNG export\n- **Timer** — Countdown timer / stopwatch with event-driven completion\n- **Progress** — Task progress tracking\n- More examples in [`archive/examples/`](archive/examples/) (games, productivity, etc.)\n\n## Focused Development\n\nFor iteratively building a single MUP with Claude (edit `.html` → Chrome hot reloads → user interacts → channel pushes back to Claude → repeat), see [`mup-mini-mcp-server`](mup-mini-mcp-server/) — a scaffolding-style sibling that loads exactly one MUP and provides only the plumbing: hot reload, WebSocket bridge, and channel push. No catalog, no grid, no extras.\n\n## Docs\n\n- **[Spec](spec/MUP-Spec.md)** — Protocol definition: manifest, functions, lifecycle, error handling\n- **[Design Philosophy](spec/MUP-Philosophy.md)** — Why MUP is designed this way, and what we intentionally left out\n- **[Examples](spec/MUP-Examples.md)** — Example MUPs with walkthroughs\n\n## Install\n\n### npm (recommended)\n\n```bash\nnpm install -g mup-mcp-server\n```\n\nOr run directly:\n\n```bash\nnpx mup-mcp-server --mups-dir ./my-mups\n```\n\nAlso available on the [MCP Server Registry](https://registry.modelcontextprotocol.io/).\n\n### From source\n\n```bash\ngit clone https://github.com/Ricky610329/mup.git\ncd mup/mup-mcp-server\nnpm install && npm run build\n```\n\n## Getting Started\n\n### With Claude Code (recommended)\n\n```bash\nclaude mcp add --transport stdio --scope user mup -- npx mup-mcp-server\n```\n\nRestart Claude Code. A browser window opens at `http://localhost:3200`. Use the MUPs panel to load a folder of MUP `.html` files, or start with the built-in Chat widget.\n\n#### Real-time channel mode\n\nMUPs can push interactions directly into Claude's conversation via channel notifications. To enable:\n\n```bash\nclaude --dangerously-load-development-channels server:mup\n```\n\nThis lets MUPs deliver user actions to Claude in real time. Without this flag, all MUP features still work — interactions are just delivered via polling instead of push.\n\n### With Claude Desktop\n\nAdd to your `claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"mup\": {\n      \"command\": \"npx\",\n      \"args\": [\"mup-mcp-server\"]\n    }\n  }\n}\n```\n\n## Quick Example\n\n```html\n<script type=\"application/mup-manifest\">\n{\n  \"name\": \"Counter\",\n  \"description\": \"A counter. User clicks +/-, LLM can set or read the value.\",\n  \"functions\": [\n    {\n      \"name\": \"setCount\",\n      \"description\": \"Set the counter to a specific value\",\n      \"inputSchema\": {\n        \"type\": \"object\",\n        \"properties\": { \"value\": { \"type\": \"number\" } },\n        \"required\": [\"value\"]\n      }\n    },\n    {\n      \"name\": \"getCount\",\n      \"description\": \"Get the current counter value\",\n      \"inputSchema\": { \"type\": \"object\", \"properties\": {} }\n    }\n  ]\n}\n</script>\n```\n\nDrop this into a MUP-compatible host, and it works.\n\n## Architecture\n\n```\n┌──────────────────────────────────────────┐\n│             MUP (.html file)             │\n│        manifest + UI + functions         │\n└──────────────────┬───────────────────────┘\n                   │ loaded by\n                   ▼\n            ┌──────────────┐\n            │  MCP Server  │\n            │ (Claude Code │\n            │  / Desktop)  │\n            └──────┬───────┘\n                   │ WebSocket\n                   ▼\n      ┌─────────────────────────────┐\n      │        Browser Panel        │\n      │  (MUP grid + Chat widget   │\n      │   + workspace manager)     │\n      └─────────────────────────────┘\n```\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/image?repos=Ricky610329/mup&type=date&legend=top-left)](https://www.star-history.com/?repos=Ricky610329%2Fmup&type=date&legend=top-left)\n\n## License\n\n[MIT](LICENSE)\n",
  "bytes": 7459,
  "sha": "bdb8310c6944f26547b6274094b4565967390c89652c0a6d7e225dd1fb05bbe6",
  "repo_slug": "ricky610329/mup",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_ricky610329_mup_e576d078/readme"
}