https://www.tella.tv/video/windowopenai-3gnz

<aside> 🔌

Window.openai vous donne du fil à retordre ?

La communication entre votre interface et ChatGPT nécessite une compréhension fine des événements et du système de state. Nous pouvons vous débloquer.

👉 Parlons de vos défis techniques

</aside>

Comment ChatGPT communique avec l'application ?

Votre application s'affiche dans une iframe à l'intérieur de ChatGPT. Pour des raisons de sécurité, cette iframe est isolée : votre code JavaScript ne peut pas accéder directement à ChatGPT. Mais alors, comment votre interface peut-elle recevoir des données et envoyer des actions ?

La réponse : window.openai

Qu'est-ce que window.openai ?

window.openai est un objet JavaScript que ChatGPT injecte automatiquement dans votre iframe. C'est le pont de communication entre votre interface et ChatGPT.

Analogie : Imaginez que votre interface est dans une pièce fermée (l'iframe), et ChatGPT est dans une autre pièce. Vous ne pouvez pas vous parler directement, mais il y a un interphone sur le mur. Cet interphone, c'est window.openai.

Le système d'événements : la clé de la communication

La communication entre ChatGPT et votre interface fonctionne via un système d'événements JavaScript.

Le principe fondamental

Au lieu que votre interface "interroge" constamment ChatGPT pour savoir si quelque chose a changé (polling), ChatGPT envoie automatiquement des événements à chaque changement. Votre interface écoute ces événements et réagit en conséquence.

Analogie : C'est comme une sonnette à la porte. Vous n'avez pas besoin d'aller vérifier toutes les 5 secondes si quelqu'un est là. Quand quelqu'un arrive, la sonnette retentit, et vous réagissez.

L'événement principal : openai:set_globals

Quand est-il déclenché ? Chaque fois qu'une propriété de window.openai change (thème, displayMode, widgetState, toolOutput, etc.).

À quoi ça sert ? Détecter les changements d'état et mettre à jour votre interface en conséquence.

Comment ça fonctionne dans la pratique

// Votre interface écoute l'événement
window.addEventListener("openai:set_globals", (event) => {
  const changes = event.detail.globals;
  
  // Détecter les changements et réagir
  if (changes.toolOutput) {
    updateUI(changes.toolOutput);
  }
  
  if (changes.theme) {
    applyTheme(changes.theme);
  }
});

Pourquoi ce système est important

✅ Réactif : Votre interface se met à jour instantanément quand les données changent