シェア:
){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を使用しています。詳細については以下を参照してください。
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を使って何を作っているのか、とても興味があります！