- Die von OpenAI angekündigten ChatGPT Apps ermöglichen es Entwicklern, ihre eigenen Apps direkt in ChatGPT-Konversationen einzubetten und die mehr als 800 Millionen wöchentlich aktiven Nutzer als neuen Distributionskanal zu nutzen
- ChatGPT kann über klassische Textantworten hinaus UI-Komponenten direkt rendern, sodass reale Aufgaben wie Buchungen, Shopping oder Datenabfragen direkt im Gesprächsfluss erledigt werden können
- Der Kern dieser Struktur ist das Model Context Protocol (MCP), bei dem ein LLM externe Tools und UI-Ressourcen selektiv aufruft
- ChatGPT-Apps haben eine klar getrennte Struktur aus Backend (MCP-Server) und Frontend (UI-Komponenten), wobei React-basierte Mini-Apps in einer sicheren Sandbox ausgeführt werden
- Das MCP- und ChatGPT-Apps-Muster soll künftig auch auf andere Agenten wie Claude ausgeweitet werden und etabliert sich als neue Schnittstellenschicht zwischen konversationeller KI und bestehendem SaaS
Überblick über ChatGPT Apps
- ChatGPT Apps sind eine Funktion, mit der Entwickler und Produktteams Apps direkt in ChatGPT-Konversationen einfügen können
- Nutzer können während eines Gesprächs Aufgaben wie Hotelbuchungen, Immobiliensuche oder Online-Shopping direkt in ChatGPT ausführen
- Mit mehr als 800 Millionen wöchentlich aktiven Nutzern hat die Plattform Potenzial als Distributionskanal der nächsten Generation
Wie ChatGPT Apps funktionieren
- Alle LLMs (ChatGPT, Claude, Gemini) können nur eine begrenzte Zahl von Tools verwenden, etwa Websuche, Dateilesen, Codeausführung oder das Erzeugen von Artefakten
- Mit ChatGPT Apps können Entwickler über MCP-Tools neue Werkzeuge für das LLM verfügbar machen, die Nutzer dann einfach installieren und verwenden können
- Wenn man ohne App versucht, eine Kurzzeitunterkunft zu buchen, bekommt man nur Fotos und Regelinformationen zurück, aber keine echte Buchungsmöglichkeit
- Ist die App installiert, kann man eine passende Liste von Airbnb-Unterkünften abrufen und direkt buchen
Die drei Bestandteile einer App
-
MCP-Server (Backend)
- Der Server, mit dem ChatGPT kommuniziert, geschrieben in Python oder Node.js
- Funktioniert wie eine API und definiert die „Tools“ (Funktionen), die ChatGPT aufrufen kann
- Beispiel:
search_restaurants, book_ticket
-
Komponenten (Frontend)
- Die interaktive UI, die der Nutzer sieht
- Wird in der Regel mit React gebaut und in einer sicheren Sandbox innerhalb von ChatGPT ausgeführt
- Im Grunde eine Mini-Web-App, die innerhalb einer ChatGPT-Konversation lebt
-
ChatGPT (Host)
- Die App wird in einer eingebetteten Ansicht innerhalb von ChatGPT angezeigt
- ChatGPT entscheidet anhand der Konversation des Nutzers und der aktivierten Apps, wann eine App aufgerufen wird
Ablauf
- Wenn ein Nutzer um Hilfe bei einer Kurzzeitunterkunft bittet, führt ChatGPT automatisch mehrere Schritte aus:
1. Es entscheidet, ob eine App nützlich wäre
2. Es kontaktiert die App, um verfügbare Tools zu prüfen (z. B. Book Listing, Browse Listing)
3. Es ruft das Tool Browse Listing auf und gibt die Top 5 Unterkünfte zurück
4. Es antwortet dem Nutzer mit den Top 5 Unterkünften
- Dieser Workflow ist die Grundlage von MCP (Model Context Protocol)
- Ein KI-Agent (ChatGPT) erhält Zugriff auf Tools, die beim Erreichen eines Ziels helfen, und nutzt diese bei Nutzeranfragen selektiv
- Tools können so einfach sein wie ein Rechner zum Addieren zweier Zahlen oder so komplex wie ein Backend-Prozess zur Bildgenerierung
Anzeigemodi
- ChatGPT Apps unterstützen drei Modi zur Darstellung der UI
-
Inline-Modus
- Geeignet für: Listen, Karten, kleine Visualisierungen
- Standardmodus für alle Apps; bei Bedarf kann in andere Modi gewechselt werden
- Beispiel: Produktkarussells, Restaurantlisten
-
Vollbildmodus
- Geeignet für: Karten, komplexe Formulare, datenintensive Dashboards
- Die Komponente nimmt das gesamte ChatGPT-Fenster ein
- Sinnvoll, wenn mehr Platz benötigt wird oder man sich auf komplexe Aufgaben konzentrieren muss
- Beispiel: interaktive Immobilienkarte, Tabelleneditor
-
PiP-(Picture-in-Picture)-Modus
- Geeignet für: persistente Tools, Spiele, Echtzeit-Updates
- Die Komponente schwebt als kleines Fenster oben auf dem Bildschirm
- Geeignet für Inhalte, die sichtbar bleiben sollen, während der Nutzer weiter chattet
- Beispiel: Timer, Musikplayer, Tic-Tac-Toe-Spiel
- Wenn Wechsel zwischen den Anzeigemodi geplant sind, ist zusätzliche Sorgfalt beim UX-Pattern nötig
Einschränkungen
-
Eine Komponente pro Turn
- Wenn ChatGPT ein Tool aufruft, das eine Komponente zurückgibt, endet dieser Turn
- Mehrere Tools mit UI-Rückgabe lassen sich nicht automatisch verketten
- Beispiel: Bei „Reserviere ein Restaurant und ruf mir ein Uber“ wird zuerst die Restaurant-Komponente angezeigt; nach der Reservierung kann per Folgetrigger die Uber-Komponente erscheinen
-
Begrenzter Geltungsbereich des Komponentenstatus
- Jede Komponenteninstanz hat ihren eigenen Zustand, der nur innerhalb dieser spezifischen Nachricht erhalten bleibt
- Wenn ChatGPT eine neue Nachricht mit einer Komponente erzeugt, ist das standardmäßig eine neue Instanz mit leerem Zustand
- Status muss daher im Backend über Persistenz und Abruf verwaltet werden
-
Kein direkter DOM-Zugriff
- Komponenten laufen in einer sicheren Sandbox (iframe) und können weder auf die übergeordnete ChatGPT-Seite zugreifen noch beliebige Skripte ausführen
- Jede Kommunikation erfolgt über die
window.openai-API
-
Performance ist wichtig
- Der Komponentenstatus wird bei jeder Anfrage an das KI-Modell gesendet
- Große Payloads verlangsamen die Antwortgeschwindigkeit, daher sollte nur das Nötige übertragen werden
Praxisbeispiele
-
E-Commerce & Shopping
- Aufbau interaktiver Produktkataloge mit Preisfiltern, Warenkorb-Funktion und Checkout (meist Weiterleitung in die Haupt-App)
-
Business-Tools
- Erstellung eines Kanban-Boards, in dem Nutzer Aufgaben zwischen Spalten ziehen, Fristen festlegen und Status aktualisieren können
- Besonders stark für interne Tools, bei denen ChatGPT Fragen zu Projekten beantwortet und Nutzer gleichzeitig Maßnahmen ausführen können
-
Buchung & Reservierung
- Aufbau einer Restaurant-Reservierungskomponente mit Verfügbarkeit, Menü und Bewertungen
- Nutzer können ChatGPT nach Empfehlungen fragen und direkt über die Oberfläche reservieren
-
Daten-Dashboards
- Darstellung von Verkaufsanalysen mit interaktiven Diagrammen
- Auf die Frage „Wie lief der Umsatz in Q4?“ kann ein Dashboard bereitgestellt werden, in dem man in bestimmte Regionen oder Produkte hineinzoomen kann
-
Karten & Standort
- Anzeige interaktiver Karten mit Markern für Cafés, Immobilien oder standortbasierte Suche
- Besonders effektiv im Vollbildmodus
Anleitung zum Bau der ersten App (Beispiel: Restaurantsuche)
-
Step 1: Komponente bauen (Frontend)
- Erstellung einer React-Komponente, die mit der
window.openai.*-API interagiert, um die Kommunikation zwischen iframe-Komponente und ChatGPT zu ermöglichen
- OpenAI stellt dafür ein globales Objekt bereit, das bei der API-Interaktion hilft
-
Step 2: Tool definieren (Backend)
- Der MCP-Server definiert den „Vertrag“ mit ChatGPT
- Er teilt dem Modell mit, was es tun kann und welche Komponente nach Abschluss eines Tool-Aufrufs angezeigt werden soll
-
Step 3: Ressource registrieren (Backend)
- Die React-Komponente wird zu HTML gebündelt und als Ressource auf dem MCP-Server gehostet
- ChatGPT holt sich die
outputTemplate-URI aus dem vorherigen Schritt und fordert den Code an, der in ein iframe geladen wird
-
Step 4: Flow testen
- Nach dem Deployment des Servers:
- ChatGPT öffnen und Developer Mode aktivieren
- Zu Settings → Connected Apps (oder „My Apps“) gehen
- Auf „Connect new app“ klicken
- Server-URL eingeben (z. B.
https://my-mcp-server.com)
- Ohne OAuth verbinden
- Wenn ChatGPT das Tool
search_restaurants erkennt, kann mit der Eingabe „Find me Italian food in Brooklyn“ getestet werden
- ChatGPT ruft dann das Tool auf, holt die Daten und rendert statt Text eine interaktive React-Liste
Ausblick
- ChatGPT hat den Anfang gemacht, aber bald soll der MCP-Standard über MCP-Apps dasselbe Muster unterstützen
- Auch Claude und andere Agenten werden Mini-Apps in konversationelle Erlebnisse einbetten können
- Das Verständnis dieser Systemarchitektur und der Aufbau sinnvoller Nutzererlebnisse ebnen eine neue Form der Kommunikation zwischen KI-Produkten und klassischen SaaS-Anwendungen
Noch keine Kommentare.