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

AI Studio 内蔵テスターで WhatsApp エージェントをテスト

最終更新日 February 27, 2025

所要時間:1 分

はじめに

最も危険なコーディング手法の1つは、すべてが意図したとおりに機能することを定期的にテストせずに、大量のコードを書くことだ。同じ原則が、ノー・コード/ロー・コードにも当てはまる!ありがたいことだ、 AI Studio には、コードが各ステップで機能していることを確認するためのテスターが組み込まれています。

この記事では、AI Studioテスターの使い方をご紹介します。 WhatsAppエージェントよくある落とし穴を避ける方法を紹介します。

前提条件

  • Vonage APIアカウントにサインアップする

  • エージェントを構築してみてください。 チュートリアルチュートリアルをご覧ください。

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.

AI Studio内蔵テスターの使い方

最初のステップは テスターを開くことです。キャンバスの右上にあるテスターと書かれた大きな黒いボタンをクリックします。テスターが開きます。どのイベントをテストするか(複数ある場合)、AI Studioキャンバス内でテストするか、WhatsApp内で直接テストするかを選択できます。

WhatsAppでのテストチャットは一時的なものであり、エージェントの一般利用には番号の購入とエージェントの公開が必要です。

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.チャット開始 "ボタンをクリックすると、エージェントと会話ノードが接続されている限り、すぐにエージェントとのやり取りを開始することができます。なんてクールなんでしょう!

テスト・パラメータの使い方

テスターの最も重要な機能は、テストパラメータ/変数を使用できることです。テストパラメータは、エージェントのエラーがフローロジックによるものなのか、入力の誤りによるものなのかを特定するのに役立ちます。テストパラメータにアクセスするには、テスターウィンドウの上部にある歯車/設定のアイコンをクリックします。ペインを閉じるには、歯車のアイコンをもう一度クリックします。

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.エージェントフローは、外部システムと統合するために、ユーザデータ(ユーザの電話番号など)に依存することがよくあります。このようなタイプの変数のテストパラメータは、システムパラメータの下に追加できます。さらに、エージェント専用に作成された変数は、カスタムパラメータの下に表示されます。 テストパラメータの値を設定することは、Webhook ノードや Salesforce ノードのような統合ノードのデバッグに非常に便利です。

次の Webhook ノードを考えてみましょう。 エージェントを Google シートに接続する.Google Apps Scripts のコード、不正なリクエスト URL、不正なクエリパラメータ、または他の何かです。

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.Webhookノードに "Test request "ボタンがあるのがわかります。しかし、送信を押すと、次のようなエラーが表示されます: "error": "Item not found."

というのも、私たちのリクエストはこんな感じだったからだ:

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

項目は空白だった!ありがたいことに、歯車のアイコンをクリックしてテストパラメータを開き、スプレッドシートに存在することを確認した値に更新することで、これを修正することができる。そして今、私たちは良い応答を受け取ったことを確認することができます!

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.

ヒントよくあるデータの問題は、数値を期待して文字列を渡したり、その逆をしたりすることです。テスト変数を使うことで、これを素早く特定することができます。

テスターのリフレッシュ

ユーザはしばしば、テストパラメータを変更するようなアップデートを行いますが、エージェントのテストパフォーマンスに違いは見られません。それは、最新バージョンを取得するためにテスターをリフレッシュしていないからです。テスターを開いている場合、新しいテストフローを実行する前にリフレッシュアイコンをクリックする必要があります。

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.

予期せぬユーザーの行動をデバッグする方法

テスターでエージェントフローを実行し始めると、エラーに遭遇するかもしれません。それは普通のことです!テスターの各チャットバブルには、2つのアイコンがあります。最初の外部リンクアイコンは、キャンバスを調整し、その出力を担当するノードを表示します。2番目のコードアイコンは、フロー実行の JSON コードを表示するデバッグウィンドウを開きます。

次の例では、デバッグウィンドウがいかに便利であるかがわかります。このチャットでは、"banana" と入力し、ウェブフックはエラーなしで実行されているようです。しかし、表示価格は得られません。

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.最初のステップは、Send Messageノードにパラメータが正しく表示されるようにすることです。そこで、パラメータ price を 100 に設定してみましょう。するとご覧の通り、価格が100ドルと表示されました。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.

今回、Webhook メッセージのコードアイコンをクリックすることで、デバッグウィンドウを開くことができます。エージェント内でこれまでに実行されたすべての JSON ログが開きます。より簡単に問題のノードを見つけるために、"web" を検索することができます。そして、ここで犯人を見つけます!

ヒント エラー」を検索することで、複数のエラーが発生した場合に、正しいエラーを特定しやすくなります。

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.ウェブフック・ノードのステータスは "SUCCESS "を示しているが、"text "フィールドで受け取るメッセージは価格を含んでいない。代わりに

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

そして、それは理にかなっている。 バナナはスプレッドシートにないからだ。

ヒント: エラーをより素早く見つけるには、ctrl+f または cmd+f を使用します。

WhatsAppのテスト方法

ビルトインテスターでは、WhatsApp 上でエージェントを直接テストすることができます!Studio テスターでは一部の機能が欠けている可能性があるため、最も現実に近いテスト方法としてお勧めします。

テスターを開き、今度は「Whatsappでテスト」をクリックします。QRコードとリンクが表示されます。QRコードを携帯電話でスキャンするか、リンクをクリックしてください。テストバージョンのエージェントとのチャットが開きます。

生成されたパスフレーズを送信してチャットを開始します。その後、エージェントはフローに従って実行されます。他の人にエージェントをテストしてもらうために、チャットへのリンクを共有することもできます。

注意:テストチャットの有効期限は最大24時間です。テスターを再度開き、QRコード/リンクを再スキャンすることにより、チャットを再生成する必要があるかもしれません。しかし、テストチャットは本番エージェントとして動作しません。 エージェントを公開するする必要があります。

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.

結論

AI Studioに内蔵されたテスターの使い方やデバッグ方法をご理解いただけたでしょうか。豊富な AI Studioチュートリアルをご覧ください。もし行き詰まったり、テスターでバグを回避する方法がわからない場合は VonageコミュニティSlack.AI Studio専用のチャンネルもあります。

シェア:

https://a.storyblok.com/f/270183/384x384/e4e7d1452e/benjamin-aronov.png
Benjamin Aronovデベロッパー・アドボケイト

Benjamin AronovはVonageの開発者支援者です。彼はRuby on Railsのバックグラウンドを持つ実績のあるコミュニティ・ビルダーです。Benjaminは故郷であるテルアビブのビーチを楽しんでいる。テルアビブを拠点に、世界最高のスタートアップの創設者たちと出会い、学ぶことができる。技術以外では、完璧なパン・オ・ショコラを求めて世界中を旅するのが好き。