Unsere MCP-App in ChatGPT auf dem Handy: was wir gelernt haben

Was ging kaputt, als wir unsere MCP-App in ChatGPT auf dem Handy geöffnet haben?

Vier Dinge, alle rund um den Vollbildmodus. Das Panel von ScoreStarling zeigt eine Partitur im Chat (so verbindest du es); im Vollbild tippst du Noten an und fragst den Chat dazu über eine Auswahlkarte, die auf dem Handy über dem Player andockt. Am 7. Oktober 2026 haben wir es auf der mobilen Website von ChatGPT ausgeführt, in Safari auf dem iPhone 17 des iOS-Simulators (402 × 874 Punkte). Der Frame des Panels ist Cross-Origin, deshalb haben wir die Werte aus Screenshots gelesen.

Warum versteckt sich eine MCP-App im Vollbild auf dem Handy hinter dem Nachrichtenfeld von ChatGPT?

Weil ChatGPT sein Nachrichtenfeld über deinen Frame zeichnet und dir über den unteren Safe-Area-Inset sagt, wie viel es abdeckt. Ignorierst du den Inset, sitzen deine Bedienelemente unter dem Feld; schlägst du, wie wir es taten, einen eigenen Zuschlag obendrauf, schweben sie. Die Spezifikation von MCP Apps beschreibt safeAreaInsets nur als „Grenzen des sicheren Bereichs in Pixeln“, und die Dokumentation von OpenAI sagt, der Composer bleibe im Vollbild darübergelegt, ohne seine Größe zu nennen (beides geprüft am 7. Oktober 2026). Unsere 47 px und 127 px sind Schätzungen aus Screenshots.

Am 6. Oktober zeigte eine Unterhaltung auf dem Handy unseren Player unter der Titelleiste von ChatGPT, also verschoben wir den Header unter den oberen Inset und den Player nach unten, wo unser CSS zusätzlich zum unteren Inset noch 96 px für ein Nachrichtenfeld freihielt. Ein lokaler Test mit einem Inset von 34 px sah richtig aus; ChatGPTs 127 + 96 nicht. Jetzt behält das Panel den größeren der beiden Werte und liest auch window.openai.safeArea von 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)); }

Was ändert sich, während eine MCP-App im Vollbild auf dem Handy offen ist?

Die Insets. In unserem Durchlauf wanderte der untere Rand, als ein Entwurf auf zwei Zeilen wuchs und als die Thinking-Leiste das Nachrichtenfeld ersetzte. Die Spezifikation erlaubt einem Host, ui/notifications/host-context-changed zu senden, sobald sich ein Kontextfeld ändert, und zwar nur mit den geänderten Feldern, die die View zusammenführen soll.

Unser Player hängt an einer CSS-Variable und folgte. Die Auswahlkarte wird per Skript platziert und blieb zurück, deshalb platziert jetzt jede Kontextänderung sie neu. Unser eigener Hinweis verursachte eine zweite Abweichung: „Updated from the chat“ erscheint 20 Sekunden lang über der Partitur und schiebt den Partiturbereich nach unten. Die Karte, vom oberen Rand dieses Bereichs aus gemessen, rutschte über den Player, und wenn sie in der Zwischenzeit irgendetwas neu platzierte, schwebte sie über dem Player, sobald der Hinweis verschwand. Ein ResizeObserver auf dem Bereich platziert die Karte jetzt ebenfalls, einmal pro Animation-Frame:

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

Warum zeigt eine MCP-App nach dem Verlassen des Vollbilds eine alte Version?

Weil ChatGPT auf dem Handy bei jedem Wechsel in den Vollbildmodus oder zurück ein neues Panel baute und ihm das ursprüngliche Tool-Ergebnis der Unterhaltung gab, das vor allen Bearbeitungen entstanden war. Die Spezifikation erlaubt einem Host, eine View jederzeit abzubauen; ein Tool-Ergebnis hält nur den Moment fest, in dem sein Tool lief.

Unseres war halb Snapshot, halb live: Seitenbilder und Noten für die eigene Revision, dazu ein Feld mit der aktuellen Revision, das gelesen wird, wenn das Panel es abruft. Das neu gebaute Panel zeichnete Revision 0, sah, dass die Partitur bei Revision 3 stand, und wurde schreibgeschützt. Seine Prüfung auf Chat-Bearbeitungen verglich die Revision des Servers mit diesem bereits aktuellen Feld, sodass sie nie aufholte. Jetzt liest ein Panel, dem der Host ein Ergebnis gibt, über das die Partitur schon hinaus ist, die aktuelle Revision einmal, es sei denn, das Ergebnis enthält eine vorgeschlagene Änderung, die auf Freigabe wartet und sich absichtlich unterscheiden soll.

Wie testet man das Handyverhalten von ChatGPT ohne Handy?

Ahme den echten Host in einer Nachbildung nach und beweise, dass jeder Test ohne seinen Fix fehlschlägt. Wir nutzen sunpeak, das ChatGPT und Claude für Playwright-Tests nachbildet. Seine mobile ChatGPT-Shell (Version 0.20.91) zeichnet eine Titelleiste und ein Nachrichtenfeld und meldet das Feld als Inset von 92 px. Die drei Tests, die wir für diese Bugs geschrieben haben, auf einem Touchscreen mit 402 × 874, ergänzen den Rest. Über den Sandbox-Frame der Shell, der wie der Frame von ChatGPT das übergeordnete Fenster des Panels ist, senden sie neue Insets von 127, 160, 70 und 127 px, und nach einer Bearbeitung laden sie das Panel neu und geben ihm das ursprüngliche Tool-Ergebnis. Ein weiterer Test bearbeitet die Partitur außerhalb des Panels, so wie es der Chat tut. Der Player muss 0–24 px über dem größeren Wert aus Inset und 96 px landen, die Karte 0–16 px über dem Player.

Ein Durchlauf dieser drei dauerte 59,9 Sekunden. Ein vierter, am selben Tag hinzugefügt, prüft die einzeilige Kopfzeile und den Player des Handy-Editors, und unsere Regeln für Mitwirkende verlangen die Handy-Tests jetzt nach jeder Änderung an Vollbild-Layout, Insets, Karte oder Ergebnisverarbeitung. Der Handy-Durchlauf fing auch auf, dass ChatGPT bei „Ändere diese Note in C“ ein ausgewähltes H4 in C4 verwandelte, eine Septime tiefer; eine Regel zur nächstgelegenen Oktave in der Beschreibung des Tools hob einen lokalen Test mit einem echten Modell von 2 von 3 bestandenen Läufen auf 6 von 6.

Was wir nicht überprüft haben

Unsere Handy-Prüfungen liefen im iOS-Simulator und auf der mobilen Website von ChatGPT: kein physisches Handy, keine native App. Noch offen:

• die genauen Insets, die ChatGPT sendet, und wann; unsere sind Schätzungen, die die Nachbildungen wiederverwenden;
• die ausgeklappte Toolbar von Safari, die das Nachrichtenfeld und den unteren Rand des Players halb verdeckt;
• ein Seiten-Scroll von etwa 156 Punkten, den Safari nach dem Schließen der Tastatur übrig ließ und den ein Cross-Origin-Panel nicht zurücknehmen kann;
• ein undurchsichtiges Band von bis zu etwa 777 Punkten, wenn das Vollbild geöffnet wurde, während ChatGPT noch antwortete;
• das Antwort-Sheet von ChatGPT und der Abbau seines eigenen iframes, den die Nachbildungen nicht nachahmen;
• ChatGPT auf einem Computer, wo das Vollbild ein Seitenpanel ist und das Nachrichtenfeld außerhalb liegt; seine Insets haben wir nicht gelesen.

Eine Checkliste für MCP-Apps auf dem Handy

• Halte beide Insets frei; wenn du zusätzlich einen Fallback für ein Nachrichtenfeld behältst, nimm den größeren Wert, nie die Summe.
• Führe jede host-context-changed-Benachrichtigung zusammen und platziere alles, was per Skript positioniert ist, neu, einmal pro Frame.
• Beobachte deine eigenen Container auf Hinweise, die sie verschieben.
• Rechne mit einem Neuaufbau aus einem alten Tool-Ergebnis; vergleiche beim Laden seine Version mit der des Servers.
• Gib deinem lokalen Test-Host die Insets, die am echten gemessen wurden.
• Behandle die URI der UI-Ressource als Cache-Schlüssel, wie es die Dokumentation von OpenAI empfiehlt, und aktualisiere nach dem Veröffentlichen einer neuen die Tools der App in ChatGPT (Plug-in-Einstellungen, „Manage app“ (App verwalten), „Refresh tools“ (Tools aktualisieren); geprüft am 7. Oktober 2026).
• Mach aus jedem Befund am echten Host einen Test an der Nachbildung, der ohne seinen Fix fehlschlägt.