https://a.storyblok.com/f/270183/1368x665/633e1f71c8/25feb_dev_blog_whatsapp-ai-studio.png

Testez les agents WhatsApp avec le testeur intégré d'AI Studio

Publié le February 27, 2025

Temps de lecture : 5 minutes

Introduction

L'une des pratiques de codage les plus risquées consiste à écrire de grandes parties de code sans effectuer de tests périodiques pour s'assurer que tout fonctionne comme prévu. Le même principe s'applique au "no-code/low-code" ! Heureusement, AI Studio dispose d'un testeur intégré pour s'assurer que votre code fonctionne à chaque étape.

Cet article vous montrera comment démarrer avec le testeur AI Studio pour les agents WhatsApp et éviter les pièges les plus courants.

Conditions préalables

  • S'inscrire à un Account API de Vonage

  • Essayez de créer un agent ; consultez nos tutoriels pour commencer

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.

Comment utiliser le testeur intégré d'AI Studio ?

La première étape consiste à ouvrir le testeur dans le canevas de votre agent. Cliquez sur le gros bouton noir en haut à droite du canevas qui indique Testeur. Le testeur s'ouvre alors. Vous pouvez choisir l'événement à tester (si vous en avez plusieurs) et si vous souhaitez tester dans le canevas d'AI Studio ou directement dans WhatsApp.

Notez que le chat de test dans WhatsApp est temporaire et que vous devrez toujours acheter un numéro et publier un agent pour une utilisation publique de votre agent.

The AI Studio tester interface displaying options to select an event, start a chat within AI Studio, or test the agent in WhatsApp using a button. Icons for settings and refresh are visible at the top.A screenshot of the AI Studio built-in tester interface, allowing users to start a chat or test an agent directly in WhatsApp.Cliquez sur le bouton "Start chat", et tant que vous avez des nœuds de conversation connectés à votre agent, vous pouvez immédiatement commencer à interagir avec lui. C'est génial !

Comment utiliser les paramètres de test

La caractéristique la plus importante du testeur est la possibilité d'utiliser des paramètres/variables de test. Les paramètres de test nous aident à déterminer si les erreurs de l'agent sont dues à la logique du flux ou à de mauvaises entrées. Pour accéder aux paramètres de test, cliquez sur l'icône de l'engrenage/des réglages en haut de la fenêtre du testeur. Pour fermer le volet, cliquez à nouveau sur l'icône en forme d'engrenage.

The AI Studio interface displays a chatbot flow on the left and the built-in tester on the right. The tester panel is opened, revealing options to start a chat or test the agent in WhatsApp. The chatbot flow includes nodes for collecting inquiries, sending a webhook request, and displaying a price.AI Studio showing a chatbot flow and the tester being opened to start a test session.Les flux d'agents s'appuient souvent sur des données utilisateur (comme le numéro de téléphone de l'utilisateur) pour s'intégrer à des systèmes externes. Nous pouvons ajouter des paramètres de test pour ces types de variables sous Paramètres système. En outre, les variables créées spécifiquement pour votre agent apparaîtront sous Paramètres personnalisés La définition de valeurs pour les paramètres de test est très utile pour déboguer les nœuds d'intégration tels que le nœud Webhook ou les nœuds Salesforce.

Considérons le nœud Webhook suivant, qui connecte l'agent à une feuille Google. La configuration de l'intégration est un peu complexe et peut entraîner différents types d'erreurs : le code des scripts Google Apps, une URL de demande malformée, un paramètre de requête incorrect ou autre.

The AI Studio Webhook node interface showing a GET request URL with a query parameter $inquiry, along with query parameters listed in a table. A "Test request" button is visible in the top right corner.A screenshot of an AI Studio Webhook node configured to retrieve a price using a GET request with a query parameter.Vous pouvez voir que nous avons le bouton "Test request" dans le nœud Webhook. Cependant, si nous appuyons sur "envoyer", nous obtiendrons l'erreur suivante : "error": "Item not found."

En effet, notre demande se présentait comme suit :

https://script.google.com/macros/s/AKfycbw5hzozzPWXB6-3f27iYA2-ug-rnJwl22ZdEXaBdemuPC4pds9NLzAC5mAQmDGMqfs/exec?item=

L'élément était vide ! Heureusement, nous pouvons corriger cela en ouvrant nos paramètres de test en cliquant sur l'icône de l'engrenage et en les mettant à jour avec une valeur dont nous sommes sûrs qu'elle existe dans notre feuille de calcul. Et maintenant, nous pouvons voir que nous avons reçu une bonne réponse !

The AI Studio interface displaying custom test parameters, including an inquiry set to "cola." On the right, a webhook test request is executed, returning a response with item details and price. A "Resend request" button is visible at the top.A screenshot of AI Studio's test parameters panel and webhook test request, showing how setting an initial parameter affects the response.

Astuce : Un problème de données courant consiste à transmettre des chaînes de caractères alors que l'on attend des nombres, et vice versa. L'utilisation de variables de test permet d'identifier rapidement ce problème.

Rafraîchir le testeur

Les utilisateurs effectuent souvent des mises à jour, comme la modification des paramètres de test, et ne constatent aucune différence dans les performances de test de l'agent. C'est parce qu'ils n'ont pas actualisé le testeur pour obtenir la dernière version. Si le testeur est ouvert, vous devez cliquer sur l'icône d'actualisation avant d'exécuter un nouveau flux de test.

The AI Studio interface displays a chatbot flow on the left and a test chat session on the right. The user starts a conversation with the agent, which asks for an item’s price. The tester interface processes the input and executes the chatbot flow.AI Studio showing a chatbot test session where a user interacts with an agent to retrieve a price.

Comment déboguer un comportement inattendu de l'utilisateur

Il se peut que vous rencontriez des erreurs une fois que vous avez commencé à exécuter votre flux d'agents dans le testeur. C'est normal ! Chaque bulle de dialogue dans le testeur a deux icônes. La première icône de lien externe ajustera le canevas pour vous montrer le nœud responsable de cette sortie. La seconde icône de code ouvrira la fenêtre de débogage qui affiche le code JSON de l'exécution du flux.

Dans l'exemple suivant, vous pouvez voir à quel point la fenêtre de débogage est utile. Dans ce chat, nous entrons le mot "banane" et le webhook semble s'exécuter sans erreur. Cependant, nous n'obtenons pas de prix pour l'affichage.

The AI Studio tester interface showing a conversation where a user requests the price of "banana." Despite the webhook executing successfully, the agent response is incomplete, displaying "The price of banana is $." Debugging icons are visible for troubleshooting.A screenshot of an AI Studio chat session where a webhook executes successfully, but the agent fails to return the expected price.La première étape consiste à s'assurer que le nœud Envoyer un message affiche correctement notre paramètre. Définissons donc notre paramètre price à 100. Et comme nous pouvons le voir, le prix est maintenant affiché comme étant 100$. Il doit donc se passer quelque chose dans le nœud Webhook.

The AI Studio interface displays the test parameters panel on the left and a chatbot test session on the right. A user sets values for custom parameters like "inquiry" and "price" before running the chatbot test.AI Studio's test parameters panel being used to define values for debugging a chatbot flow.

Cette fois, nous pouvons ouvrir la fenêtre de débogage en cliquant sur l'icône de code dans le message du webhook. Cela ouvre le journal JSON de tout ce qui a été exécuté jusqu'à présent dans notre agent. Nous pouvons rechercher "web" pour trouver plus facilement le nœud en question. Et là, nous trouvons le coupable !

Conseil : la recherche d'une "erreur" permet d'identifier plus facilement la bonne erreur lorsque plusieurs choses se passent mal.

AI Studio interface displaying a chatbot flow on the left and a test chat on the right. The user inputs "banana," the webhook executes successfully, but the response lacks a price. The tester interface includes debugging options for troubleshooting.AI Studio's tester showing a chatbot conversation where a webhook executes successfully, but the agent fails to return a price, requiring debugging.Bien que l'état du nœud du webhook indique "SUCCESS", le message que nous recevons dans le champ "text" ne contient pas de prix. Au lieu de cela, il indique :

{"error":"Item not found."}

Et c'est logique car banane ne figure pas dans notre feuille de calcul.

Conseil : pour trouver plus rapidement votre erreur, utilisez ctrl+f ou cmd+f.

Comment faire un test sur WhatsApp

Le testeur intégré vous permet de tester votre agent directement sur WhatsApp ! C'est aussi le moyen recommandé pour tester car il est le plus proche de la réalité, certaines fonctionnalités pouvant manquer dans le testeur Studio.

Ouvrez le testeur et cliquez cette fois sur "Test in Whatsapp". Un écran s'ouvre alors avec un code QR et un lien. Scannez le code QR avec votre téléphone ou cliquez sur le lien. Cela ouvrira un chat avec une version test de votre agent.

Commencez le chat en envoyant la phrase d'authentification générée. Ensuite, votre agent s'exécutera conformément au flux. Vous pouvez même partager le lien vers le chat pour que d'autres personnes testent l'agent.

Remarque : les chats de test expirent, avec un maximum de 24 heures. Il se peut que vous deviez régénérer le chat en rouvrant le testeur et en scannant à nouveau le code QR/lien. Cependant, le chat de test ne fonctionnera pas en tant qu'agent de production. publier votre agent pour qu'il fonctionne.

The AI Studio tester interface showing a QR code, a clickable link, and instructions for testing an agent on WhatsApp by sending a message with a passphrase. The settings and refresh icons are visible at the top.A screenshot of the AI Studio tester interface displaying a QR code for testing an agent in WhatsApp.

Conclusion

Maintenant que vous avez vu comment utiliser et déboguer avec le testeur intégré à AI Studio, plus rien ne vous empêche de créer d'incroyables chatbots WhatsApp. Nous disposons d'une large sélection de tutoriels AI Studio ou créez votre propre intégration et parlez-nous en. Si vous êtes bloqué ou si vous ne savez pas comment contourner un bogue avec le testeur, envoyez-moi un message sur le Slack de la communauté de Communauté Vonage Slack. Nous avons même un canal dédié à AI Studio.

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.