Créer un ChatBot avec Bubble et ChatGPT

Les chatbots sont une excellente solution pour les entreprises qui souhaitent améliorer leur communication avec les clients. Ils peuvent aider les clients à résoudre leurs problèmes rapidement et facilement, et ils sont disponibles 24 heures sur 24 et 7 jours sur 7. Dans cet article, nous allons vous montrer comment créer un chatbot avec Bubble et ChatGPT en utilisant l'outil No-Code Bubble et l'API d'OpenAI.

Bubble est une plateforme de développement No-Code qui permet de créer des applications web et mobiles sans avoir (ou très peu) à écrire de code. Bubble offre de nombreuses fonctionnalités, telles que la création de bases de données, la mise en page et la conception d'interfaces utilisateur. OpenAI est une entreprise de recherche en intelligence artificielle qui a développé un modèle de traitement du langage naturel appelé ChatGPT (Generative Pre-trained Transformer) qui peut être utilisé pour créer des chatbots.

Introduction

Nous allons nous placer dans le cas où le ChatBot sera intégré en iFrame dans une page d'un site vitrine, en Webflow par exemple. Dans ce cas, la version gratuite de Bubble fera largement l'affaire. Le badge "Built on Bubble" ne s'affiche pas dans une iFrame (😉). Une fois que vous avez créé un compte et un projet, vous pouvez commencer à concevoir votre chatbot.

Réalisation de l'interface

La prochaine étape consiste à concevoir une interface utilisateur pour votre chatbot.

Voici comment j'ai procédé :

1. Un groupe aligné vers le haut et disposé en colonne avec une hauteur fixe de 512 px et une largeur maximum de 320 px. Il y intègre également un Custom State (en liste) qui contiendra toutes les questions et les réponses, que l'on affichera dans le repeating group du dessous.
2. Un groupe contenant tous les éléments des questions/réponses. Le repeating group du dessous servira à afficher le state du groupe "Chatbot Main" dans les éléments "Group Answer" et "Text Answer".
3. Ce groupe, placé au même niveau que le repeating group "RG Answers" sert à afficher un GIF qui simule une réponse au clavier. Ce "is typing..." sera caché jusqu'à ce qu'une question soit envoyée et avant la réponse du ChatBot.
4. Ce groupe servira à afficher l'input pour poser une question au ChatBot. Attention, il devra être désactivé ("disable") juste après l'envoi d'une question pour éviter le SPAM.
5. L'icône d'envoi, comme précédemment pour le champ input, devra être "disable" entre l'envoi d'une question et la réception d'une réponse.

Petite subtilité, il y a une condition importante, sur le "Group Answer", pour bien formater les questions/réponses :

Cette condition indique au groupe qu'un élément texte sur deux est une question (donc un input de l'utilisateur). Dans ce cas, la couleur de fond du groupe change, et il est aligné à droite. Les deux éléments "Border roundness" servent à rendre les bords arrondis ou pas pour donner l'impression que la question vient bien de l'utilisateur.

Pour les workflows, il nous en faut simplement deux :

• Un workflow, lorsque la page est chargée, pour réinitialiser le custom state et afficher le premier message

‍

• Un autre workflow pour l'envoi de message, et le traitement par ChatGPT (on en verra la configuration après)

Lorsqu'on clique sur l'icône pour envoyer un message, l'input de la question et l'icône d'envoi sont "disable", ensuite, on ajoute la question de l'utilisateur au state pour qu'il s'affiche dans le repeating group, on efface l'input, on scroll vers la dernière entrée du state, on demande une réponse à ChatGPT, on l'ajoute au state pour l'afficher dans le repeating group également, on scroll vers cette nouvelle réponse, puis on met le focus de la souris sur l'input pour inciter à envoyer une autre requête, et enfin, on libère l'input et l'icône d'envoi.

Ajout et configuration de l'API d'OpenAI au projet

Il faut ensuite ajouter l'API d'OpenAI à votre projet Bubble. Pour cela, vous devez créer un compte sur le site web d'OpenAI et générer une clé API. Ensuite, vous pouvez utiliser cette clé pour appeler l'API d'OpenAI dans votre projet Bubble. Pour configurer l'API, rendez-vous dans la section "Plugins" et activez le plugin "API Connector". Avec le workflow précédent, l'envoi d'un message appellera l'API d'OpenAI chaque fois qu'un utilisateur enverra un message à votre chatbot.

L'API est à configurer comme ceci :

Voici la description des éléments :

1. Renseignez la clé API qu'OpenAI vous a fourni
2. Définissez le type du contenu envoyé, ici, du JSON
3. Indiquer quelle fonction doit être appelé pour ChatGPT

Chaque élément fléché est un indicateur pour faire attention d'appliquer la bonne configuration.

Quant au "Body" et aux "Body parameters", voici comment les remplir :

• Body

La requête doit être formatée de cette manière, où <systemContext> est une variable qui va indiquer le contexte du ChatBot, et <userPrompt> est la question de l'utilisateur :

{
	"model": "gpt-3.5-turbo",
	"messages": [
		{"role": "system", "content": "<systemContext>"},
		{"role": "user", "content": "<userPrompt>"}
	]
}

• Body parameters

Le systemContext est indiqué comme "private" pour que son contenu reste figé, contrairement au userPrompt qui sera dynamique et renseigné par le contenu de l'input "Input Question".

Définition du contexte des réponses

Le contexte du ChatBot est très important, car il servira à limiter les réponses du ChatBot pour qu'il ne réponde qu'aux questions concernant votre entreprise, projet, etc.

Voici une partie du contexte, formater en JSON-Safe, que j'ai indiqué au ChatBot du site STARTUPP.fr :

STARTUPP est une agence no code, qui crée des applications webs, des applications mobiles,
des MVP pour des startups et des automatisations pour les entreprises.
\n\nTu parles français.
\n\nPrend un ton sympathique, mais reste respectueux. Nous proposons à nos clients de créer
des applications webs, des applications mobiles, des MVP pour des startups et
des automatisations pour les entreprises et disposons d'un estimateur de devis disponible
via le bouton situé en haut de page, qui sert à envoyer le
besoin du client pour l’estimer en interne.
\n\nTu dois vouvoyer ton interlocuteur.

Test du chatbot

Vous pouvez maintenant tester votre ChatBot, ou tester celui qui se trouve en bas à droite de la page d'accueil du site STARTUPP.fr

‍

En résumé, il est possible de créer facilement un chatbot en utilisant Bubble et ChatGPT, même sans compétences en programmation. Cette solution offre de nombreux avantages pour les entreprises qui cherchent à améliorer leur communication avec leurs clients, notamment en permettant une réponse rapide et disponible 24/7. N'hésitez pas à tester cette solution pour améliorer votre communication avec vos clients et améliorer votre expérience utilisateur.

Vous pouvez toujours l'améliorer en proposant qu'un agent soit notifié pour discuter directement avec l'utilisateur, si la question est précise par exemple, ou encore en stockant chaque conversation dans une base de données Bubble/AirTable/Xano/Google Sheet. Les possibilités sont infinies si vous connaissez votre besoin 🚀

Si vous ne le connaissez pas, il est urgent de prendre contact avec nous pour démarrer votre projet ! 😉

Et ça se passe par ici → Par mail : hello@startupp.fr ou par Calendly : Calendly STARTUPP

‍