Notre MCP App dans ChatGPT sur mobile : ce que nous avons appris

Qu’est-ce qui a cassé quand nous avons ouvert notre MCP App dans ChatGPT sur téléphone ?

Quatre choses, toutes liées au plein écran. Le panneau de ScoreStarling affiche une partition dans la conversation (comment le connecter) ; en plein écran, vous touchez des notes et interrogez la conversation à leur sujet depuis une carte de sélection qui se fixe au-dessus du lecteur sur téléphone. Le 7 octobre 2026, nous l’avons essayé sur le site mobile de ChatGPT, dans Safari sur l’iPhone 17 du simulateur iOS (402 × 874 points). Le cadre du panneau est cross-origin ; nous l’avons donc lu sur des captures d’écran.

Pourquoi une MCP App en plein écran se cache-t-elle derrière la zone de saisie de ChatGPT sur téléphone ?

Parce que ChatGPT dessine sa zone de saisie par-dessus votre cadre et vous indique la place qu’elle prend par la marge de zone de sécurité du bas. Ignorez la marge et vos commandes passent sous la zone ; ajoutez par-dessus votre propre réserve, comme nous l’avons fait, et elles flottent. La spécification MCP Apps ne décrit safeAreaInsets que par « Safe area boundaries in pixels » [limites de la zone de sécurité, en pixels], et la documentation d’OpenAI dit que la zone de saisie (le « composer ») reste superposée en plein écran sans en donner la taille (les deux vérifiées le 7 octobre 2026). Nos 47 px et 127 px sont des estimations tirées de captures d’écran.

Le 6 octobre, une conversation sur téléphone montrait notre lecteur sous la barre de titre de ChatGPT : nous avons donc placé l’en-tête sous la marge du haut et le lecteur en bas, où notre CSS réservait en plus 96 px pour une zone de saisie, au-dessus de la marge du bas. Un test local avec une marge de 34 px avait l’air correct ; le 127 + 96 de ChatGPT, non. Désormais le panneau garde la plus grande des deux valeurs, et lit aussi le 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)); }

Que change-t-il pendant qu’une MCP App est ouverte en plein écran sur téléphone ?

Les marges. Dans notre essai, le bord inférieur a bougé quand un texte en cours de saisie est passé à deux lignes et quand la barre Thinking a remplacé la zone de saisie. La spécification permet à un hôte d’envoyer ui/notifications/host-context-changed chaque fois qu’un champ du contexte change, avec seulement les champs modifiés, que la vue doit fusionner.

Notre lecteur repose sur une variable CSS et a suivi. La carte de sélection, placée par script, est restée sur place : désormais, chaque changement de contexte la replace. Notre propre bandeau a provoqué une seconde dérive : « Updated from the chat » s’affiche au-dessus de la partition pendant 20 secondes et repousse la zone de la partition vers le bas. La carte, mesurée depuis le haut de cette zone, a glissé sur le lecteur, et si quelque chose la replaçait entre-temps, elle flottait au-dessus du lecteur une fois le bandeau disparu. Un ResizeObserver sur la zone replace désormais aussi la carte, une fois par image d’animation :

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'));

Pourquoi une MCP App affiche-t-elle une ancienne version après la sortie du plein écran ?

Parce que, sur téléphone, ChatGPT construisait un nouveau panneau chaque fois qu’il passait en plein écran ou en sortait, et lui donnait le résultat d’outil d’origine de la conversation, produit avant toute modification. La spécification permet à un hôte de détruire une vue à n’importe quel moment ; un résultat d’outil ne fait que garder la trace de l’instant où son outil s’est exécuté.

Notre panneau était un mélange d’instantané et de données en direct : les images des pages et les notes de sa propre révision, plus un champ de révision actuelle lu quand le panneau le récupère. Le panneau reconstruit a dessiné la révision 0, a vu que la partition en était à la révision 3 et est passé en lecture seule. Sa vérification des modifications faites dans la conversation comparait la révision du serveur à ce champ déjà à jour, si bien que le panneau ne se remettait jamais à jour. Désormais, un panneau à qui l’hôte remet un résultat que la partition a dépassé lit une fois la révision actuelle, sauf si le résultat contient une modification suggérée en attente d’approbation, qui est censée différer.

Comment tester le comportement de ChatGPT sur téléphone sans téléphone ?

Imitez le vrai hôte dans une réplique, et prouvez que chaque test échoue sans son correctif. Nous utilisons sunpeak, qui reproduit ChatGPT et Claude pour les tests Playwright. Sa coque ChatGPT mobile (version 0.20.91) dessine une barre de titre et une zone de saisie, et signale la zone comme une marge de 92 px. Les trois tests que nous avons écrits pour ces bugs, sur un écran tactile de 402 × 874, ajoutent le reste. Par le cadre sandbox de la coque, qui est le parent du panneau comme l’est le cadre de ChatGPT, ils envoient de nouvelles marges de 127, 160, 70 et 127 px, et après une modification ils rechargent le panneau et lui remettent le résultat d’outil d’origine. Un autre test modifie la partition en dehors du panneau, comme le fait la conversation. Le lecteur doit finir de 0 à 24 px au-dessus de la plus grande des deux valeurs, la marge ou 96 px, et la carte de 0 à 16 px au-dessus du lecteur.

Une exécution de ces trois tests a pris 59,9 secondes. Un quatrième, ajouté le même jour, vérifie l’en-tête sur une seule ligne de l’éditeur sur téléphone et le lecteur ; nos règles pour les contributeurs exigent désormais les tests sur téléphone après toute modification de la mise en page plein écran, des marges, de la carte ou du traitement des résultats. L’exécution sur téléphone a aussi révélé que ChatGPT transformait un B4 sélectionné en C4, une septième plus bas, pour « Changez cette note en do » ; une règle de l’octave la plus proche dans la description de l’outil a fait passer un test local avec un vrai modèle de 2 exécutions réussies sur 3 à 6 sur 6.

Ce que nous n’avons pas vérifié

Nos vérifications sur téléphone ont eu lieu dans le simulateur iOS et sur le site mobile de ChatGPT : pas de téléphone physique, pas d’application native. Restent ouverts :

• les marges exactes que ChatGPT envoie, et quand ; les nôtres sont des estimations que les répliques réutilisent ;
• la barre d’outils développée de Safari, qui cache à moitié la zone de saisie et le bord inférieur du lecteur ;
• un défilement de page d’environ 156 points que Safari a laissé après la fermeture du clavier, et qu’un panneau cross-origin ne peut pas annuler ;
• une bande opaque pouvant atteindre environ 777 points quand le plein écran s’est ouvert alors que ChatGPT répondait encore ;
• la feuille de réponse de ChatGPT et la destruction de son propre iframe, que les répliques n’imitent pas ;
• ChatGPT sur ordinateur, où le plein écran est un panneau latéral dont la zone de saisie est à l’extérieur ; nous n’avons pas lu ses marges.

Une liste de contrôle pour les MCP Apps sur téléphone

• Laissez libres les deux marges ; si vous gardez aussi une valeur de repli pour une zone de saisie, prenez la plus grande, jamais la somme.
• Fusionnez chaque notification host-context-changed et replacez tout ce qui est positionné par script, une fois par image.
• Observez vos propres conteneurs pour repérer les bandeaux qui les déplacent.
• Attendez-vous à une reconstruction à partir d’un ancien résultat d’outil ; comparez sa version à celle du serveur au chargement.
• Donnez à votre hôte de test local les marges mesurées sur le vrai.
• Traitez l’URI de la ressource d’interface comme une clé de cache, comme le conseille la documentation d’OpenAI, et après en avoir publié une nouvelle, actualisez les outils de l’application dans ChatGPT (réglages du plug-in, puis « Manage app » [Gérer l’application] et « Refresh tools » [Actualiser les outils] ; vérifié le 7 octobre 2026).
• Transformez chaque constat fait sur le vrai hôte en test de réplique qui échoue sans son correctif.