Las MCP Apps permiten que una herramienta devuelva una interfaz que funciona en lugar de texto plano. Este artículo recorre las apps de ejemplo oficiales, desde mapas en 3D hasta controles deslizantes de presupuesto, muestra el código del servidor y de la vista que hay detrás y explica cómo crear las tuyas dentro de Claude y ChatGPT.
Antes, si le pedías a un asistente de IA un mapa, recibías un párrafo que lo describía. Con una MCP App detrás de la herramienta, la misma pregunta devuelve un mapa real en el chat: con marcadores, con zoom y listo para tu siguiente pregunta. Ese salto de describir a mostrar es la razón de ser de MCP Apps, y la forma más rápida de entender por qué importa es ver ejemplos que funcionan en lugar de leer la especificación. Este artículo repasa las demos oficiales, los productos que ya incluyen la extensión, el patrón de código que hay detrás de cada una y lo que hace falta para crear tu propia interfaz interactiva dentro de Claude y ChatGPT.
MCP Apps es la primera extensión oficial del Model Context Protocol. Se anunció el 26 de enero de 2026 y permite que una herramienta devuelva una interfaz interactiva que se muestra directamente en la ventana del chat, y no solo texto o JSON. Gráficos, formularios, paneles y escenas 3D viven dentro de la conversación, junto a la respuesta del modelo.
Una herramienta MCP normal es una función. El modelo la llama, recibe datos y describe el resultado en prosa. Eso funciona hasta que los datos son una tabla de 40 filas o una ruta por una ciudad, y entonces la prosa se convierte en una mala interfaz.
Con MCP Apps, una herramienta puede apuntar a un recurso de interfaz. El host (la aplicación de chat) obtiene ese recurso y lo muestra en un iframe aislado. El host pasa los datos de la herramienta a la interfaz, y la interfaz puede volver a llamar a otras herramientas a través del host. La conversación y la interfaz se mantienen sincronizadas, de modo que un clic en un gráfico puede convertirse en la siguiente pregunta al modelo.
La idea no surgió de la nada. Se apoya en dos iniciativas de la comunidad: el proyecto MCP-UI, dirigido por Ido Salomon y Liad Yosef, y el Apps SDK de OpenAI. Anthropic y OpenAI trabajaron en una especificación compartida en lugar de lanzar dos propuestas rivales, y por eso una sola app puede funcionar en los dos asistentes.
Claude y ChatGPT son los dos grandes hosts, pero no están solos. El repositorio ext-apps también enumera como clientes que muestran estas apps: VS Code, Goose, Postman, MCPJam, el inspector de mcp-use y Alpic Playground.
💡 El soporte de cada host varía. MCP Apps es una especificación, y cada cliente decide cuánta parte implementa. Prueba tu app en cada host que te importe antes de prometer nada a los usuarios.
El repositorio modelcontextprotocol/ext-apps incluye unas 18 apps de ejemplo, y los servidores de ejemplo se publican como paquetes @modelcontextprotocol/server-<name>, así que puedes probar una sin escribir una sola línea de código. Esta es la lista de un vistazo.
| Ejemplo | Qué muestra | Vale la pena copiarlo por |
|---|---|---|
| Map | Globo 3D basado en CesiumJS | Vistas espaciales que el usuario puede arrastrar e inclinar |
| Three.js | Escenas 3D interactivas | Renderizado pesado dentro de un entorno aislado |
| ShaderToy | Shaders GLSL ejecutándose en vivo | Gráficos por GPU en un iframe |
| Sheet Music | Notación ABC convertida en partitura | Renderizadores específicos de un campo |
| Wiki link graph | Grafo de enlaces entre páginas de wiki | Navegación nodo a nodo |
| Cohort Heatmap | Retención por grupos de usuarios | Análisis denso de un vistazo |
| Customer Segmentation | Gráficos de dispersión y de burbujas | Agrupaciones que el usuario puede inspeccionar |
| Scenario Modeler | Proyecciones de SaaS | Entradas que vuelven a dibujar los resultados |
| Budget Allocator | Deslizadores y gráficos | Controles ligados a totales en vivo |
| System Monitor | Métricas del sistema operativo | Datos que cambian continuamente |
| PDF Server | Visor de documentos por fragmentos | Archivos grandes en partes |
| Video Resource | Video binario a través de MCP | Cargas útiles que no son texto |
| Transcript | Voz a texto | Entrada de audio |
| Say Demo | Texto a voz | Salida de audio |
| QR Code | Generador de códigos | La app útil más pequeña |
El ejemplo Map muestra un globo 3D con CesiumJS. Pides al asistente que muestre una ciudad y el globo vuela hasta allí. Puedes arrastrarlo, hacer zoom e inclinarlo como en cualquier aplicación de mapas, porque es una interfaz en vivo y no una captura de pantalla. La vista se comunica con el host por el mismo canal que todo lo demás, así que lo que el usuario hace en el mapa puede influir en lo que el modelo diga después.
Three.js y ShaderToy llevan la misma idea hacia los gráficos. Uno renderiza escenas 3D interactivas y el otro ejecuta shaders GLSL en vivo. Ninguno necesita un viaje de ida y vuelta al servidor por cada fotograma, lo que demuestra que el renderizado intensivo en GPU funciona bien dentro del entorno aislado. Si tu herramienta devuelve geometría, terreno o cualquier cosa espacial, estos son los dos que conviene copiar.
El análisis es donde la interfaz interactiva rinde más rápido. Cohort Heatmap muestra la retención por grupos de usuarios. Customer Segmentation dibuja gráficos de dispersión y de burbujas con agrupaciones que puedes inspeccionar. System Monitor transmite las métricas del sistema operativo a medida que cambian, y la demo del grafo de enlaces de la wiki dibuja un grafo que puedes seguir nodo a nodo.
Cada uno reemplaza una respuesta larga y difícil de leer por algo que puedes revisar en dos segundos. El monitor del sistema es el ejemplo que conviene estudiar si tus datos cambian mientras el usuario mira, porque muestra cómo una vista puede seguir actualizándose después de que llega el primer resultado.
Budget Allocator combina deslizadores con gráficos para que muevas dinero entre categorías y veas cómo reaccionan los totales. Scenario Modeler hace lo mismo con las proyecciones de SaaS: cambias tus supuestos de crecimiento y costos, y la curva de ingresos se vuelve a dibujar. Estos dos son los mejores ejemplos didácticos del repositorio porque el patrón es sencillo. El usuario mueve un control, la app recalcula y el gráfico se actualiza.
💡 Consejo: Si un cálculo es barato, ejecútalo dentro de la vista. Reserva las llamadas a herramientas para los datos que viven en tu servidor.
PDF Server sirve un documento por fragmentos, de modo que un archivo grande no tiene que llegar de una sola vez. Sheet Music convierte la notación ABC en una partitura legible. Video Resource transmite video binario a través de MCP, Transcript convierte voz en texto, Say Demo lee un texto en voz alta y la app QR Code genera un código escaneable en una sola llamada. Cada una es pequeña y cada una muestra un tipo distinto de carga útil que una app puede manejar.
El anuncio nombró diez socios de lanzamiento: Amplitude, Asana, Box, Canva, Clay, Figma, Hex, monday.com, Slack y Salesforce. Los casos de uso que se describieron junto al lanzamiento fueron el diseño colaborativo, los paneles de exploración de datos, la coordinación de proyectos y la respuesta a incidentes. Dicho de otra forma, los mismos patrones que acabas de ver en las demos, aplicados a herramientas que la gente ya paga.
Eso importa para quien construye sobre el estándar. Una especificación con diez nombres reconocibles desde el primer día es una especificación que los clientes seguirán implementando, y significa que la interfaz que construyes hoy no depende de un solo proveedor.
En el chat, una MCP App aparece como un panel dentro de la conversación. El usuario puede interactuar con él directamente, y el modelo sigue formando parte del intercambio. Detrás de escena, el host pide el consentimiento del usuario antes de ejecutar las herramientas, y cada mensaje entre la vista y el host es un mensaje JSON-RPC que se puede registrar y auditar.
Los equipos suelen adoptarlo primero para tareas de revisión. Una persona hace una pregunta en el chat, aparece el panel y todos en la mesa pueden señalar el mismo gráfico en lugar de leer el mismo párrafo.
Cada MCP App se construye con tres piezas: una herramienta, un recurso y una vista.
La herramienta declara qué interfaz usa mediante _meta.ui.resourceUri, una dirección ui://. El recurso devuelve el paquete HTML de esa dirección. La vista es el código que se ejecuta dentro del iframe. El servidor de inicio rápido oficial tiene este aspecto:
import {
registerAppResource,
registerAppTool,
RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";
registerAppTool(
server,
"get-time",
{
title: "Get Time",
description: "Returns the current server time.",
inputSchema: {},
_meta: { ui: { resourceUri } },
},
async () => {
const time = new Date().toISOString();
return { content: [{ type: "text", text: time }] };
},
);
registerAppResource(
server,
resourceUri,
resourceUri,
{ mimeType: RESOURCE_MIME_TYPE },
async () => {
const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };
},
);
Fíjate en que la herramienta sigue devolviendo contenido de texto plano. Un host sin soporte para MCP Apps obtiene una respuesta útil, y un host con soporte obtiene la interfaz encima de ella.
Dentro del iframe, la clase App de @modelcontextprotocol/ext-apps gestiona la comunicación con el host. Recibe el resultado de la herramienta y puede llamar a sus propias herramientas del servidor:
import { App } from "@modelcontextprotocol/ext-apps";
const app = new App({ name: "Get Time App", version: "1.0.0" });
app.ontoolresult = (result) => {
const time = result.content?.find((c) => c.type === "text")?.text;
serverTimeEl.textContent = time ?? "[ERROR]";
};
getTimeBtn.addEventListener("click", async () => {
const result = await app.callServerTool({ name: "get-time", arguments: {} });
});
app.connect();
Si construyes con React, el paquete incluye hooks en @modelcontextprotocol/ext-apps/react, entre ellos useApp y useHostStyles. Por debajo, los dos lados se comunican a través de un PostMessageTransport, que es el canal de mensajes del iframe adaptado para MCP.
Una app de chat que muestra código de interfaz procedente de un servidor de terceros está ejecutando código ajeno junto a tu conversación. Todo el diseño parte de que ese código no es de confianza, y eso es algo bueno.
💡 ¿Lo construyes para una empresa? Pide a tu equipo de seguridad que lea esos cuatro puntos. Reconocerán el modelo: es el mismo que se usa para widgets de terceros incrustados, pero reforzado para un chat de IA.
El repositorio incluye apps de inicio básicas en React, Vue, Svelte, Preact, Solid y JavaScript puro. Elige la que coincida con el stack de front-end que ya usa tu equipo, cópiala y cambia la herramienta de ejemplo por la tuya. La parte del servidor es la misma sin importar la plantilla que elijas.
El repositorio también incluye cuatro skills de agente que automatizan las partes repetitivas:
useHostStyles o el equivalente para que tu panel coincida con el modo claro y oscuro del host.
Escribir el servidor, el paquete HTML y el código de unión es sobre todo teclear, y Claude Sonnet 5 en PicassoIA está pensado justamente para eso. Maneja tareas de programación de varios pasos y uso de herramientas, y lee imágenes, así que un boceto de wireframe puede ir directamente en la solicitud.
effort va de bajo a máximo. Bajo es el valor por defecto, desactiva el pensamiento y responde más rápido. Cambia a alto o máximo cuando la app afecte a varios archivos.image para un boceto del panel. El ajuste max_image_resolution reduce la imagen antes de enviarla, lo que ahorra tiempo y costo.Si quieres una segunda opinión sobre el mismo prompt, GPT 5.6 Sol también está en la plataforma y está pensado para tareas de programación complejas.
💡 Compara el resultado con el inicio rápido. A veces los modelos adivinan nombres de API antiguos. Compara las importaciones y la llamada a
registerAppToolcon los fragmentos de arriba antes de ejecutar nada.
Toda buena interfaz empieza como una imagen en tu cabeza. Antes de escribir una sola línea de código, genera en PicassoIA las maquetas, las imágenes principales y las escenas de demostración de tu app. Seedream 4.5 crea imágenes fijas nítidas en 4K a partir de una descripción breve, Flux 2 Pro es una buena opción para escenas de estilo fotográfico, GPT Image 2 sigue con precisión los prompts largos y P Image devuelve imágenes en aproximadamente un segundo cuando quieres iterar rápido.
Empieza con un prompt sencillo: un equipo portátil sobre un escritorio de madera que muestra un panel limpio con un mapa y dos deslizadores, luz suave de la mañana, profundidad de campo poco profunda. Ejecútalo, cambia un detalle y vuelve a ejecutarlo. Cuando una imagen fija no basta, los modelos de texto a video de la plataforma pueden convertir la misma idea en un clip corto.
Elige un modelo, escribe tu primer prompt y mira lo que puedes crear. El catálogo completo está en picassoia.com/en/all-models.
Elige tu idioma
