MUP — Model UI Protocol

繁體中文

Lleva una interfaz de usuario interactiva al chat con LLM — para que cualquiera pueda experimentar la IA agéntica, no solo los desarrolladores.

Versión actual: 0.2.11 | Protocolo: mup/2026-03-17

Demos

Slides — la IA crea una presentación en directo

Claude crea una presentación de diapositivas completa con gráficos, tablas y temas — todo mediante llamadas a funciones.

PDF a Presentación — la IA lee un artículo y lo presenta

Claude lee el artículo de AlexNet desde un PDF, toma notas en Markdown, captura figuras con colaboración humano-IA, crea una presentación de 19 diapositivas con gráficos y tablas, y luego la presenta diapositiva a diapositiva en el nuevo modo de lectura dentro del panel — todo narrado en directo.

Sound Pad — la IA compone un tema desde cero

16 instrumentos sintetizados en el navegador, cero muestras. Claude compone un tema de electro swing capa a capa, con narración basada en eventos sincronizada con cada transición de sección.

Related MCP server: MCP Kkebi

¿Qué es MUP?

Un MUP es un componente de interfaz de usuario interactivo que vive dentro de una interfaz de chat con LLM.

Combina una interfaz visual con funciones invocables. El usuario lo maneja haciendo clic en botones; el LLM lo opera mediante llamadas a funciones. Ambas partes ven las acciones de la otra en tiempo real.

El MUP más simple es un único archivo .html — sin paso de compilación, sin framework, sin SDK.

¿Por qué?

La IA agéntica es potente, pero hoy en día está atrapada detrás de comandos de texto y herramientas para desarrolladores. La mayoría de la gente nunca llega a experimentarla.

MUP cambia esto. Pone una interfaz visual y clicable justo dentro del chat — para que cualquiera pueda usar capacidades agénticas sin escribir ni una sola indicación.

Ideas clave

• Funciones compartidas. Una función puede ser llamada por el LLM (como herramienta) o activada por el usuario (mediante la interfaz). Ambas partes operan sobre el mismo estado a través del mismo código.

• El LLM como orquestador. Los MUP no se comunican entre sí. El LLM lee las salidas y decide qué hacer a continuación.

• Solo HTML. Escribe un manifiesto, registra tus funciones, listo. Distribuye un único archivo.

MUPs disponibles

• Chat — Integrado, siempre disponible

• Slides — Editor de presentaciones con gráficos, tablas, temas, modo de lectura y exportación (demo)

• PDF Reader — Visor de PDF con extracción de texto de páginas y selección/captura de regiones

• Markdown — Espacio de trabajo Markdown con anotaciones y gestión de documentos

• Sound Pad — Sintetizador de 16 pads con secuenciador, volumen por pista y sistema de eventos (demo)

• Chord Pad — Teclado de teoría musical con 5 voces de sintetizador, progresiones de acordes y reproducción de melodías

• Diagram — Diagramas de nodos y aristas con diseño automático (diagramas de flujo, mapas mentales, arquitecturas) con múltiples algoritmos de distribución

• Star Map — Mapa estelar interactivo basado en la ubicación con constelaciones, eclíptica y Vía Láctea

• Voice — Síntesis y reconocimiento de voz (modo Jarvis)

• Notes — Espacio de trabajo de notas adhesivas con grupos, estilos y exportación

• Pixel Art — Lienzo de píxeles con formas, patrones ASCII, rellenos y exportación PNG

• Timer — Temporizador de cuenta atrás / cronómetro con finalización basada en eventos

• Progress — Seguimiento del progreso de tareas

• Más ejemplos en archive/examples/ (juegos, productividad, etc.)

Desarrollo enfocado

Para construir iterativamente un único MUP con Claude (editar .html → Chrome recarga en caliente → el usuario interactúa → el canal lo envía de vuelta a Claude → repetir), consulta mup-mini-mcp-server — un proyecto hermano de estilo andamiaje que carga exactamente un MUP y proporciona solo la infraestructura básica: recarga en caliente, puente WebSocket y envío por canal. Sin catálogo, sin cuadrícula, sin extras.

Documentación

• Spec — Definición del protocolo: manifiesto, funciones, ciclo de vida, gestión de errores

• Design Philosophy — Por qué MUP está diseñado de esta manera y qué omitimos deliberadamente

• Examples — Ejemplos de MUP con tutoriales

Instalación

npm (recomendado)

npm install -g mup-mcp-server

O ejecuta directamente:

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

También disponible en el MCP Server Registry.

Desde el código fuente

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

Primeros pasos

Con Claude Code (recomendado)

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

Reinicia Claude Code. Se abre una ventana del navegador en http://localhost:3200. Usa el panel de MUPs para cargar una carpeta de archivos .html de MUP, o comienza con el widget de Chat integrado.

Modo de canal en tiempo real

Los MUP pueden enviar interacciones directamente a la conversación de Claude mediante notificaciones de canal. Para habilitarlo:

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

Esto permite que los MUP transmitan las acciones del usuario a Claude en tiempo real. Sin esta opción, todas las funciones de MUP siguen funcionando: las interacciones se transmiten mediante sondeo en lugar de push.

Con Claude Desktop

Añade lo siguiente a tu claude_desktop_config.json:

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

Ejemplo rápido

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

Colócalo en un host compatible con MUP y funcionará.

Arquitectura

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

Historial de estrellas

Licencia

MIT