- ChatGPT Apps, anunciado por OpenAI, permite a los desarrolladores incrustar sus apps directamente dentro de una conversación de ChatGPT y aprovechar a sus más de 800 millones de usuarios activos semanales como un nuevo canal de distribución
- ChatGPT ahora puede ir más allá de responder con texto y renderizar componentes de UI directamente, lo que permite realizar tareas reales como reservas, compras y consulta de datos dentro del flujo conversacional
- El núcleo de esta arquitectura es el Model Context Protocol (MCP), que funciona permitiendo que un LLM invoque de forma selectiva herramientas externas y recursos de UI
- Las apps de ChatGPT tienen una estructura con separación clara entre backend (servidor MCP) y frontend (componentes de UI), ejecutando miniapps basadas en React dentro de un sandbox seguro
- El patrón de MCP y ChatGPT Apps podrá extenderse en el futuro a otros agentes como Claude, consolidándose como una nueva capa de interfaz que conecta la IA conversacional con el SaaS tradicional
Resumen de ChatGPT Apps
- ChatGPT Apps es una función que permite a desarrolladores y equipos de producto insertar apps directamente dentro de conversaciones de ChatGPT
- Los usuarios pueden hacer tareas como reservar hoteles, buscar propiedades o comprar en línea directamente dentro de ChatGPT mientras conversan
- Con una plataforma que tiene más de 800 millones de usuarios activos semanales, existe potencial como canal de distribución de próxima generación
Cómo funcionan las ChatGPT Apps
- Todos los LLM (ChatGPT, Claude, Gemini) solo pueden usar un conjunto limitado de herramientas, como búsqueda web, lectura de archivos, ejecución de código y generación de artefactos
- ChatGPT Apps permite que los desarrolladores expongan nuevas herramientas al LLM mediante herramientas MCP, y que los usuarios puedan instalarlas y usarlas fácilmente
- Si intentas reservar un alojamiento de corta estancia sin una app, solo recibirás fotos e información de políticas, pero no podrás completar la reserva
- Cuando la app está instalada, puedes obtener una lista de alojamientos de Airbnb adecuados para tu solicitud y reservar de inmediato
Los tres componentes de una app
-
Servidor MCP (backend)
- Es el servidor con el que se comunica ChatGPT, escrito en Python o Node.js
- Funciona como una API y define las "herramientas" (funciones) que ChatGPT puede invocar
- Ejemplo:
search_restaurants, book_ticket
-
Componentes (frontend)
- Es la UI interactiva que ve el usuario
- Normalmente se construye con React y se ejecuta dentro del sandbox seguro de ChatGPT
- Es, en esencia, una mini webapp que vive dentro de una conversación de ChatGPT
-
ChatGPT (host)
- La app se muestra en una vista incrustada dentro de ChatGPT
- ChatGPT decide cuándo invocar la app según la conversación del usuario y las apps activadas
Flujo de funcionamiento
- Cuando un usuario pide ayuda para una estancia de corta duración, ChatGPT realiza automáticamente varios pasos:
1. Determina si una app sería útil
2. Se comunica con la app para revisar qué herramientas están disponibles (por ejemplo, Book Listing, Browse Listing)
3. Invoca la herramienta Browse Listing para devolver los 5 mejores alojamientos
4. Responde al usuario con esos 5 mejores alojamientos
- Este flujo de trabajo es la base de MCP (Model Context Protocol)
- El agente de IA (ChatGPT) recibe acceso a herramientas que lo ayudan a cumplir un objetivo y las usa selectivamente cuando el usuario las solicita
- Las herramientas pueden ser tan simples como una calculadora para sumar dos números o tan complejas como un proceso backend de generación de imágenes
Modos de visualización
- ChatGPT Apps admite tres modos de visualización de UI
-
Modo inline
- Ideal para: listas, tarjetas, visualizaciones pequeñas
- Es el modo predeterminado para todas las apps y puede cambiarse a otro modo si hace falta
- Ejemplo: carrusel de productos, lista de restaurantes
-
Modo de pantalla completa
- Ideal para: mapas, formularios complejos, dashboards intensivos en datos
- El componente ocupa toda la ventana de ChatGPT
- Se usa cuando se necesita más espacio o cuando hay que enfocarse en una tarea compleja
- Ejemplo: mapa interactivo de propiedades, editor de hojas de cálculo
-
Modo PiP (Picture-in-Picture)
- Ideal para: herramientas persistentes, juegos, actualizaciones en tiempo real
- El componente queda flotando como una pequeña ventana en la parte superior de la pantalla
- Es adecuado para elementos que deben seguir visibles mientras el usuario continúa chateando
- Ejemplo: temporizador, reproductor de música, juego de tres en raya
- Si planeas cambiar entre modos de visualización, se necesita mayor consideración de patrones UX
Limitaciones
-
Un componente por turno
- Cuando ChatGPT invoca una herramienta que devuelve un componente, ese turno termina
- No se pueden encadenar automáticamente varias herramientas que devuelvan UI
- Ejemplo: ante la solicitud "reserva un restaurante y luego pide un Uber", primero se muestra el componente del restaurante y, tras la reserva, el componente de Uber se muestra mediante un disparador posterior
-
Alcance limitado del estado del componente
- Cada instancia de componente mantiene su propio estado solo dentro de ese mensaje específico
- Cuando ChatGPT crea un nuevo mensaje con un componente, por defecto se trata de una nueva instancia con estado vacío
- Es necesario gestionar el estado mediante persistencia y recuperación en el backend
-
Sin acceso directo al DOM
- Los componentes se ejecutan dentro de un sandbox de seguridad (iframe), por lo que no pueden acceder a la página principal de ChatGPT ni ejecutar scripts arbitrarios
- Toda la comunicación se realiza mediante la API
window.openai
-
El rendimiento importa
- El estado del componente se envía al modelo de IA en cada solicitud
- Las cargas útiles grandes ralentizan la respuesta, así que hay que enviar solo lo necesario
Casos de uso reales
-
Ecommerce y compras
- Construir catálogos de productos interactivos con filtrado por precio, agregar al carrito y checkout (normalmente enviando al usuario a la app principal)
-
Herramientas de negocio
- Crear un tablero Kanban donde los usuarios puedan arrastrar tareas entre columnas, asignar fechas límite y actualizar estados
- Es especialmente potente para herramientas internas donde ChatGPT responde preguntas sobre un proyecto mientras permite al usuario tomar acciones al mismo tiempo
-
Bookings y reservas
- Construir un componente de reserva de restaurantes que muestre disponibilidad, menú y reseñas
- Los usuarios pueden pedir recomendaciones a ChatGPT y reservar directamente desde la interfaz
-
Dashboards de datos
- Mostrar análisis de ventas con gráficos interactivos
- Si alguien pregunta "¿Cómo van las ventas del Q4?", se puede ofrecer un dashboard con capacidad de drill-down por región o producto
-
Mapas y ubicación
- Mostrar mapas interactivos con marcadores para cafeterías, propiedades inmobiliarias o búsquedas basadas en ubicación
- Especialmente efectivo en modo de pantalla completa
Guía para construir la primera app (ejemplo de app de búsqueda de restaurantes)
-
Paso 1: construir el componente (frontend)
- Crear un componente React que interactúe con la API
window.openai.* para la comunicación entre el componente dentro del iframe y ChatGPT
- OpenAI ofrece un global que ayuda con la interacción de la API
-
Paso 2: definir herramientas (backend)
- El servidor MCP define el "contrato" con ChatGPT
- Le indica al modelo qué puede hacer y qué componente debe mostrar cuando termine la invocación de una herramienta
-
Paso 3: registrar recursos (backend)
- Empaquetar el componente React como HTML y alojarlo como recurso en el servidor MCP
- ChatGPT toma el URI
outputTemplate del paso anterior y solicita el código que se incrustará en un iframe
-
Paso 4: probar el flujo
- Después de desplegar el servidor:
- Abre ChatGPT y activa Developer Mode
- Ve a Settings → Connected Apps (o "My Apps")
- Haz clic en "Connect new app"
- Ingresa la URL del servidor (por ejemplo,
https://my-mcp-server.com)
- Conéctalo sin OAuth
- Cuando ChatGPT detecte la herramienta
search_restaurants, pruébala escribiendo "Find me Italian food in Brooklyn"
- ChatGPT invocará la herramienta, traerá los datos y, en lugar de texto, renderizará una lista interactiva en React
Perspectivas a futuro
- ChatGPT fue el primero en arrancar, pero pronto el estándar MCP también admitirá este mismo patrón a través de MCP apps
- Claude y otros agentes también podrán inyectar miniapps en experiencias conversacionales
- Comprender esta arquitectura de sistemas y cómo construir experiencias significativas para los usuarios abre una nueva forma de comunicación entre productos de IA y aplicaciones SaaS tradicionales
Aún no hay comentarios.