シェア:
){kind=small}
Benjamin AronovはVonageの開発者支援者です。彼はRuby on Railsのバックグラウンドを持つ実績のあるコミュニティ・ビルダーです。Benjaminは故郷であるテルアビブのビーチを楽しんでいる。テルアビブを拠点に、世界最高のスタートアップの創設者たちと出会い、学ぶことができる。技術以外では、完璧なパン・オ・ショコラを求めて世界中を旅するのが好き。
低コードレバレッジ：AIスタジオとAirtable
所要時間：1 分
数ヶ月前、私はハッカソンのためにドバイにいた。ホテルのタクシードライバーはとても親切で、私が2日間の旅を最大限に楽しめるようにと気遣ってくれた。彼は、イベントの各日のスタートとゴールで私をピックアップしてくれたり、市内のさまざまな種類の専門的なツアーをしてくれたり、アブダビへの旅行までしてくれたりと、あらゆる種類のサービスを提供し始めた。
WhatsAppでメッセージを送るためのQRコード付きの名刺をくれた。そのQRコードをスキャンすると、彼のビジネスアカウントのチャット・ウィンドウが表示された。しかし、それだけだった！彼が教えてくれたクールなサービスは、どれもユーザーには表示されなかった。そこで私のビジネス・ブレーンが働いて、彼にこう提案した。VonageのAI Studioを使えば、顧客に本当に力を与えることができますよ！
An example of a QR code Taxi Driver card. Credit to zazzle.com
Vonageは昨年 AI Studioを立ち上げた。これはNoCode/LowCodeプラットフォームで、誰でも素早く会話型AIエージェントを構築することができる！会話型AIの典型的なユースケースは、カスタマーサポートやマーケティング用のチャットボットです。しかし、チャットボットはさらに多くのアプリケーションのユーザー体験を向上させることができます！
このチュートリアルでは、Airtableをバックエンドデータベースとして使用し、情報の保存とアクセスを行うタクシーサービスのAI Studio WhatsAppエージェントの作成方法をご紹介します。
ヤラ、行こう！
Vonageデベロッパーアカウント。AI Studioを使用するにはVonage Developer Accountが必要です。詳細は下記をご覧ください。
Airtableアカウント - サインアップ こちら.バックエンドデータベースとしてAirtableを使用します。
ポストマンアカウント - サインアップ こちら.このチュートリアルの上級編では、Postmanを使ってリクエストを送信します。
オプションMiroアカウント - サインアップする こちら.私はAI StudioエージェントのモックアップにMiroを使用しています。詳細については以下を参照してください。
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モックアップの作成については、こちらをご覧ください。 こちら.
私たちのアプリでは、ユーザーが人気のある場所までのタクシー料金を調べたり、連絡先を追加して将来のタクシー情報を購読できるようにします。モックアップはこんな感じです：
Example of mockup for inbound flows of AI Taxi Demo
何を作りたいのかが明確になったところで、さっそく作ってみよう！
AI Studioを使い始める前に、Airtableデータベースをセットアップする必要があります。Airtableは、スーパーパワーを持ったExcelのようなクールなツールです！Airtableの ドキュメントは素晴らしく、始めるには最適な場所です。
慣れてきたら、新しい基地を作りたくなるでしょう。AIタクシー・デモ」と呼ぶことにしよう。このベースには2つのテーブルがあります：DestinationsとCustomersです。
Destinations（目的地）については、シンプルにします。フィールドは2つだけです：名前と価格です。
Destinations table with fields Name and Price
同様に、Customersテーブルでも2つのフィールドを使用します：NameとPhone_Numberです：
Customers table with fields Name and Phone_Number
これらのテーブルにダミーのデータを追加して、APIコールが値を返すようにしよう。電話番号は数字のみで入力し、プラス記号（+）は入力しない。
データベースのセットアップが完了したので、ユーザーと対話し、Airtableとデータをやり取りするAI Studioエージェントの構築を開始します。AI Studioのドキュメントの指示に従ってください。 こちら.エージェントには3つの重要なオプションがあります：
タイプWhatsApp
テンプレートゼロから始める
イベントインバウンド
では、フローの構築に取りかかろう。素晴らしいことに、基本的にすべての作業はすでに終わっている！あとは、縦のフローチャートを横のエージェントに変えるだけです。
私たちの歩み
メッセージ送信ノードようこそAIタクシーへ」というウェルカムメッセージを送ります。
入力ノードを集める：とユーザーに尋ねる。ユーザーの回答はTOPICというパラメータに格納されます。
パラメータは変数のようなもので、エージェント全体でアクセスすることができます。パラメータについては を参照してください。.コードの変数にデータ型があるように、パラメータには エンティティ.簡単のため、すべてのパラメータは @sys.any 型とします。
分類ノード：パラメータを分類する。
TOPICパラメータを分類する。2つのインテントを持つ：Retrieve PricesとSign Up For Promotions.この例では2つのインテントしかないので、単純な条件を使うこともできます。しかし、AI Studioの素晴らしさとパワーは分類機能です。私たちは、ユーザーがどんなリクエストでも自由に入力し、自然に書けるようにしたいと考えています。提案されたUser Expressionsを持つClassificationノードがいかに強力で使いやすいか、おわかりいただけるでしょう； こちら.入力ノードを収集する：ユーザーに「どこに行きたいですか」と尋ねる。ユーザの回答はDESTINATIONというパラメータに格納されます。
これで、Airtableに検索語を送り、保存されている価格情報を受け取ることができる。しかし、どうやってAirtableに渡すのでしょうか？Airtableの素晴らしいところは、各ベースにAPIが組み込まれており、ドキュメントも充実していることです。AIタクシーのデモベースから ヘルプをクリックします。そしてサイドバーの一番下にある APIドキュメント.本当にクールなのは、Airtable が必要なリクエストを生成してくれることです！ここでは、事前に作成された curl リクエストを見つけることができます：
次に、これをAI Studioエージェントに追加する必要があります。そこで Webhookノードを追加します。Webhookノードについて詳しくは こちら.
ノードのRequest URLにエンドポイントを追加します：
https://api.airtable.com/v0/app4AtCxYJu9tagah/Destinations
また、ヘッダタブのヘッダパラメータに Airtable パーソナルアクセストークンを追加する必要があります。パーソナル・アクセストークンの生成と使用方法については こちら.必ずスコープを与えてください： data.records:readそして data.records:write.このトークンは一度しか見ることができないので、後でコピー＆ペーストできるように安全な場所に保存しておくこと。
これでウェブフック・ノードは次のようになるはずだ：
Example of Lookup Destination Webhook Node
ウェブフックが機能しているかどうかは、右上の test requestボタンをクリックします。テーブル内のすべてのDestinationが返されることがわかります。どのようなデータが返されるかは、レスポンスタブで確認できます：
Example of Destinations Lookup Response
しかし、私たちはすべての目的地が欲しいわけではなく、ユーザーの入力によって検索できるようにしたいのです。幸いなことに、Airtableにはクールな検索機能があります。例えば filterByFormulaを使ってグローバルなテーブル検索を作成しました。ここでは filterByFormulaを使用します。そして、私たちのウェブフック・ノードはこのようになります：
Example of Webhook Node with Query Parameters
クエリパラメータタブをクリックし、パラメータと値を入力する必要があります。URLパスに直接書き込んでも保存されません。
リクエストに問題がある場合は、パラメータを $DESTINATIONパラメータを でエンコードしてみてください。.私たちのリクエストをエンコードすると、次のようになります：
filterByFormula==SEARCH(%22$DESTINATION%22%2C+%7BName%7D)
さて、テストをもう一度実行してみると、リクエストはオブジェクトを返し、その中に "records "と呼ばれるものがあり、それ自体がレコード・オブジェクトの配列を含んでいることがわかる。
Example of Filtered Response
AI Studioでは、APIのレスポンスを レスポンスマッピング機能を使用できます。返されたオブジェクトをAI Studio内で使用できるパラメータにマッピングする必要があります。このようにします：
Example of Response Mapping
レスポンス・データのマッピングができたので、テストを実行し、パラメータに返される値を確認することができる！
Example of Response Mapping Test Results
やりました！AI Studio エージェントと Airtable データを接続し、エージェントでこの情報を使用できるようになりました。最後のステップは、エージェントでデータを使用し、ユーザに素敵なメッセージを作成することです：
Example of Send Price Node
もし テスターを開くと、タクシー料金を尋ねるまでの全行程を見ることができます。
Testing Our Completed Flow
AirtableのDBと接続し、情報を受信し始めたので、情報を送信するのは簡単だ！
トピック分類ノードから再スタートします。Sign Up For Promotions」という新しいインテントを追加し、いくつかのユーザ表現を追加します。次のようなものです：
Example of Adding User Expressions To Training Set
これでWebhookに接続する準備ができました。Airtableのドキュメントをもう一度見てみよう。リクエストの書式を正確に示してくれています。生成されたリクエストには次のようなものがあります：
Example of Airtable POST Request
あとは新しい webhook ノードを開くだけです。まず、リクエストタイプをGETからPOSTに変更する。ヘッダーのAuthorizationキーに個人アクセストークンを渡す必要があることがわかります。しかし、今度は渡すべき2番目のフィールドもある。Content-Typeを追加して、リクエストでjsonを送信することを伝えよう。そして最後に、顧客のレコードを持つオブジェクトのデータをボディに渡します。
Example of POST request webhook node
まず、テスト客を通そう。ミス・ピギーとしましょう。
Example of sending Miss Piggy customer to Airtable
そして、Test Requestを押すと、Airtableに新しいエントリーが表示されるはずだ。
New entry in Airtable; Miss Piggy
しかし、ミス・ピギーをデータベースに追加したいわけではない！実際のユーザーを追加したいのです。ここでユーザーの名前と番号を尋ねることもできますし、より多くの情報が必要な場合は、ここでいくつかのコレクト入力ノードを使用する必要があるでしょう。しかし、このアプリでは、ユーザー名と番号だけが重要です。これにはAI Studioの組み込みシステムパラメータを使用します！そこで、Miss Piggyの名前と電話番号をシステムパラメータで更新します。 $PROFILE_NAMEそして $SENDER_PHONE_NUMBER.リクエストボディはこのようになります：
Example of POST request with dynamic variables
最後に、send messageノードでお礼のメッセージを追加しましょう。これでこのフローをテストできる：
Testing Our Completed Flow 2
AI Studioを使いやすいAirtableデータベースで実装する方法をご覧いただきました。新しいスキルで何を作りますか？ぜひ ツイッターまたは VonageコミュニティSlack(AI Studioのチャンネルもあります）。あなたがLow Codeを使って何を作っているのか、とても興味があります！