Crea una MCP App: UI interactiva en tu herramienta MCP en lugar de un muro de texto

Tu herramienta MCP devuelve datos, y el usuario quiere ordenarlos, filtrarlos, ir clicando. Con texto plano eso significa que cada interacción es un prompt nuevo. "Enséñame solo los de la semana pasada." "Ordena por facturación." "¿Qué pone en la fila 47?" Funciona, pero es pesado. Desde enero de 2026 existen para esto las MCP Apps, la primera extensión oficial de MCP. Tu servidor puede devolver ahora una UI de verdad que se renderiza directamente en la conversación dentro de un iframe aislado. Claude lo soporta, en la web y en el escritorio. En este playbook lo integras en tu servidor MCP existente.

Paso 1, pillar para qué sirven las MCP Apps y para qué no

Las MCP Apps cierran el hueco entre lo que tu herramienta sabe hacer y lo que el usuario ve. Cuatro escenarios de la documentación oficial con los que notas si lo necesitas: un panel de ventas para filtrar por región, un asistente de configuración con campos dependientes (eliges "production" y aparecen opciones de seguridad), una revisión de documentos donde el usuario clica cláusulas y el modelo ve la decisión en tiempo real, o una monitorización en vivo que se actualiza sin que la herramienta vuelva a ejecutarse.

Si en cambio tu herramienta solo escupe un valor o una frase, déjalo en texto. La UI compensa solo cuando el usuario explora, manipula o toma una decisión. No construyas una UI porque queda vistosa. Constrúyela porque un ir y venir en texto costaría cinco prompts.

Paso 2, comprobar si tu cliente puede

Las MCP Apps necesitan un host que soporte la extensión. En el momento del lanzamiento son cuatro: Claude (web y escritorio, los dos disponibles de inmediato), Goose (la implementación de referencia, disponible ya), Visual Studio Code (en Insiders, no en la estable) y ChatGPT. La ventaja del estándar abierto: escribes la UI una vez y corre en todos los clientes soportados, sin una línea de código específico de cliente.

Si tu público está en un cliente que todavía no está, mantén el servidor funcionando también sin UI. Una herramienta que declara un recurso de UI debería devolver igualmente un resultado de texto con sentido por si el host no conoce la extensión.

Paso 3, instalar ext-apps

Necesitas un servidor MCP existente. Si todavía no tienes, constrúyelo antes (mira el playbook de abajo). Después instalas el paquete oficial:

npm install @modelcontextprotocol/ext-apps

La versión actual es la 1.7.3. El paquete trae la clase App para la comunicación entre tu UI y el host. En el lado del servidor trabajas con las primitivas MCP que ya conoces, tools y resources. Lo único nuevo es que un resource puede ahora entregar HTML y JavaScript en vez de solo datos.

Paso 4, crear un recurso de UI bajo ui://

Las MCP Apps se apoyan en dos pilares. El primero es un recurso de UI: un recurso del lado del servidor que se entrega mediante el esquema ui:// y que contiene HTML empaquetado más JavaScript. Esa es tu interfaz propiamente dicha, una pequeña aplicación web.

Así que crea un recurso cuya URI empiece por ui://, por ejemplo ui://charts/interactive. El contenido es un documento HTML empaquetado. Mantén el paquete pequeño y autocontenido, porque el host lo carga y lo renderiza en un iframe aislado. Sin acceso al resto de la página, solo lo que tú entregues.

Paso 5, enlazar la herramienta con el recurso

El segundo pilar es una herramienta con metadatos de UI. Le añades a tu herramienta un campo _meta.ui.resourceUri que apunta al recurso de UI del paso 4:

{
  name: "visualize_data",
  description: "Visualize data as an interactive chart",
  inputSchema: { /* ... */ },
  _meta: {
    ui: {
      resourceUri: "ui://charts/interactive"
    }
  }
}

Si ahora el modelo llama a visualize_data, el host ve los metadatos de UI, recoge el recurso y lo renderiza en el iframe en vez de sacar texto sin más. Fíjate en que resourceUri coincida exactamente con la URI de tu recurso, una errata aquí es el motivo más frecuente de que no se renderice nada.

Paso 6, inicializar la app en el iframe

Vamos al lado de la UI. En tu HTML empaquetado arrancas la clase App y te conectas con el host:

import { App } from "@modelcontextprotocol/ext-apps";

const app = new App();
await app.connect();

// Recibir resultados de herramienta desde el host
app.ontoolresult = (result) => {
  renderChart(result.data);
};

app.connect() establece la conexión con el host. El manejador ontoolresult se dispara cuando la herramienta entrega un resultado, y con eso renderizas tu interfaz. Toda la comunicación va por JSON-RPC sobre postMessage, así que no estás atado a ningún framework. React, Vue, JavaScript a pelo, todo vale mientras corra en el iframe.

Paso 7, llamar desde la UI de vuelta al servidor

Lo bonito es que es una vía de doble sentido. Desde tu UI puedes llamar a herramientas del servidor sin que el usuario escriba un prompt nuevo:

const response = await app.callServerTool({
  name: "fetch_details",
  arguments: { id: "123" },
});

Si el usuario clica en la fila 47 de tu panel, tu UI llama a fetch_details con el ID y muestra los detalles ahí mismo. Se acabó el "qué pone en la fila 47". Eso es justo lo que marca la diferencia entre una respuesta de texto y una aplicación de verdad.

Paso 8, mantener al modelo en el bucle

Una UI de la que el modelo no se entera vale solo la mitad. Con updateModelContext le pasas al modelo en silencio la información de lo que acaba de hacer el usuario:

await app.updateModelContext({
  content: [{ type: "text", text: "User selected option B" }],
});

Así el modelo se mantiene al día y puede reaccionar a la selección. Las apps corren dentro del cliente, por eso pueden más que un iframe pelado: registrar eventos para depuración, abrir enlaces en el navegador del usuario, mandar mensajes de seguimiento que hacen avanzar la conversación, o actualizar el contexto del modelo sin ruido. Úsalo con moderación. Cada updateModelContext cuesta tokens y demasiado ruido confunde al modelo.

Paso 9, entender el modelo de seguridad

Estás ejecutando en tu host código de un servidor MCP, o sea código que no has escrito tú. Las MCP Apps lo contienen en cuatro niveles, y como autor de servidor deberías saber contra qué trabajas. Primero, aislamiento por iframe: toda la UI corre en iframes en sandbox con permisos restringidos. Segundo, plantillas predeclaradas: los hosts pueden revisar el HTML antes de renderizarlo. Tercero, mensajes auditables: toda la comunicación entre UI y host va por JSON-RPC registrable. Cuarto, consentimiento del usuario: los hosts pueden exigir aprobación explícita antes de que pase una llamada a herramienta iniciada desde la UI.

Para ti eso significa: construye de forma que tu app también funcione cuando el usuario tenga que despachar un diálogo de consentimiento, y no escondas nada en la comunicación, porque todo queda registrado. Y sigue diciéndoles a tus usuarios que revisen a fondo los servidores MCP antes de conectarlos, una UI no vuelve serio a un servidor que no lo es.

Paso 10, empezar con un ejemplo en vez de desde cero

No escribas tu primera app sobre un campo vacío. El repositorio de ext-apps tiene ejemplos que funcionan y que cubren casi cualquier caso estándar: threejs-server para visualización 3D, map-server para mapas interactivos, pdf-server para mostrar documentos, system-monitor-server para paneles en tiempo real y sheet-music-server para partituras. Busca el que más se acerque a tu caso y construye desde ahí.

Para probar merece la pena echar un ojo a los tutoriales de MCPJam, que recorren un ejemplo de app real con código. Y si construyes para Claude.ai y te topas con problemas de implementación, hay un repo propio para informes de fallos en github.com/anthropics/claude-ai-mcp. Empieza pequeño, una sola herramienta con un solo recurso de UI, y amplía solo cuando eso corra limpio en todos los clientes a los que apuntas.

Qué sigue

Si todavía no tienes un servidor MCP, empieza por Primer servidor MCP en 90 minutos y vuelve aquí después. Cuando tengas tu app lista y quieras distribuirla, sigue con Publicar un servidor MCP. Y quien quiera aprender todo el tema de construcción de forma sistemática, está en su sitio en el nivel 6 con las lecciones a partir de Planificar un servidor MCP.

Source

• Anuncio de MCP Apps (oficial): https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps
• Paquete: https://www.npmjs.com/package/@modelcontextprotocol/ext-apps (versión 1.7.3)
• Ejemplos y SDK: repositorio ext-apps (modelcontextprotocol)