Personnaliser un Chatbot avec ChatGPT 🤖

ok bonjour à tous le but de cette vidéo ça va être de mettre un chatbot ici qui va remplir les deux champs name et email adresse ok on va juste faire adresse Le but c'est vraiment que vous compreniez, que vous découvriez comment on customise à l'aide de ChatGPT le chatkit.

Pour ce faire, ici vous avez un code de démarrage que vous pouvez copier-coller et qui fonctionne.

Je vais vous montrer tout de suite comment faire, vous allez voir c'est vraiment très très simple.

Vous allez dans site settings, alors on va le faire sur Webflow, vous pouvez le faire sur Wordpress et tout.

Et là en fait j'ai déjà copié-collé mais je vous montre, je le supprime.

Ici, ce qu'il faut que vous fassiez, par contre, c'est...

Alors, où est-ce que c'est ?

Voilà.

Vous voyez ?

Endpoint Xano pour créer la session.

Ou si vous avez un serveur déjà fait avec un dev, vous avez fait je sais pas quoi.

Donc vous allez ici, copier-coller le endpoint.

bim ok là vous avez simplement à faire ça hop là il y a le cdn ok bon là du coup il ne met pas save parce que j'ai recopié collé le même truc On sauvegarde, on publie.

là et on voit on a notre petit bouton donc vous voyez là par exemple c'est chiant on va demander de le mettre à gauche là ça s'ouvre discuter d'un projet et on voit bien que ça fonctionne si vous avez des problèmes vous allez dans inspecter ici là vous allez avoir des trucs qui pop en rouge ce que vous faites très très simple vous faites un screenshot et vous l'envoyez à chatgpt il va réussir à trouver en fait quels sont les problèmes beaucoup mieux que si vous savez pas développer de toute façon, au bout d'un moment vous commencez à connaître les problèmes.

Du coup ce qu'on va faire maintenant, Je vais vous montrer comment connecter un nouvel agent Axano qui va être ici.

Pour faire ça, je vais dupliquer la session à créer mais normalement vous l'avez déjà.

Je vais la dupliquer parce que ça va être le endpoint qu'on va utiliser pour c'est le endpoint qu'on va utiliser on va utiliser pour ncf donc si c'est la même chose on va dans clone endpoint donc on a exactement le même truc maintenant ce qu'on doit faire Je vais dans create, là je l'appelle.

On va l'appeler quand même.

Oula ça c'est un mauvais présage.

Parce qu'ils ont eu un bug où il y avait ça il y a un moment et c'était un peu relou.

J'ai pété 4.1.

Donc on va faire notre agent.

Je réfléchis juste une petite seconde sur comment on va faire.

Ici on va mettre le if-else.

On peut tout mettre dans l'agent, mais je préfère être sûr.

On fait juste l'architecture globale.

On va faire plus simple tout de suite.

On va le publier.

En fait, ce qu'on va faire, c'est qu'on va le publier.

comme ça vous pourrez voir au moins tout le processus de comment on connecte.

Donc là vous voyez vous avez workflow ID, vous supprimez, vous mettez le nouvel workflow ID, review and publish, et là je fais exprès qu'il y a un bug.

Ah non il n'y aura pas de bug.

Il n'y aura pas de bug parce que j'ai déjà fait la manipulation ce qu'on va faire ton nom est paul on va dire qu'il s'appelle paul comme ça on peut être sûr que c'est celui-ci et en plus il répondra plus vite que celui qui est sur ncf parce qu'il y a moins d'étapes on a bien mis le bon id, on a copié le endpoint Donc là, vous allez là-dedans, vous voyez petit bouton, endpoint pour Xano, hop.

Là vous changez, toujours entre guillemets, ok.

Tac, tac, tac, tac.

Ok, on attend un peu.

Parfait.

On recharge.

Hop, ici.

Comment tu t'appelles ?

Je m'appelle Paul, comment puis-je t'aider aujourd'hui ?

Donc, c'est nickel, notre chatkit est bien connecté avec notre nouveau builder.

Maintenant, ce qu'on veut, c'est que le chatkit, quand je lui dis, vas-y Paul, je m'appelle Charles et mon adresse e-mail c'est charles-nos-codes-factory.fr et bien tu remplis ce formulaire tu fais une action sur notre sub et bien il faut qu'on prépare le code donc pour ce faire on va faire comme ça on va aller sur 4GPT voilà vous voyez en fait ici vous devez mettre votre code sauf que moi le code ici je corrige juste et là je vais lui mettre Steve voici le endpoint pour créer Donc là en fait c'est un prompt qui va un petit peu régler ChalGPT, il va aller lire la doc, il va se renseigner et de cette manière on pourra le customiser.

Et aussi ce que vous pouvez faire, c'est carrément faire ça aussi.

Vous pouvez carrément copier-coller la partie sur les tools.

ok donc on est bon on va mettre le cdn machin donc ça c'est un peu tout ça ça c'est cette option donc c'est tous ces trucs là là vous voyez c'est cool on a bien un client tool justement ça je ne connaissais pas, custom API config.

Vous vous embêtez pas avec ce genre de truc là, custom API config, c'est une pente glissante.

Ok, décrit le bandeau en haut du chat, tu peux le désactiver.

Les start screens.

Ok.

on peut mettre les modèles disponibles ok on peut mettre l'option histoire ou pas on est client tool ok il a super bien compris nickel nickel nickel ça c'est bon ok là il a ajouté le end point c'est parfait J'ai l'impression qu'il l'a fait un peu nu, je ne sais pas si...

Attendez, je vérifie juste parce qu'il m'a ajouté des tools alors que j'en avais...

Ok, bon, c'est bien, il l'a commenté en exemple.

Ok !

Bon, par exemple, il n'a pas très très bien commenté darkmode.go dans la page...

Ok c'est nickel, franchement même si vous voulez aussi un peu ré-étudier toute la doc, vous mettez le prompt, c'est nickel.

Donc, je veux ajouter un tool, un client tool.

Alors je ne sais jamais comment ça s'écrit, un mot, chatbot.

Je veux qu'il remplisse un formulaire.

Voici les id du champ du formulaire.

Alors ça c'est important.

Si vous voulez, les id c'est ce qui permet à une fonction javascript, donc à du code, de savoir de quel champ on parle.

et en fait dans le ghano vous avez dans style setting donc si on va mettre name on retourne dans le chat gpt on prend le second et si vous avez plus de champs modifie le code de mon chatbot pour qu'il puisse utiliser ce client tool qui fait la fonction JS qui va remplir les champs peux-tu également le chatbot à gauche de l'écran s'il te plaît on va faire ça ajoute un tool dans l'écran remplir le formulaire l'idée derrière ça c'est que quand vous sélectionnez un tool il comprend mieux ce qu'il faut faire je pense que c'est plus UX aussi pour l'utilisateur j'ai dit dans une précédente vidéo que bon c'était pas nécessaire mais je pense que c'est plus un sujet de...

c'est plus un sujet d'UX où l'utilisateur il sait qu'il peut demander ça vous voyez parce que sinon c'est pas forcément clair il arrive sur le chatbot et c'est pas...

Donc là on regarde, bon il a toujours mis cette fonction qui n'existe pas.

Ok, est-ce qu'il m'a mis la fonction quelque part ?

Voilà, ici, ok c'est parfait.

Ce que fait le code, ok parfait.

Donc là on va retourner sur site settings, custom code, on reprend notre petit chatbot, on vérifie qu'il a bien mis le cdn, parce qu'en fait des fois quand vous dites configurez le chatbot il ne met plus le cdn, ça m'est déjà arrivé et du coup j'étais un peu pantois.

Ok, ok.

Là on va recharger.

Donc c'est bien, ça a mis à jour.

Je regarde juste d'en inspecter s'il n'y a pas un truc à péter.

Ok, ok.

Donc là ça ne marche plus.

Ok, donc du coup j'ai coupé mon écran.

Enfin j'ai coupé la vidéo là pendant qu'on était en train de faire les trucs sur les icônes.

J'ai fait un peu de montage aussi.

Normalement j'ai dû couper une partie parce que j'ai fait plusieurs rallies à l'airsoft avec la JPT.

Et c'est un problème que j'ai eu en faisant l'assistant NoCodeFactory l'original.

TheTrue.

C'est que les icônes ça déconne, j'arrive pas trop à comprendre pourquoi.

Apparemment la doc est pas très bonne à ce sujet là.

Pour expliquer comment mettre des icônes ça fonctionne pas bien.

Même si le code sur le playground correspondait à la mise en page.

Mettez pas d'icône, dites qu'il ne faut pas mettre d'icône, nulle part.

Au niveau de notre code, on a notre outil de formulaire.

Maintenant il faut qu'on configure notre agent.

Donc là on va avoir agent intention.

Ensuite, on va mettre un if-else, et on va créer deux nouveaux agents.

agent ou question.

Donc là, on va le dire, tu vas déterminer l'intention de l'utilisateur et aussi sélectionner le meilleur agent pour répondre à son intention tu as deux options agent question réponse cet agent pose des questions donne des réponses aux questions de l'utilisateur.

L'objectif de l'agent global est de poser un rendez-vous avec l'utilisateur.

Voilà.

tu as de ce machin et agent remplir le form qui est spécialisé dans le remplissage de formulaire tac voilà tu dois toujours répondre d'un mot genre, répondre, field, form.

On peut le mettre en anglais, answer.

Enfin, vous mettez ce que vous voulez ici, Hop là, create.

Pendant ce temps là, on va faire l'output format, donc add schema.

Donc là, on va mettre intention, et c'est une enum.

Enum c'est mieux parce qu'on peut mettre des options.

Donc du coup, update, attendez que je mette un faux truc.

Juste que je vois, donc là vous pouvez mettre en grand, ça va être du coup, réponse attendue, fill form, answer, ok.

Ok.

Answer et fillform.

Ok.

Bim.

Maintenant, là c'est l'agent formulaire.

On fait donc ici, on va dire que c'est fillform.

Et là on veut que intention soit strictement égale à...

Donc il faut mettre entre guillemets.

Et else ça va être du coup H en question.

Ici il faut créer le tool.

je suis en train de configurer le client tool dans agentkit le client tool pour remplir le formulaire peux-tu me donner le schéma de tool à mettre dans client tool Donc là, on va attendre quelques petites minutes, enfin quelques secondes même, je pense qu'il va le faire correctement.

Ah, il doit réfléchir.

Je pense qu'il va aller relire la doc ou un truc comme ça.

Voilà.

Donc name, email, nickel.

On retourne ici.

On va dans tool, client tool, generate, on copie-colle le truc.

comme ça il le génère correctement ok parfait et ici tu es un agent qui à partir des informations de la conversation va remplir le formulaire avec le tool je suis en train de me poser une question sur ce genre d'outil il faut que dans agent intention il fasse aller dans agent question lorsqu'il n'a pas assez d'informations alors on en a un ouais je veux dire ajoute cette règle si tu n'as pas dans la conversation l'email donc toutes les infos là si vous voulez remplir par exemple un formulaire comme sur no code factory et bien il faut avoir toutes les informations pour pouvoir envoyer sur agent formulaire si tu n'as pas la conversation l'email et le nom de l'utilisateur tu ne dois pas répondre par fil form car sinon on ne pourra pas remplir tous les champs voilà donc après on va tester après on va tester ok ça me semble bien et là on va lui dire voilà tu réponds aux questions de l'utilisateur et si je te demande de remplir le formulaire et qu'il manque des infos comme ça on va tester il me l'a mis en anglais en français On va pouvoir envoyer.

parfait donc maintenant on va regarder bonjour comment ça va je veux m'inscrire donc là normalement il doit envoyer sur agent question voilà merci pour votre message afin de vous inscrire j'ai besoin de votre nom et votre adresse email pouvez vous machin ok charles ok donc là il me l'a mis dans answer ok bon on a un problème alors je sais pas pourquoi moi évaluate ça a buggé ok hop hop on va relire ça si la demande d'une question n'est pas directement liée à la saisie d'informations structurées pour fixer Alors non, non, ça devrait marcher.

Donc parce que là on est d'accord que ça met bien ça dans l'historique.

Fill form, alors attendez ça se trouve des fois je l'ai pas bien mis.

Fill form, intention, ok.

Bam, bam, bam, bam.

input.outputText égale filform...

De toute façon là le bug, ce qu'on voit, le problème ici, c'est que l'output d'ici, c'est que c'est answer.

Donc là c'est bon, answer machin.

Alors attendez, là il y a un truc bizarre.

Ouais, bonjour machin.

Merci voisin, je procède au remplissage du fournir.

Vas-y assistant fillform.

Ah il l'a fait le fillform ici ?

Ah oui, ok.

Donc attendez, hop, if else, fillform intention machin, hop hop fillform.

et il me met quand même agent question est-ce que c'est pas exactement...

est-ce qu'il y a une erreur dans le if else?

ce serait pas une erreur, non ah non mais voilà Ok.

Là je me suis trompé.

Donc j'ai fait une erreur ici.

Il y a des trucs tout bêtes.

C'est qu'en fait j'ai sélectionné ça.

J'ai pas sélectionné le bon truc.

Ah non, ça a buggé.

Vous voyez ?

Input, output, texte.

C'est pas du tout ça.

C'est in...

Pourquoi il me fait ça ?

Voilà.

Input, output, part, intention.

strictement égale à Fillform.

Donc comme ça, ça devrait mieux marcher.

Vous voyez avec Evaluate on peut revoir tout le flow.

ça c'est intéressant bonjour je veux m'inscrire donc là normalement ok merci pour votre demande d'inscription donc là je mets mes infos ok si je mets vas-y ok donc là théoriquement voilà ok ça prend le bon truc alors maintenant faut juste comprendre pourquoi merci pour votre demande d'inscription remplir le formulaire j'ai besoin de votre nom et votre adresse email pouvez vous me les fournir donc là il faut relire le pont pour voir en fait ce qui ne va pas si l'utilisateur donne son prénom et son e-mail, alors ça doit être filforme.

Voilà, faute de frappe, j'espère Il faut toujours publier le code que vous voulez faire la preview parce que sinon ça ne fonctionne pas.

Bonjour, je m'inscris.

Donc là, techniquement, question.

Là je mets mon prénom.

ok bon il a pas l'air d'essayer là c'est bon donc là faut essayer de voir un peu pourquoi il fait ça Ouais, jusque là nickel.

Ça c'est le deuxième one.

Donc ça c'est le système prompt.

Donc là normalement on est d'accord, il voit ça.

Et l'assistant répond ça.

Ça c'est bizarre ça.

Donc je pense que c'est celui-ci.

Voilà ça va être ça.

Je crois qu'on peut les évaluer.

create a grader c'est ici où ça déconne alors que bonjour je veux m'inscrire merci user charles machin et là il met answer ok ici l'output attention de l'agent intention voilà l'entrée se coûte générée par l'agent intention l'output n'est pas fait de forme comme demandé par le critère même si l'entrée semble contenir le prénom et l'image l'agent intention choisit la valeur en sorte de le filmer ok voilà ok bon Je ne sais pas si ça change quelque chose, je n'ai pas trop testé ce genre de choses.

Je pense que ça va être bon comme ça.

Je vais juste mettre cette règle là.

Donc là, notre agent fonctionne.

C'est déployé.

Maintenant, il faut qu'on le teste en conditions réelles.

Là, on va l'ouvrir, remplir le formulaire.

Là, normalement, il va nous demander notre nom et notre prénom.

Donc, n'hésitez pas à nous envoyer un mail si vous avez des questions et on y répondra avec plaisir.

Donc voilà.

Bonne journée.