Nuestra MCP App en ChatGPT en el teléfono: lo que aprendimos

¿Qué se rompió al abrir nuestra MCP App en ChatGPT en un teléfono?

Cuatro cosas, todas relacionadas con la pantalla completa. El panel de ScoreStarling muestra una partitura en el chat (cómo conectarlo); en pantalla completa pulsas notas y preguntas al chat por ellas desde una tarjeta de selección que se acopla encima del reproductor en un teléfono. El 7 de octubre de 2026 lo ejecutamos en el sitio web móvil de ChatGPT, en Safari, en el iPhone 17 del Simulador de iOS (402 × 874 puntos). El marco del panel es cross-origin, así que lo leímos a partir de capturas de pantalla.

¿Por qué una MCP App en pantalla completa queda oculta tras el cuadro de mensaje de ChatGPT en un teléfono?

Porque ChatGPT dibuja su cuadro de mensaje encima de tu marco y te dice cuánto cubre mediante el margen de área segura inferior. Si ignoras el margen, tus controles quedan bajo el cuadro; si añades tu propia holgura encima, como hicimos nosotros, flotan. La especificación de MCP Apps describe safeAreaInsets solo como “Safe area boundaries in pixels” (límites del área segura en píxeles), y la documentación de OpenAI dice que el cuadro de redacción (composer) sigue superpuesto en pantalla completa sin dar su tamaño (ambas comprobadas el 7 de octubre de 2026). Nuestros 47 px y 127 px son estimaciones a partir de capturas de pantalla.

El 6 de octubre una conversación en un teléfono mostró nuestro reproductor bajo la barra de título de ChatGPT, así que bajamos la cabecera por debajo del margen superior y pusimos el reproductor abajo, donde nuestro CSS además reservaba 96 px para un cuadro de mensaje encima del margen inferior. Una prueba local con un margen de 34 px se veía bien; los 127 + 96 de ChatGPT, no. Ahora el panel conserva el mayor de los dos, y también lee window.openai.safeArea de ChatGPT:

// panel.js, simplified: the host's inset or 96 px, never both
const bottom = Math.max(context.safeAreaInsets?.bottom || 0, window.openai?.safeArea?.insets?.bottom || 0);
root.style.setProperty('--safe-bottom', `${bottom}px`);
root.style.setProperty('--composer-space', fullscreen ? `${Math.max(0, 96 - bottom)}px` : '0px');
/* panel.css */
.stage > .player { bottom: calc(10px + var(--safe-bottom) + var(--composer-space)); }

¿Qué cambia mientras una MCP App está abierta en pantalla completa en un teléfono?

Los márgenes. En nuestra prueba el borde inferior se movió cuando un borrador creció a dos líneas y cuando la barra “Thinking” sustituyó al cuadro de mensaje. La especificación permite que un host envíe ui/notifications/host-context-changed cuando cambia cualquier campo del contexto, solo con los campos que cambiaron, para que la vista los fusione.

Nuestro reproductor se apoya en una variable CSS y lo siguió. La tarjeta de selección se coloca con script y se quedó atrás, así que ahora cada cambio de contexto la vuelve a colocar. Nuestro propio aviso causó un segundo desajuste: “Updated from the chat” aparece sobre la partitura durante 20 segundos y empuja hacia abajo el área de la partitura. La tarjeta, medida desde la parte superior de esa área, se deslizaba sobre el reproductor, y si mientras tanto algo la volvía a colocar, quedaba flotando sobre el reproductor cuando el aviso desaparecía. Ahora un ResizeObserver sobre el área también coloca la tarjeta, una vez por fotograma de animación:

this.context = {...this.context, ...params};  // host.js, simplified: merge the partial update
function hostContext(next) { applyContext(next); editor.queuePlace(); }
new ResizeObserver(() => { updateClip(); editor.queuePlace(); }).observe($('stage'));

¿Por qué una MCP App muestra una versión antigua al salir de la pantalla completa?

Porque ChatGPT en el teléfono construyó un panel nuevo cada vez que entraba o salía de la pantalla completa, y le dio el resultado original de la herramienta de la conversación, anterior a cualquier edición. La especificación permite que un host destruya una vista en cualquier momento; un resultado de herramienta solo registra el momento en que se ejecutó su herramienta.

La nuestra era mitad instantánea, mitad en vivo: imágenes de página y notas de su propia revisión, más un campo de revisión actual que se lee cuando el panel lo pide. El panel reconstruido dibujó la revisión 0, vio que la partitura estaba en la revisión 3 y pasó a solo lectura. Su comprobación de las ediciones desde el chat comparaba la revisión del servidor con ese campo ya actualizado, así que nunca se ponía al día. Ahora un panel al que el host entrega un resultado que la partitura ya ha superado lee una vez la revisión actual, salvo que el resultado contenga un cambio sugerido pendiente de aprobación, que está pensado para ser distinto.

¿Cómo se prueba el comportamiento de ChatGPT en el teléfono sin un teléfono?

Imita al host real en una réplica y demuestra que cada prueba falla sin su arreglo. Usamos sunpeak, que replica ChatGPT y Claude para pruebas con Playwright. Su shell móvil de ChatGPT (versión 0.20.91) dibuja una barra de título y un cuadro de mensaje e informa del cuadro como un margen de 92 px. Las tres pruebas que escribimos para estos errores, en una pantalla táctil de 402 × 874, añaden el resto. A través del marco de sandbox del shell, que es el padre del panel igual que lo es el marco de ChatGPT, envían márgenes nuevos de 127, 160, 70 y 127 px, y tras una edición recargan el panel y le entregan el resultado original de la herramienta. Otra prueba edita la partitura fuera del panel, como hace el chat. El reproductor debe acabar entre 0 y 24 px por encima del mayor de los dos valores, el margen o 96 px, y la tarjeta entre 0 y 16 px por encima del reproductor.

Una ejecución de esas tres pruebas tardó 59,9 segundos. Una cuarta, añadida el mismo día, comprueba la cabecera de una fila y el reproductor del editor del teléfono, y nuestras reglas para colaboradores ahora exigen las pruebas del teléfono tras cualquier cambio en el diseño de pantalla completa, los márgenes, la tarjeta o la gestión de resultados. La ejecución en el teléfono también detectó que ChatGPT convertía un B4 seleccionado en C4, una séptima más abajo, con “Cambia esta nota a Do”; una regla de la octava más cercana en la descripción de la herramienta llevó una prueba local con un modelo real de 2 de 3 ejecuciones superadas a 6 de 6.

Lo que no hemos verificado

Nuestras comprobaciones en el teléfono se hicieron en el Simulador de iOS y en el sitio web móvil de ChatGPT: ni un teléfono físico ni la app nativa. Siguen abiertos estos puntos:

• los márgenes exactos que ChatGPT envía, y cuándo; los nuestros son estimaciones que reutilizan las réplicas;
• la barra de herramientas expandida de Safari, que oculta a medias el cuadro de mensaje y el borde inferior del reproductor;
• un desplazamiento de página de unos 156 puntos que Safari dejó tras cerrarse el teclado, que un panel cross-origin no puede deshacer;
• una banda opaca de hasta unos 777 puntos cuando la pantalla completa se abrió mientras ChatGPT aún respondía;
• la hoja de respuesta de ChatGPT y su propio desmontaje del iframe, que las réplicas no imitan;
• ChatGPT en una computadora, donde la pantalla completa es un panel lateral con el cuadro de mensaje fuera de él; no leímos sus márgenes.

Una lista de comprobación para MCP Apps en teléfonos

• Deja libres los dos márgenes; si además conservas un margen de reserva para un cuadro de mensaje, usa el mayor, nunca la suma.
• Fusiona cada notificación host-context-changed y vuelve a colocar todo lo que se posicione con script, una vez por fotograma.
• Observa tus propios contenedores por si hay avisos que los desplacen.
• Cuenta con una reconstrucción a partir de un resultado de herramienta antiguo; compara su versión con la del servidor al cargar.
• Dale a tu host de prueba local los márgenes medidos en el real.
• Trata el URI del recurso de UI como una clave de caché, como aconseja la documentación de OpenAI, y tras publicar uno nuevo actualiza las herramientas de la app en ChatGPT (configuración del plugin, “Manage app”, “Refresh tools”, o sea, gestionar la app y actualizar herramientas; comprobado el 7 de octubre de 2026).
• Convierte cada hallazgo en el host real en una prueba de réplica que falle sin su arreglo.