https://d226lax1qjow5r.cloudfront.net/blog/blogposts/low-code-leverage-ai-studio-with-airtable/ai-studio-airtable.png

L'effet de levier du code faible : AI Studio avec Airtable

Publié le April 20, 2023

Temps de lecture : 8 minutes

Introduction

Il y a quelques mois, j'étais à Dubaï pour un hackathon. Le chauffeur de taxi de l'hôtel était très sympathique et voulait s'assurer que je profite au maximum de mon voyage de deux jours. Il a commencé à me proposer toutes sortes de services, comme venir me chercher au début et à la fin de chaque journée de l'événement, faire différents types de visites spécialisées de la ville, ou même faire un voyage à Abu Dhabi.

Il m'a donné sa carte de visite avec un code QR pour lui envoyer un message sur WhatsApp. J'ai scanné le code et cela m'a amené à une fenêtre de chat avec son Account professionnel. Mais c'est tout ! Aucun des services intéressants dont il venait de me parler n'était présenté aux utilisateurs. Mon cerveau d'homme d'affaires s'est donc mis au travail et je lui ai suggéré : vous savez, vous pouvez vraiment aider vos clients à se prendre en main avec l'AI Studio de Vonage !

An example of a QR code Taxi Driver card. Credit to zazzle.comAn example of a QR code Taxi Driver card. Credit to zazzle.com

L'année dernière, Vonage a lancé AI Studioune plateforme NoCode/LowCode qui permet à quiconque de créer des agents d'IA conversationnelle, rapidement ! Les cas d'utilisation typiques de l'IA conversationnelle sont les chatbots pour l'assistance à la clientèle ou le marketing. Mais les chatbots peuvent améliorer l'expérience utilisateur pour tellement plus d'Applications !

Dans ce tutoriel, je vais vous montrer comment construire un agent WhatsApp d'AI Studio pour ce service de taxi qui utilise Airtable comme base de données dorsale pour stocker et accéder aux informations.

Yalla, allons-y !

Conditions préalables

  • Compte de développeur Vonage. Pour utiliser AI Studio, vous aurez besoin d'un Vonage Developer Account. Les détails pour commencer se trouvent juste en dessous.

  • Compte Airtable - s'inscrire ici. Nous utiliserons Airtable comme base de données.

  • Account du facteur - s'inscrire ici. Nous utiliserons Postman pour envoyer des requêtes dans la section avancée de ce tutoriel.

  • Optionnel : Compte Miro - s'inscrire ici. J'utilise Miro pour maquetter mes agents AI Studio. Plus d'informations à ce sujet ci-dessous.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Mise en place

Commencer par une maquette

Avant de créer un agent dans AI Studio, je vous recommande vivement de cartographier le flux de votre agent à l'aide d'un outil visuel. Pour en savoir plus sur la création d'une maquette d'IA conversationnelle haute fidélité ici.

Dans notre application, nous allons permettre aux utilisateurs de consulter les prix des taxis vers des lieux populaires et d'ajouter leurs coordonnées pour s'abonner à de futures offres de taxis. La maquette de ces flux ressemble à ceci :

Example of mockup for inbound flows of AI Taxi DemoExample of mockup for inbound flows of AI Taxi Demo

Maintenant que nous avons une idée claire de ce que nous voulons construire, passons à la construction !

Créer une base de données Airtable

Avant de commencer à utiliser AI Studio, nous devons configurer notre base de données Airtable. Airtable est un outil génial qui ressemble à Excel avec des super-pouvoirs ! La documentation est fantastique et constitue un excellent point de départ.

Une fois que vous serez à l'aise, vous voudrez construire une nouvelle base. Nous l'appellerons "AI Taxi Demo". Dans cette base, nous aurons deux tables : Destinations et Clients.

Pour les destinations, nous allons faire simple. Il n'y aura que deux champs : Nom et Prix.

Destinations table with fields Name and PriceDestinations table with fields Name and Price

De même, pour les tables Clients, nous n'utiliserons que deux champs : Nom et Numéro de téléphone :

Customers table with fields Name and Phone_NumberCustomers table with fields Name and Phone_Number

Nous pouvons ajouter des données fictives à ces tableaux, afin que nos appels à l'API renvoient des valeurs. Les numéros de téléphone doivent être saisis avec des chiffres uniquement, sans signe plus (+).

Créer un nouvel agent

Maintenant que notre base de données est configurée, nous pouvons commencer à construire notre agent AI Studio qui interagira avec l'utilisateur et transmettra les données vers et depuis Airtable. Suivez les instructions de la documentation d'AI Studio ici. Il y a trois options importantes pour notre agent, sélectionnez :

  • Type : WhatsApp

  • Modèle : Partir de zéro

  • Événement : Inbound

Récupération de données dans Airtable

Commençons maintenant à construire nos flux. Ce qui est génial, c'est que nous avons déjà fait tout le travail ! Il ne nous reste plus qu'à transformer notre organigramme vertical en un agent horizontal.

Nos démarches :

  1. Nœud d'envoi de message: envoi d'un message de bienvenue, "Welcome to AI Taxi".

  2. Collecter le nœud d'entrée : demander à l'utilisateur : "Comment puis-je vous aider ?". La réponse de l'utilisateur sera stockée dans un paramètre appelé TOPIC.

Les paramètres sont comme des variables auxquelles on peut accéder dans l'agent. Pour en savoir plus sur les paramètres ici. Tout comme les variables dans le code ont des types de données, les paramètres ont des entités. Pour des raisons de simplicité, tous les paramètres seront de type @sys.any.

  1. Nœud de classification : classer le TOPIC paramètre. Nous aurons deux intentions : Retrieve Prices et Sign Up For Promotions. Nous aurions pu utiliser une simple condition puisque, dans cet exemple, nous n'avons que deux intentions. Cependant, la beauté et la puissance d'AI Studio résident dans la fonction de classification. Nous voulons donner à nos utilisateurs la liberté de saisir n'importe quelle requête et de l'écrire naturellement. Vous pouvez voir à quel point le nœud de classification est puissant et facile à utiliser avec les expressions utilisateur suggérées ; ici.

  2. Collecter le nœud d'entrée : demander à l'utilisateur : "Où voulez-vous aller ?". La réponse de l'utilisateur sera stockée dans un paramètre appelé DESTINATION.

Nous avons maintenant le terme de recherche que nous voulons envoyer à Airtable et recevoir en retour nos informations de prix stockées. Mais comment pouvons-nous le transmettre à Airtable ? L'avantage d'Airtable est son API intégrée pour chaque base et sa documentation utile. Depuis notre base AI Taxi Demo, cliquez sur Aide dans le coin supérieur droit. Ensuite, dans la barre latérale, tout en bas, vous trouverez Documentation API. Ce qui est vraiment génial, c'est qu'Airtable génère la requête requise pour vous ! Ici, vous trouverez la requête curl préconstruite, elle ressemblera à quelque chose comme ceci :

Example of CURL request to Airtable API

Nous devons maintenant l'ajouter à notre agent AI Studio. Nous allons donc ajouter un nœud nœud Webhook qui nous permet d'effectuer des demandes d'API REST. Pour en savoir plus sur les nœuds Webhook ici.

Dans le nœud, nous ajouterons notre point de terminaison dans l'URL de requête :

https://api.airtable.com/v0/app4AtCxYJu9tagah/Destinations

Vous devrez également ajouter votre jeton d'accès personnel Airtable dans les paramètres d'en-tête sous l'onglet En-têtes. Vous pouvez apprendre comment générer et utiliser votre jeton d'accès personnel ici. Assurez-vous de lui donner des champs d'application : data.records:read et data.records:write. Ce jeton ne peut être vu qu'une seule fois, vous devez donc le sauvegarder dans un endroit sûr où vous pourrez le copier/coller plus tard.

Votre nœud webhook doit maintenant ressembler à ceci :

Example of Lookup Destination Webhook NodeExample of Lookup Destination Webhook Node

Nous pouvons tester le fonctionnement de notre webhook en cliquant sur le bouton test request en haut à droite. Vous verrez qu'il renvoie toutes nos destinations dans le tableau. Vous pouvez voir sous l'onglet response quelles données seront renvoyées :

Example of Destinations Lookup ResponseExample of Destinations Lookup Response

Mais nous ne voulons pas toutes les destinations, nous voulons être en mesure de rechercher par l'entrée de l'utilisateur. Heureusement pour nous, Airtable dispose de fonctionnalités de recherche intéressantes. Par exemple, j'ai utilisé la fonction filterByFormula pour créer une recherche globale dans la table. Nous utiliserons filterByFormula pour effectuer une recherche dans la colonne Destination. Et maintenant, notre nœud webhook ressemble à ceci :

Example of Webhook Node with Query ParametersExample of Webhook Node with Query Parameters

Vous devez cliquer sur l'onglet Paramètres de la requête et remplir le paramètre et la valeur, écrire directement dans le chemin URL ne sera pas sauvegardé.

Si vous rencontrez des difficultés avec votre requête, essayez d'encoder votre paramètre $DESTINATION avec l'outil d'encodage outil d'encodage Airtable. L'encodage de notre demande devrait ressembler à ceci :

filterByFormula==SEARCH(%22$DESTINATION%22%2C+%7BName%7D)

Nous pouvons à présent exécuter à nouveau le test et constater que la requête renvoie un objet contenant un élément appelé "records", qui contient lui-même un tableau d'objets records.

Example of Filtered ResponseExample of Filtered Response

AI Studio nous permet de gérer les réponses de l'API à l'aide de la fonction Cartographie des réponses de l'API. Nous devons mapper l'objet renvoyé à un paramètre que nous pourrons ensuite utiliser dans AI Studio. Nous pouvons procéder de la manière suivante :

Example of Response MappingExample of Response Mapping

Maintenant que nous avons mappé nos données de réponse, nous pouvons exécuter le test et voir les valeurs renvoyées à nos paramètres !

Example of Response Mapping Test ResultsExample of Response Mapping Test Results

Nous avons réussi ! Nous avons connecté notre agent AI Studio à nos données Airtable et nous pouvons maintenant utiliser ces informations dans notre agent. La dernière étape consiste à utiliser nos données dans notre agent et à envoyer un message agréable à notre utilisateur :

Example of Send Price NodeExample of Send Price Node

Si nous ouvrons notre testeurnous pouvons maintenant voir le parcours complet de l'utilisateur pour demander le prix d'un taxi.

Testing Our Completed FlowTesting Our Completed Flow

Envoi de données à Airtable

Maintenant que nous nous sommes connectés à notre base de données Airtable et que nous avons commencé à recevoir des informations, l'envoi d'informations sera un jeu d'enfant !

Nous allons repartir de notre nœud de classification des thèmes. Nous allons ajouter une nouvelle intention appelée "S'inscrire aux promotions" et ajouter quelques expressions d'utilisateur. Quelque chose comme ceci :

Example of Adding User Expressions To Training SetExample of Adding User Expressions To Training Set

Nous sommes maintenant prêts à nous connecter à notre webhook. Jetons à nouveau un coup d'œil à la documentation d'Airtable. Elle nous montre exactement comment formater notre requête. Nous trouvons dans la requête générée quelque chose comme ceci :

Example of Airtable POST RequestExample of Airtable POST Request

Il ne nous reste plus qu'à ouvrir notre nouveau nœud webhook. Tout d'abord, nous changeons notre type de requête de GET à POST. Nous pouvons voir que nous devons (à nouveau) passer notre jeton d'accès personnel dans la clé d'autorisation de l'en-tête. Mais maintenant nous avons aussi un deuxième champ à passer. Ajoutons Content-Type pour indiquer que nous envoyons du json avec la requête. Enfin, nous transmettrons nos données dans le corps de la requête avec un objet qui contient des enregistrements de clients.

Example of POST request webhook nodeExample of POST request webhook node

Tout d'abord, passons par un client test. Disons Miss Piggy.

Example of sending Miss Piggy customer to AirtableExample of sending Miss Piggy customer to Airtable

Maintenant, si nous cliquons sur Test Request, nous devrions voir une nouvelle entrée dans Airtable.

New entry in Airtable; Miss PiggyNew entry in Airtable; Miss Piggy

Mais nous ne voulons pas ajouter Miss Piggy dans notre base de données ! Nous voulons ajouter notre utilisateur actuel. Vous pourriez demander le nom et le numéro de l'utilisateur ici et si vous avez besoin de plus d'informations, vous devrez probablement utiliser des nœuds de collecte ici. Mais pour cette application, seuls le nom et le numéro de l'utilisateur nous intéressent. Pour cela, nous pouvons utiliser les paramètres système intégrés d'AI Studio ! Nous mettons donc à jour le nom et le numéro de téléphone de Miss Piggy à l'aide des paramètres système $PROFILE_NAMEet $SENDER_PHONE_NUMBER. Le corps de notre requête ressemble maintenant à ceci :

Example of POST request with dynamic variablesExample of POST request with dynamic variables

Enfin, ajoutons un message de remerciement avec un nœud d'envoi de message. Et maintenant, nous pouvons tester ce flux :

Testing Our Completed Flow 2Testing Our Completed Flow 2

Conclusion

Vous avez maintenant vu comment mettre en œuvre AI Studio avec une base de données Airtable facile à utiliser. Qu'allez-vous construire avec vos nouvelles compétences ? N'hésitez pas à me le faire savoir sur Twitter ou sur le Slack de la communauté Vonage (nous avons même un canal pour AI Studio). Je suis vraiment intéressé de voir ce que vous construisez avec Low Code !

Partager:

https://a.storyblok.com/f/270183/384x384/e4e7d1452e/benjamin-aronov.png
Benjamin AronovDéfenseur des développeurs

Benjamin Aronov est un défenseur des développeurs chez Vonage. C'est un bâtisseur de communauté qui a fait ses preuves, avec une formation en Ruby on Rails. Benjamin apprécie les plages de Tel Aviv, où il vit. Sa base à Tel Aviv lui permet de rencontrer et d'apprendre de certains des meilleurs fondateurs de startups du monde. En dehors de la technologie, Benjamin aime voyager à travers le monde à la recherche du parfait pain au chocolat.