MCP Apps: Añadiendo UI Interactiva a las Conversaciones con IA

Las herramientas MCP siempre han sido buenas para obtener datos y ejecutar acciones. Lo que no podían hacer era mostrarte algo útil. Le pedías a un asistente de IA que obtuviera tus números de ventas, y recibías un muro de texto. ¿Quieres filtrar por región? Eso es otro prompt. ¿Ordenar por ingresos? Otro prompt. Funciona, pero es lento y frustrante.

MCP Apps soluciona esto. Permiten que los servidores MCP devuelvan componentes de UI interactivos — dashboards, formularios, visualizaciones, paneles de configuración — que se renderizan directamente dentro de la conversación. Sin aplicación separada, sin cambio de contexto.

¿Qué son las MCP Apps?

MCP Apps es la primera extensión oficial del Model Context Protocol. Se volvió oficial a principios de 2026, estandarizando patrones que ya estaban siendo explorados por MCP-UI y el OpenAI Apps SDK.

Antes de MCP Apps, cada cliente tenía que resolver el problema de la UI de forma independiente. Esa fragmentación significaba que un servidor construido para Claude no funcionaría de la misma manera en VS Code o ChatGPT. MCP Apps establece un estándar compartido para que una sola implementación funcione en todos los clientes compatibles.

Vale la pena señalar que MCP Apps aún es nuevo y está evolucionando. Pero ya cuenta con soporte en varios clientes MCP incluyendo Claude y herramientas de desarrollo — una alineación inicial significativa.

Cómo Funcionan las MCP Interactive Apps

La arquitectura es directa. Una herramienta hace referencia a un recurso de UI que apunta a una interfaz interactiva:

{
  "name": "visualize_sales",
  "description": "Returns an interactive sales dashboard",
  "_meta": {
    "ui": {
      "resourceUri": "ui://dashboards/sales"
    }
  }
}

El host obtiene ese recurso — un paquete HTML servido bajo el esquema ui:// — y lo renderiza en un iframe aislado. La UI se comunica de vuelta al host usando JSON-RPC sobre postMessage. Esto significa que todos los mensajes son estructurados, auditables y consistentes con cómo funciona el resto de MCP.

El ext-apps SDK maneja esta capa de comunicación:

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

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

app.ontoolresult = (result) => renderDashboard(result.data)

await app.updateModelContext({
  content: [{ type: "text", text: "User filtered by Q3" }],
})

El modelo permanece en el ciclo. Cuando un usuario interactúa con la UI — haciendo clic en un filtro, seleccionando una opción de configuración, aprobando una sección de documento — el modelo lo ve y puede responder.

Los Componentes de MCP UI Son Simplemente Aplicaciones Web

Esta es la parte que los desarrolladores frontend apreciarán más. Tu paquete de UI es una aplicación web estándar. Puedes construirla con React, Vue, Svelte, o JavaScript plano. No hay un motor de renderizado propietario que aprender.

El recurso ui:// es un archivo HTML autocontenido con assets empaquetados. El host lo carga en un iframe aislado, por lo que se ejecuta en un entorno de navegador familiar. Escribes componentes de la misma manera que siempre lo has hecho — la única pieza nueva es usar el App SDK para comunicarte con el host.

El soporte de UI también es una mejora progresiva. Si un cliente no soporta MCP Apps, la herramienta aún funciona — simplemente devuelve una respuesta de texto en su lugar. Los servidores siempre deben proporcionar un fallback de texto, lo que significa que no quedas excluido de clientes sin UI.

Dónde las MCP Interactive Apps Marcan la Mayor Diferencia

Algunos flujos de trabajo genuinamente necesitan una UI. Las respuestas de texto no pueden reemplazar:

• Dashboards de datos donde los usuarios necesitan filtrar, ordenar y profundizar
• Asistentes de configuración con campos dependientes que cambian según las selecciones
• Paneles de revisión de documentos donde los usuarios aprueban o marcan contenido en línea
• Monitores en tiempo real que se actualizan sin requerir una nueva llamada a la herramienta

Shopify demostró esto claramente con su caso de uso de comercio — variantes de productos, constructores de paquetes y restricciones de inventario son demasiado complejos para gestionar mediante prompts de ida y vuelta. Una UI lo maneja de forma limpia.

Comenzando

El repositorio ext-apps incluye servidores de ejemplo funcionales: threejs-server, map-server, pdf-server, y system-monitor-server. Elige el que más se acerque a lo que estás construyendo y comienza desde ahí.

Conclusión

MCP Apps está en una etapa temprana pero ya es utilizable. Aporta una forma estándar de integrar UI interactiva directamente en conversaciones con IA, cerrando la brecha entre lo que las herramientas MCP pueden obtener y lo que los usuarios realmente pueden hacer con esos datos. Si ya estás construyendo servidores MCP, añadir una capa de UI es un siguiente paso natural — y las herramientas están listas para ello.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.