MUP — Model UI Protocol

Bring interactive UI into LLM chat — so anyone can experience agentic AI, not just developers.

Current version: 0.2.11 | Protocol: mup/2026-03-17

Demos

Slides — AI builds a presentation live

Claude creates a full slide deck with charts, tables, and themes — all through function calls.

PDF to Presentation — AI reads a paper and presents it

Claude 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.

Sound Pad — AI composes a track from scratch

16 browser-synthesized instruments, zero samples. Claude composes an electro swing track layer by layer, with event-driven narration synced to each section transition.

What is MUP?

A MUP is an interactive UI component that lives inside an LLM chat interface.

It 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.

The simplest MUP is a single .html file — no build step, no framework, no SDK.

Why?

Agentic AI is powerful, but today it's trapped behind text commands and developer tools. Most people never get to experience it.

MUP changes this. It puts clickable, visual UI right inside the chat — so anyone can use agentic capabilities without writing a single prompt.

	Traditional Chat	With MUP
User interaction	Type text commands	Click buttons, drag sliders, see live visuals
Tool results	Hidden from user, only the LLM sees them	Visible and interactive for both sides
Who can use it	Power users who know the right prompts	Anyone

Key Ideas

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.
LLM as orchestrator. MUPs don't talk to each other. The LLM reads outputs and decides what to do next.
Just HTML. Write a manifest, register your functions, done. Ship a single file.

Available MUPs

Chat — Built-in, always available
Slides — Presentation editor with charts, tables, themes, reading mode, and export (demo)
PDF Reader — PDF viewer with page text extraction and region selection/capture
Markdown — Markdown workspace with annotations and document management
Sound Pad — 16-pad synthesizer with sequencer, per-track volume, and event system (demo)
Chord Pad — Music theory keyboard with 5 synth voices, chord progressions, and melody playback
Diagram — Auto-layouted node-and-edge diagrams (flowcharts, mind maps, architectures) with multiple layout algorithms
Star Map — Location-based interactive star map with constellations, ecliptic, and Milky Way
Voice — Speech synthesis and recognition (Jarvis mode)
Notes — Sticky-note workspace with groups, styles, and export
Pixel Art — Pixel canvas with shapes, ASCII patterns, fills, and PNG export
Timer — Countdown timer / stopwatch with event-driven completion
Progress — Task progress tracking
Chess — Board and mascot demo with basic movement rules (check/checkmate and en passant are not implemented)
More examples in archive/examples/ (games, productivity, etc.)

Focused Development

For 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 — 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.

Docs

Spec — Protocol definition: manifest, functions, lifecycle, error handling
Design Philosophy — Why MUP is designed this way, and what we intentionally left out
Examples — Example MUPs with walkthroughs

Install

npm (recommended)

Terminal

npm install -g mup-mcp-server

Or run directly:

Terminal

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

Also available on the MCP Server Registry.

From source

bash

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

Development

Requires Node.js 22.13 or newer. From the repository root:

Terminal

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

Path	Purpose
`mup-mcp-server/`	Dashboard host, workspace, pipelines, scheduler
`mup-mini-mcp-server/`	Single-panel host, hot reload, channel events
`mups/`	Maintained panels and demos
`spec/`	Protocol documents, schema, examples
`scripts/`	Repository validation
`archive/`	Historical implementations and examples

Both packages remain independently installable. npm test inside either package rebuilds it first. CI tests both packages on Node.js 22. See the review report for the fixes and validation scope.

Both hosts bind to 127.0.0.1 and accept the local UI's origin. Run trusted MUPs: the same-origin iframe setup supports browser storage and media APIs, and is not an isolation boundary for untrusted HTML. The dashboard's workspace registration grants access to the working directory.

Getting Started

With Claude Code (recommended)

Terminal

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

Restart 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.

Real-time channel mode

MUPs can push interactions directly into Claude's conversation via channel notifications. To enable:

Terminal

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

This 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.

With Claude Desktop

Add to your claude_desktop_config.json:

config.json

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

Quick Example

html

<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>

Drop this into a MUP-compatible host, and it works.

Architecture

Code

┌──────────────────────────────────────────┐
│             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