window.openai

de cette vidéo, c'est de vous expliquer comment fonctionne Windows pour OpenAI.

L'explication est un peu technique, c'est un objet Javascript que ChatGPT injecte automatiquement dans votre E-Frame, c'est le point de communication entre votre interface et ChatGPT.

Ce qu'il faut comprendre, c'est qu'un système d'événements qui va mettre des événements qui se passent quand chatgpt agit.

Je l'ai déjà expliqué dans les précédentes explications, mais lorsque chatgpt appelle un tool, il va remplir une variable qui s'appelle windows.openAI.toolInput que vous pouvez appeler pour, par exemple, mettre le chargement de votre E-Frame.

ToolOutput pour hydrater votre composant, pour mettre les données de votre composant.

L'événement principal s'appelle OpenAI SetGlobals qui permet d'avoir tout un tas d'éléments qu'on va voir juste après.

Il y a deux types de communication, c'est recevoir des informations de ChatGPT, c'est la principale, et envoyer des actions à ChatGPT.

Ça vous allez voir, c'est vraiment super intéressant parce que ça vous donne des possibilités au niveau UX qui sont incroyables.

Donc ce qu'on peut lire, le premier, le plus utilisé, celui que vous utiliserez tout le temps, c'est Windows OpenAI Tool Output.

En fait, c'est globalement là où sont stockées les données.

Donc par exemple, vous voulez récupérer la liste de tasks, vous mettez dans Tool Output, Windows.OpenAI Tool Output, retournez.

Voilà, donc là globalement, ça vous retourne votre liste de tâches.

OK ?

WidgetState, alors WidgetState, ça c'est, ça a été mon bourreau car je n'avais pas compris son fonctionnement.

Ça permet, dans un seul widget, de mettre des informations que chaque GPT va pouvoir lire.

Pourquoi je dis un seul widget ?

Dans la démo, on utilise deux widgets.

Le widget pour lister les agences, le widget pour remplir un brief.

A chaque fois que vous générez un nouveau widget, ça supprime les données de l'ancien.

donc vous n'avez pas de persistance des données entre les deux widgets sauf si vous êtes dans une conversation en fullscreen comme ce que je vous expliquais dans la vidéo précédente.

Mais du coup à quoi ça sert cette widget state ?

ça sert par exemple à récupérer les données que l'utilisateur a modifiées.

Si par exemple vous mettez un filtre sur une catégorie de produit c'est l'utilisateur qui change en petit temps En fait, il faut que ChatGPT le sache dans certains cas pour savoir ce qui a changé ou ce qui n'a pas changé.

Si admettons, il y a trois filtres, on va dire catégorie de produits, prix et nombre d'étoiles.

L'utilisateur met 5 étoiles minimum.

En prix, il met 100 euros.

Et là, dans ChatGPT, l'utilisateur va dire je voudrais voir des claviers d'ordinateur.

en fait il faut que chatgpt sache quand il va appeler le tool qu'il faut mettre 5 étoiles et 100 euros en budget et ça on le met dans setWidgetState et si vous le mettez pas dans setWidgetState en fait chatgpt va utiliser d'autres données que 100 euros et 5 étoiles ok ?

ça permet en fait à chatgpt de comprendre ce qu'il se passe dans le composant parce qu'il voit pas le composant comme nous on le voit OpenAI.team, c'est de savoir si JGVT est en light ou en dark, si vous avez une version light ou dark de votre IA.

OpenAI.local, c'est pour connaître la langue.

Comme ça, si vous avez une version anglaise, française ou n'importe quelle langue, vous pouvez afficher l'app avec une langue différente.

DisplayMode, ça permet de savoir si c'est en inline, fullscreen ou PIP.

PIP, on n'a pas encore testé, donc on ne sait pas.

mais justement en fait chatgpt ça c'est un mix entre lecture et action c'est-à-dire que si vous voulez alors je ne sais plus si c'est noté plus loin c'est une fonction requestDisplayMode donc ça ça permet de savoir en fait en quel display mode on est.

Windows.openAI.max8 Ça c'est pour la hauteur maximale disponible pour votre interface en pixels.

C'est pour éviter par exemple que le composant fasse toute la conversation et que vous puissiez rien voir.

User-agence pour savoir justement si c'est anti-mobile, les capabilités de ce que l'utilisateur est en train d'utiliser comme appareil.

ARIA c'est pour de l'affichage, c'est pour les marges de sécurité, pour éviter des encoches d'écran.

Il me semble surtout que c'est pour le chat en dessous, en fullscreen.

Ce qu'on peut faire, vous pouvez donc appeler un tool côté MCP Server, Donc avec CoolToolToolNameArguments, c'est ce que je vous disais, mais du coup il faut, comme je vous le disais dans la précédente vidéo, que la réponse du tool permette d'hydrater tout le composant.

SetWidgetState, c'est ce que je vous expliquais.

En fait, quand vous modifiez quelque chose, par exemple un filtre, vous allez utiliser SetWidgetState.

pour que chatgpt sache ce qu'il se passe dans l'appareil vous voyez par exemple si l'utilisateur change la vue switch to gridview en fait il faut que chatgpt sache qu'on est en gridview il faut que ça fasse maximum 4000 tokens send follow up message C'est une feature incroyable.

Honnêtement, je pense que c'est la feature la plus intéressante avec le fait que quand on soit en fullscreen, le widget persiste, on puisse appeler d'autres calls depuis le chat et mettre à jour le widget.

Ça c'est vraiment cool.

Et en fait, ça permet, par exemple, si vous cliquez sur un bouton, d'envoyer un message à ChatGPT.

Nous ce qu'on a fait dans l'exemple, vous voyez ici dans l'exemple concret, créer un report, windows.openAI, on voit par exemple un dashboard avec des KPIs, le taux de conversion du site il a chuté.

En fait si JJPT est connecté avec des MCP à votre Google Analytics, à votre Google Search Console, à un Hotjar, à un Postog ou des outils d'analytics, on peut lui dire crée un rapport détaillé avec les tâches sélectionnées.

Dans le prompt on mettrait en disant GA4, l'AGSC, Postog et Hotjar et en fait il va chercher toutes ces informations et il peut vous faire un rapport.

On peut même imaginer qu'il crée un écran qui est fait pour faire des rapports compliqués où il va récupérer toutes les données et créer le rapport.

Ou sinon, par exemple, une idée que j'avais eue, c'est que ça vous affiche l'email un email, vous pouvez dans une liste l'item, c'est un truc dépliant, vous lisez l'email et si le mail n'est pas trop compliqué et que vous pensez que chatgpt peut répondre à l'email c'est marqué par répond à l'email et bim il s'envoie un message répond à cet email avec toutes les informations ça répond à l'email et ça l'envoie automatiquement sans que vous ayez à sortir de chat gpt il envoie l'email et ensuite il relance un tool genre les emails il vous dit bon c'est bon ça a été envoyé est-ce que tu veux que je traite un autre email et là tu peux cliquer sur un autre email ça t'as juste à cliquer pour envoyer des emails donc ça c'était une idée request display mode donc ça c'est pour changer justement ce que je vous disais full screen inline ou pip ça c'est pour ouvrir un lien externe et comme ça changeGPT sait que t'as été redirigé et ça je vous laisserai le lire c'est plus avancé je vais pas m'étaler là-dessus là il y a des cas d'usage donc vous voyez par exemple data windows.openAI.output affiché dans lui, data view, data égal, voilà ça c'est pour ceux qui veulent faire du code a priori il me semble que le code est plutôt juste Donc voilà.

Là vous avez la référence de toutes les apis qui n'existent pas ailleurs avec ce que ça fait.

Et là vous avez un petit ratio.

Donc voilà, dans la prochaine vidéo je vais vous montrer comment créer une app sur Xampp.