Comprendre le Fonctionnement de ChatGPT 🤖

En fait, ça explique comment faire, mais c'est pas terrible.

Par exemple, sur la partie de Lost API qu'on va voir dans deux sections, Je vais vous expliquer ce que c'est, ne vous inquiétez pas.

Il n'y a pas les références.

Typiquement, pour bien avancer et pour pouvoir bien compter de la GPT, on a besoin des références pour pouvoir comprendre le comportement.

Vu qu'il n'y a pas les références, on ne sait pas exactement comment fonctionnent ces éléments.

Mais on a fait des tests et on a vraiment, je pense qu'on a bien dégrossi le sujet.

En fait le concept, le truc de base à comprendre c'est le serveur mcp.

Le serveur mcp c'est globalement un accès à une application pour les IA.

Pour faire simple je pense qu'une bonne analogie ça serait d'imaginer que vous onboardez un nouvel employé sur une application et vous allez lui donner des accès.

Par exemple, si on parle d'une to-do list, vous allez lui donner un accès pour créer une nouvelle tâche, modifier l'état d'une tâche, remplir une tâche, toutes ces actions.

Alors le MCP c'est des actions informatiques donc logicielles pas comme ce qu'on peut imaginer comme tâche qu'un humain ferait sur un écran mais c'est vraiment le même principe de vous onboarder chatgpt sur une application comme si c'était un employé avec certains droits.

Ce qu'il faut comprendre pour les apps chatgpt c'est qu'il y a deux types d'éléments qui sont dans un MCP.

Il y a les tools.

Alors les tools c'est justement ce qui permet de faire une action.

Donc là par exemple, créer une tâche, rechercher un client, afficher un tableau de bord.

Afficher un tableau de bord, on va revenir là dessus juste après quand on verra comment faire afficher ce qui s'appelle un widget du coup, à ta GPT.

Il faut que le tool contienne un nom, une description, des paramètres d'entrée.

Donc les paramètres d'entrée, en fait, Si vous voulez créer une tâche, il faut que vous mettiez dans l'outil que pour créer une tâche, chat.gpt doit renseigner un nom, un statut.

Il faut qu'on dise à chat.gpt que les statuts disponibles pour une tâche, c'est par exemple backlog affaire en cours terminé.

Ça, il faut que chat.gpt le sache, sinon ça ne sera pas bien fait.

Il faut expliquer ça dans les paramètres d'entrée.

Une sortie, c'est ce que l'outil renvoie, donc des données structurées, plus éventuellement une interface visuelle, et on va revenir là-dessus dans la section d'après pour que vous compreniez comment ça fonctionne.

Les données structurées, c'est ce qui va permettre de remplir l'interface de JGPT.

Si on reprend l'exemple d'un kanban ou d'une liste de tâches.

La liste de tâches, il faut que ce soit une liste de tâches avec pour chaque tâche le nom de la tâche, l'état, la priorité, une description, une personne assignée.

Les ressources, dans ce cas précis, dans les apps, c'est des composants visuels qui s'affichent dans ChatGPT.

On va dire à ChatGPT Tu peux afficher X écrans.

Dans l'exemple de la Marketplace, c'est la liste des agences puis le formulaire pour pré-remplir un brief.

Donc chaque GPT sait qu'il y a ces ressources là.

Cette ressource contient du HTML, du CSS, du Javascript et embarqué, un identifiant unique, lui, WidgetCampBoard.html, des règles de sécurité, A savoir que dans l'exemple avec Xano, on prend du HTML, du CSS et du Javascript en Vanya, c'est-à-dire qu'il n'y a pas de framework, il n'y a pas de librairie, parce qu'on ne peut faire que comme ça avec Xano.

Mais si vous développez des apps en vibe codant, vous pouvez tout à fait utiliser un framework comme React, Vue.js, Angular, ce genre de choses, si vous êtes plus à l'aise avec cet outil.

Alors, comment ça fonctionne dans la pratique ?

Vraiment, là on va voir exactement ce qu'il se passe l'utilisateur fait une demande montre moi mes tâches en cours le lgpt l'analyse et choisit le bon tool sur cette étape j'ai fait pas mal de tests avec l'agence pour faire la démo si on lui explique pas de façon claire pour le moment qu'il faut utiliser cette application pour faire cette tâche ça fonctionne moyennement genre ça fonctionne environ 40% du temps donc il faut bien dire affiche les tâches que j'ai à faire avec mon application gestion de tâches après j'ai pas fait de test là dessus Le truc c'est que Marketplace Agency c'est une tâche que ChatGPT pourrait faire sans l'application.

L'atout de Marketplace Agency c'est que ça peut remplir le brief avec l'IA et l'envoyer plus rapidement.

Donc vous n'avez pas besoin de prendre l'agence, aller sur le site, trouver le formulaire de contact et le contacter.

Là vous faites tout dans l'interface.

Mais du coup la première tâche qui va déclencher l'utilisation de l'application, ChatGPT peut le faire donc il y a peut-être une confusion là-dessus et si on a une app de gestion de tâches peut-être qu'il déclenchera plus souvent le tool rechercher les tâches pour afficher les tâches du tableau Kanban que la marketplace adjacency ça on a encore pas trop d'exemples chatgpt appelle votre serveur mcp de manière asynchrone ça c'est très très très important à comprendre c'est à dire que chatgpt il va aller chercher afficher tableau Kanban ok Ce qui va se passer, c'est qu'en fait chatgpt, vu que tout l'affiché tableau commandement est relié à un écran, il va afficher rapidement l'écran.

Sauf que, comme vous le voyez dans la démo, on doit valider l'action.

Ce qui fait que le temps que chatgpt récupère la liste de tâches, l'écran est déjà arrivé.

Et vous ne pouvez pas faire arriver l'écran avec les données déjà chargées.

Et ce qu'il faut faire, c'est que vous devez faire en sorte que le composant soit en état de chargement, attendent l'événement qu'on verra dans quelques sections qui s'appellent Windows.OpenAI.ToolOutput pour utiliser la réponse du MCPServer pour remplir les données du composant.

Donc si je résume, j'envoie la requête, ça appelle le mcp ça affiche le widget qui doit avoir une fonction où en fait il attend que windows.openAI.tooloutput se remplissent pour remplir le composant parce qu'en fait ce qui se passe et c'est ce qu'on verra dans la quatrième partie sur comment chatgpt communique avec votre widget en fait lorsqu'il y a une réponse du mcp chatgpt le dit à votre widget il crée un événement et votre widget il peut suivre cet événement un petit peu comme s'il écoutait quelqu'un il y a quelqu'un qui dit hop c'est bon on a reçu une réponse du tool chatgpt enfin votre widget il l'écoute il voit la réponse ok ça correspond aux données de mon widget bim je l'ai rempli ok Si ce n'est pas clair, n'hésitez pas à poser des questions à ChatGPT sur ce sujet, mais à bien lui expliquer qu'il faut récupérer les données dans Windows.OpenAI.ToolOutput Donc voilà, ça affiche.

En parallèle, votre serveur traite la demande, donc ce que je vous expliquais.

Le serveur renvoie une réponse, donc ça va ressembler à ça, mais pas de panique, on ne va pas s'attarder là tout de suite sur le code.

ChatGPT injecte les données dans l'interface, donc ce que je vous disais Windows OpenAI Tool Output, en fait c'est l'endroit où ChatGPT va mettre les données du Tool Output et ensuite, grâce à ça, vous allez remplir votre composant.

et ensuite l'utilisateur peut interagir avec le composant.

Donc en fait, on a un truc qui s'appelle Windows.OpenAI.

Un logiciel, comment ça fonctionne ?

Enfin, une application web, comment ça fonctionne ?

Vous avez Windows qui est dans votre navigateur, c'est la fenêtre.

C'est vraiment la fenêtre.

Et vous pouvez faire des actions sur cette fenêtre quand vous mettez des lignes de code.

Certaines applications, en l'occurrence .openAI, proposent ce qui s'appelle des hosts API.

Des hosts API, c'est des actions qui sont possibles uniquement sur leur fenêtre.

Windows .openAI, c'est des actions qui sont possibles uniquement dans le chat GPT, qui vont permettre de faire communiquer chat GPT ou les événements dans le chat gpt avec votre widget c'est pas le chat gpt qui communique avec le widget c'est les événements qui vont se passer et on va voir toute la liste des événements et toutes les informations après un petit peu plus loin et windows.openai.tooloutput comme je vous le disais contient les données que votre serveur a renvoyé qui permet ensuite de remplir votre composant On va se réattarder sur ce qui s'appelle un diagramme de séquence pour vous expliquer vraiment comment ça se passe pour que vous compreniez bien toute la logique.

Là, il y a toute la logique qui est correcte normalement.

Donc voilà, l'utilisateur, il veut afficher le tableau des tâches.

Montre-moi mes tâches.

Ça l'envoie à chatgpt, chatgpt va analyser, il va appeler le serveur mcp avec le tool affiché tableau Kanban le tool va renvoyer quasiment immédiatement l'URI du Kanban Board HTML je vais vous expliquer cette partie là comment elle fonctionne juste après avec l'URI 4GPT ou avec le code HTML avec l'URI 4GPT détecte que c'est la ressource UI widget Kanban machin et il affiche l'iframe l'état, il est en composant, et l'usateur voit Spinner, squelette visible.

Ça, nous on ne l'a pas mis dans l'application, mais on pourrait le développer, c'est-à-dire que là, l'iframe, elle est arrivée.

En parallèle, les données ici, la tâche affichée, rechercher les tâches, est en train d'être traitée, et on montre que ça charge, que globalement, le tool n'a pas encore répondu.

Le tool répond, il retourne les données, injecte les données dans Windows.OpenAI.ToolOutput, Ça, ça crée un événement, notre widget détecte que ça a été mis à jour, il prend les données et il fait ce qu'on appelle une hydratation, c'est-à-dire qu'il remplit le composant avec les bonnes données, en l'occurrence la liste de tâches et l'utilisateur voit les tâches.

Là, si l'utilisateur formule une nouvelle demande, crée une tâche design 8, On appelle le tool Créer une tâche, confirmation de la création de la tâche, met à jour windows.penel.tolloutput avec une nouvelle liste de tâches et affiche la tâche ajoutée.

N'hésitez pas à passer un peu de temps sur cette explication, sur la logique du diagramme de séquence pour bien comprendre et ce que je vous conseille c'est de regarder la partie qui parle vraiment du mcp server et de windows.openai et de relire ce diagramme pour que ça soit plus clair parce que il y a des choses je pense qui sont encore un peu floues mais c'est à force de venir et de revenir sur certaines choses qu'on comprend bien tout.

Donc voilà, là il y a l'explication.

Et voilà, ici il y a quelques avantages pour que vous compreniez bien comment ça fonctionne.

Et maintenant on va passer à l'explication vraiment plutôt du back-end du mcp-server et ce qu'on développera sur Xano juste après.