# mup

Turns HTML panels into clickable tools inside the chat: you press buttons, the model calls the same functions. Useful when you want something visual instead of plain text.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 11
- Author: Ricky610329
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Ricky610329/mup
- Updated: 2026-09-05
- HTML: https://affpapa.org/en/nevibecode/mcp/mup

## What it does

A MUP is a single `.html` file holding a manifest and a set of functions. The model calls them as tools, a person triggers them through buttons and sliders, and both sides share one state. No build step, no framework, no SDK.

Shipped panels include Chat, Slides, PDF Reader, Markdown, Sound Pad, Chord Pad, Diagram, Star Map, Voice, Notes, Pixel Art, Timer, Progress and Chess. Slides handles charts, tables, themes and a reading mode. PDF Reader pulls page text and lets you select and capture regions. Panels never talk to each other — the model reads their output and decides the next step.

Both hosts bind to `127.0.0.1` and accept the local UI origin. Run trusted panels only: the same-origin iframe gives access to browser storage and media APIs, so it is not an isolation boundary for untrusted HTML. Registering a workspace in the dashboard grants access to that working directory.

Development needs Node.js 22.13 or newer. After startup a browser window opens at `http://localhost:3200`.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add mup -- npx -y mup-mcp-server
```

### Codex

**Platform CLI**
```bash
codex mcp add mup -- npx -y mup-mcp-server
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mup": {
            "command": "npx",
            "args": [
                "-y",
                "mup-mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mup": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "mup-mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add mup npx -y mup-mcp-server
```

## When to use it
- build a slide deck with charts and tables inside the conversation
- read a PDF and pull page text plus figures
- compose a track on a 16-pad synthesizer
- draw a flowchart or mind map with automatic layout
- keep sticky notes and export them

## Example prompts
- Build a deck about AlexNet: read the PDF, take notes, add charts
- Open PDF Reader and extract the text from pages 3–7
- Draw an architecture diagram from this service description

## Similar
- [frontend-slides-editable](https://affpapa.org/en/nevibecode/skills/frontend-slides-editable.md) — skill · 537 installs
- [slidewright](https://affpapa.org/en/nevibecode/skills/slidewright.md) — skill · ★ 88
- [huashu-design-html-native](https://affpapa.org/en/nevibecode/skills/huashu-design-html-native.md) — skill · 426 installs
- [frontend-slides](https://affpapa.org/en/nevibecode/skills/nexu-io-frontend-slides.md) — skill · 2800 installs
- [revealjs](https://affpapa.org/en/nevibecode/skills/revealjs.md) — skill · 736 installs
- [html-ppt-skill](https://affpapa.org/en/nevibecode/skills/html-ppt-skill.md) — skill · 476 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md