mup — Claude Code MCP server: interactive UI in chat
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.
claude mcp add mup -- npx -y mup-mcp-serverWhat mup 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.
What it helps with
- 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 for the agent
- 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
How to install mup
Platform CLI
claude mcp add mup -- npx -y mup-mcp-serverPlatform CLI
codex mcp add mup -- npx -y mup-mcp-serverConfig file
{
"mcpServers": {
"mup": {
"command": "npx",
"args": [
"-y",
"mup-mcp-server"
]
}
}
}Config file
{
"servers": {
"mup": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mup-mcp-server"
]
}
}
}Platform CLI
gemini mcp add mup npx -y mup-mcp-serverStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about mup
How do I install mup in Claude Code?
Run claude mcp add mup -- npx -y mup-mcp-server, then restart Claude. A browser window opens at http://localhost:3200.
What does mup do?
It runs an MCP server that renders HTML panels inside the chat. You click them yourself, and the model calls their functions as tools.
What does mup need to run?
Node.js 22.13 or newer. Load trusted panels only — a same-origin iframe does not isolate untrusted HTML.
