Comprendre et Configurer ChatKit 🤖

avant de passer à la partie vraiment pratique, il faut que vous compreniez comment fonctionne ChatGPT.

Cette partie elle va être un peu, enfin elle va même être carrément technique donc il va falloir bien s'accrocher.

N'hésitez pas à poser des questions à ChatGPT quand il y a des termes qui ne sont pas clairs.

Dans les grandes lignes, il y a tout en texte.

Mais globalement, ce qui est dommage avec ChatKit, c'est qu'il n'y a pas encore de solution no code, no code.

C'est-à-dire que globalement, vous configureriez le chatbot comme vous le souhaiteriez sur votre site, dans un outil OpenAI.

Vous copiez-collez un truc sur Webflow et c'est bon, ça fonctionne.

Et d'ailleurs, il y a une raison à ça pour laquelle ce n'est pas possible.

et je vais vous l'expliquer.

Et c'est ça aussi qui fait que ChatKit est vraiment super.

Bon déjà, dans un premier temps, il faut comprendre deux concepts.

Ce qu'est une API REST et ce qu'est une fonction via CDN.

Donc, une API REST, qu'est-ce que c'est ?

C'est un protocole qui permet faire en sorte que votre ordinateur communique avec un serveur par exemple quand vous connectez une application et bien votre ordinateur envoie votre email vous identifiant via une API REST qui dit c'est bon voici le token d'authentification pour que la personne puisse utiliser l'application il a le droit ok c'est bon c'est tout nickel ça c'est fait via un serveur donc du coup il faut un moyen de communiquer entre votre ordinateur et ses serveurs.

Si vous préférez c'est un petit peu comme la lettre et la poste.

La poste c'est le protocole, c'est l'entreprise qui va délivrer le message et les informations c'est votre courrier.

Donc voilà.

Le CDN Chat Kit, qu'est-ce que c'est ?

C'est un composant web.

Un composant web dans ce cas là c'est un petit bout de code que vous allez utiliser qui va vous permettre de créer le chatkit rapidement parce que si vous n'aviez pas le cdn vous auriez dû tout recoder pour faire le chatbot ce qui aurait été super compliqué sauf que là en l'occurrence vous mettez le cdn vous avez des petites configurations, des fonctions qui sont disponibles des visuels qui sont déjà tout fait une gestion des messages, des threads de toutes les fonctionnalités qui est déjà mise en place.

Si vous aviez dû le refaire vous-même, vous auriez dû refaire un CDN.

Ça aurait été très très long.

J'ai fait le texte avec LGBT en lui expliquant un peu tout le truc, mais il n'a pas compris que CDN et API REST fallait utiliser les deux en même temps.

L'architecture type, c'est exactement ce que je viens de vous dire, c'est le front, il faut mettre le cdn, le back-end, on va utiliser les api rest.

Donc chatkit au niveau du front, le front c'est, alors quand je parle de front-end, c'est vraiment votre site ou votre application, ce que l'utilisateur il voit.

Donc c'est vraiment le code qu'on va mettre par exemple sur Webflow, sur WordPress, sur votre application.

Et si vous êtes développeur, vous savez ce que c'est du front-end.

vous pouvez configurer plein de petits trucs et pour le configurer vous pouvez tester via ce lien studio playground vous voyez dark tac tac là vous pouvez mettre par exemple c'est pour le bouton bim on le met en rouge ok on veut pas on veut mettre une teinte un peu spéciale alors on peut mettre des trucs comme ça sympa comme ça c'est sympa c'est sympa on peut le mettre en un peu plus chaud enfin bref Vous pouvez vous amuser, vous avez plein de paramètres et ce qui nous amène à ce genre de fichier de configuration.

Ce n'est pas un fichier mais c'est un bout de code.

En fait, ça explique.

Vous allez le copier-coller, chatkit option, dans votre truc Webflow.

Ça vous permet de faire apparaître ça.

Là, vous avez tous les paramètres.

Si vous voulez un peu regarder plus en détail, vous pouvez aussi aller là-dessus.

Et du coup, ça vous voyez c'est une configuration.

Un truc qui est important, c'est ça au niveau de l'UX.

Là avec le chatbot qu'on a fait, en fait on a une autre fonction qui regarde sur quel type de page on est.

Donc par exemple, ça va regarder si c'est sur un article de blog, sur le blog, sur une landing page, sur la page d'accueil.

Et ça va mettre des messages de début qui sont différents.

Donc par exemple sur un article de blog, ça va mettre un truc comme résumer l'article.

On a aussi un starter, c'est transformer en post LinkedIn.

Je vais voir comment on peut faire, je vais voir si c'est possible.

Par exemple, si la personne choisit ça, de résumer l'article et d'avoir un bouton publié sur mon LinkedIn, ça redirige sur LinkedIn avec peut-être la fenêtre publier un post déjà d'ouvert.

C'est possible.

Je ne sais pas si on peut les mettre dans les paramètres de l'URL, ce genre de truc, vous voyez c'est ce genre de choses qui peut être marrant à faire et aussi l'idée c'était que selon d'où tu viens sur le site de no code factory t'as pas la même intention t'as pas le même niveau de t'es pas prêt à prendre rendez-vous de la même manière quand t'arrives sur un article par exemple sur x-outi ou x-outi en fait Enfin même Xouty ou Xouty ça mériterait de mettre un starter comme alors vous hésitez parlez nous de votre cas spécifique pour qu'on vous aide.

Faut qu'on essaye de trouver, j'essaye un peu de personnaliser pour créer des starters qui soient spécifiques par rapport à la page pour que ça déclenche plus de conversations.

Les client tools donc en fait qu'est-ce que c'est ?

C'est une exécution locale JS dans le navigateur.

Alors là, attention, mot compliqué pour pas grand chose.

En fait, si vous voulez, quand vous appuyez sur un bouton, quand vous appuyez sur un bouton, que vous déplacez quelque chose dans une application que vous scrollez, en fait, ça, ça peut être répliqué avec du JavaScript.

C'est-à-dire que tout ce que vous faites sur un écran, ça peut être fait en JavaScript.

Et donc, du coup, il y a des actions où on peut se dire légitimement à partir d'un message dans un chatbot et bien on peut déclencher l'action et faire l'action par exemple extraire le contenu de la page ça c'est ce dont je vous parlais dans la vidéo d'avant c'est en fait pour que par exemple l'IA elle sache où est-ce qu'on en est, on est sur quelle page, qu'est-ce qui se passe elle a besoin d'extraire le contenu changer d'url, naviguer ça peut être fait en javascript, remplir un formulaire pareil ça peut être fait en javascript, copier des infos dans le presse-papier, c'est nul.

Et donc côté workflow c'est ce que je vous montrais, vous voyez il faut mettre ce petit schéma et ensuite côté client alors c'est un peu compliqué Mais vous voyez typiquement si vous voulez implémenter des tools, vous pouvez soit donner la doc http, soit lui donner cet exemple là.

Donc pour vous la faire bref, c'est qu'en gros là il récupère le tool déclenché, il regarde son nom, en fait il voit qu'il y a un tool qui est déclenché.

Il regarde le nom, si c'est ça ou si c'est ça.

Si c'est ça, du coup il récupère les paramètres et Il remplit pour faire tourner la fonction FillFormField qui doit être ailleurs.

Là c'est vraiment juste la partie de code qui configure le chatkit.

On vous donne cet exemple de formulaire.

C'est normalement l'exemple de la démo.

Le tool envoie ça à la fonction javascript qui remplit tout ça.

qui remplit les champs du formulaire.

Sur l'API, il reste OpenAI.

Si vous voulez vous attarder dessus, vous pouvez.

Globalement, le truc qui est intéressant, qui est utile, c'est créer une session.

Tous les autres, si vous êtes en no code, globalement, ne sont pas hyper utiles.

Voilà, ça c'est un exemple de à quoi ça ressemble en node pour ceux qui savent coder, si vous voulez regarder.

Maintenant on va passer à la partie plus technique où on va mettre en place le petit serveur sur Xano.