MUP — Model-UI-Protokoll

繁體中文

Bringe interaktive UI in den LLM-Chat – damit jeder agentische KI erleben kann, nicht nur Entwickler.

Aktuelle Version: 0.2.11 | Protokoll: mup/2026-03-17

Demos

Slides — KI erstellt live eine Präsentation

Claude erstellt eine komplette Präsentation mit Diagrammen, Tabellen und Themes – alles über Funktionsaufrufe.

PDF zu Präsentation — KI liest ein Paper und präsentiert es

Claude liest das AlexNet-Paper aus einer PDF, macht Markdown-Notizen, erfasst Abbildungen mit Mensch-KI-Zusammenarbeit, erstellt eine 19-Folien-Präsentation mit Diagrammen und Tabellen und präsentiert sie dann Folie für Folie im neuen In-Panel-Lesemodus – alles live kommentiert.

Sound Pad — KI komponiert einen Track von Grund auf

16 im Browser synthetisierte Instrumente, null Samples. Claude komponiert einen Electro-Swing-Track Schicht für Schicht, mit ereignisgesteuerter Erzählung, die auf jeden Abschnittswechsel abgestimmt ist.

Related MCP server: mcp-interactive-ui-server

Was ist MUP?

Ein MUP ist eine interaktive UI-Komponente, die in einer LLM-Chat-Oberfläche lebt.

Es bündelt eine visuelle Oberfläche mit aufrufbaren Funktionen. Der Benutzer bedient es durch Klicken auf Schaltflächen; das LLM bedient es über Funktionsaufrufe. Beide Seiten sehen die Aktionen des jeweils anderen in Echtzeit.

Das einfachste MUP ist eine einzelne .html-Datei – kein Build-Schritt, kein Framework, kein SDK.

Warum?

Agentische KI ist mächtig, aber heute ist sie hinter Textbefehlen und Entwicklerwerkzeugen gefangen. Die meisten Menschen bekommen sie nie zu erleben.

MUP ändert das. Es bringt klickbare, visuelle UI direkt in den Chat – so kann jeder agentische Fähigkeiten nutzen, ohne auch nur einen Prompt zu schreiben.

Kernideen

• Gemeinsame Funktionen. Eine Funktion kann vom LLM (als Tool) aufgerufen oder vom Benutzer (über die UI) ausgelöst werden. Beide Seiten arbeiten über denselben Code auf demselben Zustand.

• LLM als Orchestrator. MUPs kommunizieren nicht miteinander. Das LLM liest Ausgaben und entscheidet, was als Nächstes zu tun ist.

• Nur HTML. Manifest schreiben, Funktionen registrieren, fertig. Eine einzelne Datei ausliefern.

Verfügbare MUPs

• Chat — Integriert, immer verfügbar

• Slides — Präsentationseditor mit Diagrammen, Tabellen, Themes, Lesemodus und Export (Demo)

• PDF Reader — PDF-Viewer mit Seitentextextraktion und Bereichsauswahl/-erfassung

• Markdown — Markdown-Arbeitsbereich mit Anmerkungen und Dokumentenverwaltung

• Sound Pad — 16-Pad-Synthesizer mit Sequenzer, Lautstärke pro Spur und Ereignissystem (Demo)

• Chord Pad — Musiktheorie-Keyboard mit 5 Synthesizer-Stimmen, Akkordfolgen und Melodie-Wiedergabe

• Diagram — Automatisch angeordnete Knoten-Kanten-Diagramme (Flussdiagramme, Mindmaps, Architekturen) mit mehreren Layout-Algorithmen

• Star Map — Standortbasierte interaktive Sternenkarte mit Sternbildern, Ekliptik und Milchstraße

• Voice — Sprachsynthese und -erkennung (Jarvis-Modus)

• Notes — Haftnotiz-Arbeitsbereich mit Gruppen, Stilen und Export

• Pixel Art — Pixel-Canvas mit Formen, ASCII-Mustern, Füllungen und PNG-Export

• Timer — Countdown-Timer / Stoppuhr mit ereignisgesteuerter Fertigstellung

• Progress — Aufgabenfortschrittsverfolgung

• Weitere Beispiele in archive/examples/ (Spiele, Produktivität usw.)

Fokussierte Entwicklung

Für die iterative Entwicklung eines einzelnen MUP mit Claude (.html bearbeiten → Chrome lädt heiß neu → Benutzer interagiert → Kanal pusht zurück zu Claude → wiederholen), siehe mup-mini-mcp-server – ein Gerüst-ähnliches Geschwisterprojekt, das genau ein MUP lädt und nur die Grundinfrastruktur bereitstellt: Hot Reload, WebSocket-Brücke und Kanal-Push. Kein Katalog, kein Raster, keine Extras.

Dokumentation

• Spezifikation — Protokolldefinition: Manifest, Funktionen, Lebenszyklus, Fehlerbehandlung

• Design-Philosophie — Warum MUP so gestaltet ist und was wir bewusst weggelassen haben

• Beispiele — Beispiel-MUPs mit Schritt-für-Schritt-Anleitungen

Installation

npm (empfohlen)

npm install -g mup-mcp-server

Oder direkt ausführen:

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

Auch verfügbar im MCP Server Registry.

Aus dem Quellcode

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

Erste Schritte

Mit Claude Code (empfohlen)

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

Starten Sie Claude Code neu. Ein Browserfenster öffnet sich unter http://localhost:3200. Verwenden Sie das MUPs-Panel, um einen Ordner mit MUP-.html-Dateien zu laden, oder beginnen Sie mit dem integrierten Chat-Widget.

Echtzeit-Kanalmodus

MUPs können Interaktionen über Kanalbenachrichtigungen direkt in Claudes Konversation pushen. So aktivieren Sie es:

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

Dadurch können MUPs Benutzeraktionen in Echtzeit an Claude übermitteln. Ohne dieses Flag funktionieren alle MUP-Funktionen weiterhin – Interaktionen werden nur per Polling statt per Push übermittelt.

Mit Claude Desktop

Fügen Sie zu Ihrer claude_desktop_config.json hinzu:

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

Schnellbeispiel

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

Legen Sie dies in einen MUP-kompatiblen Host, und es funktioniert.

Architektur

┌──────────────────────────────────────────┐
│             MUP (.html file)             │
│        manifest + UI + functions         │
└──────────────────┬───────────────────────┘
                   │ loaded by
                   ▼
            ┌──────────────┐
            │  MCP Server  │
            │ (Claude Code │
            │  / Desktop)  │
            └──────┬───────┘
                   │ WebSocket
                   ▼
      ┌─────────────────────────────┐
      │        Browser Panel        │
      │  (MUP grid + Chat widget   │
      │   + workspace manager)     │
      └─────────────────────────────┘

Sternverlauf

Lizenz

MIT