MUP — Model UI Protocol

繁體中文

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

Demos

• Stop Making Apps. Make MUP. — Full demo: Music, Slides, Pixel Art, Notes
• Draw & Analyze — Pixel Art + Chart
• Beat Making — Drum Machine
• See & Draw — Camera + Pixel Art
• Smart Notes — Sticky Notes
• File Report — Workspace + Chart

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.

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.

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)

npm install -g mup-mcp-server

Or run directly:

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

Also available on the MCP Server Registry.

From source

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

Getting Started

With Claude Code (recommended)

claude mcp add --transport stdio --scope user mup -- npx mup-mcp-server --mups-dir /path/to/mup/examples

Restart Claude Code. MUP panels are now available as tools — just ask Claude to use them. A browser window opens at http://localhost:3200 showing the MUP panel grid.

Try it:

• "Draw a smiley face with pixel art"
• "Create a presentation about MUP"
• "Let's play chess"

With Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "mup": {
      "command": "npx",
      "args": ["mup-mcp-server", "--mups-dir", "/path/to/mup/examples"]
    }
  }
}

Standalone (with built-in chat)

For use without Claude — includes its own chat interface and supports multiple LLM providers.

cd mup/mup-agent
npm install
echo "ANTHROPIC_API_KEY=sk-ant-..." > .env
npm start

Supports Anthropic, OpenAI, Google, Groq, xAI. Opens at http://localhost:3100.

Built-in Examples

20 ready-to-use MUPs in examples/:

Quick Example

<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"]
      }
    }
  ]
}
</script>

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

Architecture

┌──────────────────────────────────────────┐
│             MUP (.html file)             │
│        manifest + UI + functions         │
└──────────────────┬───────────────────────┘
                   │ loaded by
        ┌──────────┴──────────┐
        ▼                     ▼
┌──────────────┐    ┌──────────────────┐
│  MCP Server  │    │   mup-agent      │
│ (Claude Code │    │ (standalone with │
│  / Desktop)  │    │  built-in chat)  │
└──────┬───────┘    └────────┬─────────┘
       │ WebSocket           │ WebSocket
       ▼                     ▼
┌─────────────────────────────────────┐
│          Browser Panel              │
│  (MUP grid + workspace manager)    │
└─────────────────────────────────────┘

Star History

License

MIT