Comment créer votre première app ChatGPT

• ChatGPT Apps, annoncé par OpenAI, permet aux développeurs d’intégrer directement leurs apps dans les conversations ChatGPT et d’utiliser plus de 800 millions d’utilisateurs actifs hebdomadaires comme nouveau canal de distribution
• ChatGPT peut désormais aller au-delà des réponses textuelles et rendre directement des composants UI, ce qui permet d’exécuter de vraies tâches comme les réservations, le shopping ou la consultation de données au sein du flux de conversation
• Le cœur de cette architecture est le Model Context Protocol (MCP), qui permet à un LLM d’appeler sélectivement des outils externes et des ressources UI
• Les apps ChatGPT reposent sur une séparation claire entre le backend (serveur MCP) et le frontend (composants UI), avec des mini-apps basées sur React exécutées dans un sandbox sécurisé
• Le modèle MCP et le pattern des ChatGPT Apps devraient à terme s’étendre à d’autres agents comme Claude, et s’imposent comme une nouvelle couche d’interface reliant l’IA conversationnelle aux SaaS existants

---

Aperçu des ChatGPT Apps

• Les ChatGPT Apps permettent aux développeurs et aux équipes produit d’insérer directement des apps dans les conversations ChatGPT
• Les utilisateurs peuvent effectuer directement dans ChatGPT des tâches comme réserver un hôtel, rechercher un bien immobilier ou faire des achats en ligne pendant la conversation
• Avec plus de 800 millions d’utilisateurs actifs hebdomadaires, la plateforme présente un fort potentiel comme canal de distribution de nouvelle génération

Comment fonctionnent les ChatGPT Apps

• Tous les LLM (ChatGPT, Claude, Gemini) ne peuvent utiliser qu’un ensemble limité d’outils comme la recherche web, la lecture de fichiers, l’exécution de code ou la génération d’artefacts
• Les ChatGPT Apps permettent aux développeurs d’exposer de nouveaux outils au LLM via des outils MCP, tout en facilitant leur installation et leur utilisation par les utilisateurs
• Si l’on tente de réserver un hébergement de courte durée sans app, seules des photos et des informations sur les règles sont renvoyées, sans possibilité de réserver réellement
• Une fois l’app installée, il devient possible d’obtenir une liste de logements Airbnb adaptés à la demande et de réserver immédiatement

Les trois composants d’une app

• Serveur MCP (backend)

  • Il s’agit du serveur avec lequel ChatGPT communique, écrit en Python ou en Node.js
  • Il fonctionne comme une API et définit les « outils » (fonctions) que ChatGPT peut appeler
    • Exemple : search_restaurants, book_ticket

• Composants (frontend)

  • L’UI interactive que voit l’utilisateur
  • Généralement construite avec React et exécutée dans le sandbox sécurisé de ChatGPT
  • On peut la voir comme une mini-webapp vivant à l’intérieur d’une conversation ChatGPT

• ChatGPT (hôte)

  • L’app s’affiche dans une vue intégrée au sein de ChatGPT
  • ChatGPT décide quand invoquer l’app en fonction de la conversation de l’utilisateur et des apps activées

Flux de fonctionnement

• Lorsqu’un utilisateur demande de l’aide pour un hébergement de courte durée, ChatGPT exécute automatiquement plusieurs étapes :
  1. déterminer si une app serait utile
  2. contacter l’app pour vérifier les outils disponibles (ex. : Book Listing, Browse Listing)
  3. appeler l’outil Browse Listing pour renvoyer les 5 meilleurs logements
  4. répondre à l’utilisateur avec ces 5 meilleurs logements
• Ce workflow repose sur le MCP (Model Context Protocol)
• L’agent IA (ChatGPT) reçoit l’accès à des outils qui l’aident à atteindre un objectif, puis les utilise de manière sélective lorsqu’un utilisateur en fait la demande
• Un outil peut être aussi simple qu’une calculatrice qui additionne deux nombres ou aussi complexe qu’un processus backend de génération d’images

Modes d’affichage

• Les ChatGPT Apps prennent en charge trois modes d’affichage UI

• Mode inline

  • Cas d’usage adaptés : listes, cartes, petites visualisations
  • C’est le mode par défaut de toutes les apps, avec possibilité de passer à un autre mode si nécessaire
  • Exemples : carrousel de produits, liste de restaurants

• Mode plein écran

  • Cas d’usage adaptés : cartes, formulaires complexes, tableaux de bord riches en données
  • Le composant occupe toute la fenêtre ChatGPT
  • À utiliser lorsqu’il faut plus d’espace ou se concentrer sur une tâche complexe
  • Exemples : carte interactive de biens immobiliers, éditeur de feuille de calcul

• Mode PiP (Picture-in-Picture)

  • Cas d’usage adaptés : outils persistants, jeux, mises à jour en temps réel
  • Le composant flotte dans une petite fenêtre en haut de l’écran
  • Adapté aux éléments qui doivent rester visibles pendant que l’utilisateur continue à discuter
  • Exemples : minuteur, lecteur de musique, jeu de morpion
  • Si vous prévoyez des transitions entre modes d’affichage, il faut accorder davantage d’attention aux patterns UX

Contraintes

• Un seul composant par tour

  • Quand ChatGPT appelle un outil qui renvoie un composant, ce tour de conversation se termine
  • Il n’est pas possible d’enchaîner automatiquement plusieurs outils renvoyant une UI
  • Exemple : pour la demande « réserve un restaurant et appelle-moi un Uber », on affiche d’abord le composant du restaurant, puis celui d’Uber est affiché via un déclencheur ultérieur après la réservation

• Portée limitée de l’état des composants

  • Chaque instance de composant possède son propre état, conservé uniquement dans ce message précis
  • Lorsque ChatGPT génère un nouveau message avec un composant, il s’agit par défaut d’une nouvelle instance avec un état vide
  • Il faut donc gérer l’état via persistance et récupération côté backend

• Pas d’accès direct au DOM

  • Les composants s’exécutent dans un sandbox sécurisé (iframe) et ne peuvent ni accéder à la page ChatGPT parente ni exécuter des scripts arbitraires
  • Toute communication passe par l’API window.openai

• Les performances sont importantes

  • L’état du composant est envoyé au modèle d’IA à chaque requête
  • Les payloads volumineux ralentissent les temps de réponse, il faut donc n’envoyer que le nécessaire

Cas d’usage concrets

• E-commerce & shopping

  • Construire un catalogue produit interactif avec filtrage par prix, ajout au panier et paiement (généralement redirigé vers l’app principale)

• Outils métier

  • Créer un tableau Kanban où l’utilisateur peut déplacer des tâches entre colonnes, définir des échéances et mettre à jour leur statut
  • Particulièrement puissant pour les outils internes, où ChatGPT peut répondre à des questions sur un projet tout en permettant à l’utilisateur d’agir en même temps

• Booking & réservations

  • Construire un composant de réservation de restaurant affichant disponibilités, menu et avis
  • L’utilisateur peut demander des recommandations à ChatGPT puis réserver directement via l’interface

• Tableaux de bord de données

  • Afficher des analyses de ventes à l’aide de graphiques interactifs
  • À la question « Et le chiffre d’affaires du T4 ? », fournir un tableau de bord permettant de descendre dans le détail par région ou par produit

• Cartes & localisation

  • Afficher une carte interactive avec marqueurs pour des cafés, des biens immobiliers ou des recherches basées sur la localisation
  • Particulièrement efficace en mode plein écran

Guide pour créer votre première app (exemple d’app de recherche de restaurants)

• Step 1: construire le composant (frontend)

  • Créer un composant React qui interagit avec l’API window.openai.* pour permettre la communication entre le composant iframe et ChatGPT
  • OpenAI fournit un global pour faciliter les interactions avec l’API

• Step 2: définir les outils (backend)

  • Le serveur MCP définit le « contrat » avec ChatGPT
  • Il indique au modèle ce qu’il peut faire et quel composant afficher une fois l’appel d’outil terminé

• Step 3: enregistrer les ressources (backend)

  • Bundler le composant React en HTML et l’héberger comme ressource sur le serveur MCP
  • ChatGPT récupère alors l’URI outputTemplate de l’étape précédente et demande le code à intégrer en iframe

• Step 4: tester le flux

  • Après déploiement du serveur :
    • ouvrir ChatGPT et activer le Developer Mode
    • aller dans Settings → Connected Apps (ou « My Apps »)
    • cliquer sur « Connect new app »
    • saisir l’URL du serveur (ex. : https://my-mcp-server.com)
    • se connecter sans OAuth
  • Une fois que ChatGPT détecte l’outil search_restaurants, testez avec « Find me Italian food in Brooklyn »
  • ChatGPT appelle alors l’outil, récupère les données et rend une liste React interactive au lieu d’une simple réponse textuelle

Perspectives

• ChatGPT a ouvert la voie, mais bientôt le standard MCP prendra en charge le même pattern via les apps MCP
• Claude et d’autres agents pourront eux aussi injecter des mini-apps dans les expériences conversationnelles
• Comprendre cette architecture système et la manière de concevoir des expériences réellement utiles pour les utilisateurs ouvre une nouvelle forme de communication entre les produits IA et les applications SaaS plus classiques