https://a.storyblok.com/f/270183/131079/d9b7929f60/farewell-app_ai-studio.png

Vonage AI StudioとNotionをデータベースとして使用したお別れアプリの構築

最終更新日 December 19, 2023
#ai-studio
#low-code

所要時間：1 分

The Office』S7E22を再現する（Vonage編）

他に誰かいなかったのか？ 大丈夫じゃなかったザ・オフィス』シーズン7第22話の後？

ネタバレ注意！

「グッバイ、マイケル」は本来、マイケル・スコットがビジネス上のミスでダンダー・ミフリンを解雇される話だった（つまらない！）。その代わり、脚本家たちは、マイケルが会社を辞めて婚約者と一緒にコロラドに引っ越すという、非常に甘いエピソードで私たちの心を引き裂くことにした。

退職する前に、彼は従業員一人一人に特別な餞別を贈る。私は前の会社を辞めるとき、これほど壮大なことはしなかったが、元同僚たちがバーチャルな電話番号に名前を送り、私が一人ひとりのために書いたパーソナライズされたメッセージを受け取ることができるアプリを作った。それは、別れを告げるための心のこもった方法であり、その夏にどれだけ助けてもらったかを伝えるものだった。

Vonage AI StudioとNotionを使ってこのプロジェクトを再現する方法をお見せしたいと思います。さっそく始めてみましょう！

前提条件

Vonage AI Studioのセットアップ

それが完了したら、APIダッシュボードに行き、左側にある ビルド＆管理> AIスタジオ> AI Studioに移動する。> エージェントの作成.エージェントの種類は自由に選択できますが、この例では以下のものを使用します。 WhatsApp.

必要事項をすべて記入してください：

  • 地域:貴社の代理店が通常使用される地域 - 米国または欧州

  • 代理店名:あなたにとって意味のあるユニークな名前をエージェントにつけてください。

  • 言語:エージェントの言語を選択します。

  • タイムゾーン:エージェントが活動するタイムゾーンを選択します。

テンプレートについては ゼロから始める.

イベントの場合 インバウンドコールとなります。

Notionを使ったデータベースの作成

ベストプラクティスとして、同僚の実際の名前、メッセージ、受信者のメールをデータベースに保存します。 Notion!

  1. こちらへ 概念.

  2. (+)ボタンをクリックしてページを追加します。

  3. DATABASE」の下にある新しいページで、「Table」をクリックする。

  4. 各列に必要なさまざまな項目と対応するプロパティを入力します。ここでは、Coworker、Message、Emailというカラムを用意しました。

Screenshot of a Notion table titled 'Goodbye, Michael' with three columns labeled 'Coworker,' 'Message,' and 'Email.' There are entries for three coworkers: Dwight, Kevin, and Darryl. Dwight's message is a humorous, self-praising speech; Kevin's is a short, reflective statement; and Darryl's message mentions giving the only copy of 'Somehow I Manage,' unfinished. Each entry includes a corresponding email address at dundermifflin.com.Database in Notion

会話の流れを明確にする

ここからが楽しいところです！Vonage AI Studioの使いやすいインターフェイスで、チャットボットの会話の流れをデザインできます。ドラッグ＆ドロップで設定できるので、コーディングのスキルは必要ありません。さまざまなダイアログノードを追加し、応答を定義することができます。

私たちの流れはこのようになるはずだ：

A flowchart of a conversational interface process. It starts with 'START,' then moves to a 'ASK NAME' step, which is a text input with a note 'Unexpected Input Type.' Next is 'Webhook 1' showing a '2XX' status but marked as 'Failed.' The flow then splits; one path goes to 'SEND EMAIL' with a variable '$RETURNED_EMAIL,' and the other path leads to 'END CONVERSA...' indicating the end of the conversation. The overall layout suggests a sequential process with a conditional branch for sending an email or ending the conversation.Conversation Flow

NODES > 会話 > 入力を収集するバーチャルエージェントはユーザーに質問を促します。

  • ノード名： ASK NAME.

  • プロンプト：「さて、私はホリーと新しい生活を始めるためにコロラドに引っ越します。

  • 再試行のプロンプト：もう一度やってみましょう。名前を入力して返信してください。

  • 期待される入力テキスト

NODES > 統合 > ウェブフック

  • メソッドPOST

  • リクエストURL： https://api.notion.com/v1/databases/<database_id>/query_ データベース IDを検索するには、Notion ワークスペースのデータベース URL に移動します。ID は、ワークスペース名（該当する場合）に続くスラッシュとクエスチョン マークの間にある URL の文字列です。ID は、32 文字の英数字文字列です。

  • ヘッダー (HTTP ヘッダー : 値)

    • 認証 : ベアラ $NOTION*ACCESS_TOKEN

    • ノーションバージョン : 2022-06-28

    • コンテンツタイプ : application/json* NOTION_ACCESS_TOKENを見つけるにはを見つけるには 認証プロセスを 内部 統合Notion._ -レスポンス・マッピング レスポンス・タイプ：JSON オブジェクト・パス：上記の情報を webhook ノードに入力した後、右上の「Test request」ボタンをクリックして webhook が機能していることを確認します。レスポンスの下に、Notionテーブルからすべてのデータが返されることがわかります。レスポンスを使用します、 オブジェクトパスを定義し、パラメータにマッピングします。

Screenshot of a 'Response Mapping' section from an application interface with a drop-down menu selecting 'JSON' as the response type. There are three object paths listed with corresponding parameters. The first is 'results[0].properties.Message.rich_text[0].text.content' mapped to a parameter '$RETURNED_MESSAGE'. The second is 'results[0].properties.Email.email' mapped to '$RETURNED_EMAIL'. The third is 'results[0].properties.Coworker.title[0].plain_text' mapped to '$RETURNED_COWORKER'. The layout is a structured table indicating how JSON response elements correspond to internal parameters of the system.Response Mapping

パラメータ：オブジェクト・パスごとにパラメーターを作成する。それぞれのEntityに@sys.anyを選択する。

A screenshot showing the 'Custom Parameters' settings in the 'Webhook 1' configuration panel. There are four parameters listed: 'INPUT,' 'RETURNED_COWORK...,' 'RETURNED_EMAIL,' and 'RETURNED_MESSAGE.' Each has an associated entity designated as '@sys.any' and a field for entering a value. The list suggests placeholders for user input and returned data from the system, awaiting specific values to be entered or retrieved during operation.Parameters

NODES > アクション > Eメール送信

  • 宛先: $RETURNED_EMAIL

  • 件名マイケル・スコットより

  • ボディ： $RETURNED_MESSAGE

NODES > アクション > 会話の終了

アプリの実行

Vonage AI Studioの上部で、"Tester"、"Start chat "の順にクリックします。データベースから名前を入力します。

A screenshot of a chat interface in testing mode, labeled 'Tester' and 'Chat'. The conversation starts with an agent's message timed at 3:47 PM stating, 'Well, I'm moving to Colorado to start my new life with Holly.' prompting a reply with the user's name for a personalized message. The user responds with 'Darryl' at the same timestamp. Subsequent system messages indicate 'Webhook was executed successfully' and 'Email sent successfully,' followed by 'Conversation Ended.' The interface is designed to simulate a user interaction with an automated chatbot agent.Test Darryl

すると、対応する内容のメールが届くはずだ！

A screenshot of an email interface with the subject 'Goodbye from Michael Scott' in the inbox. The sender is 'dont-reply@ai.vonage.com'. The body of the email reads, 'I would like to give you the only copy of "Somehow I Manage", unfinished. If there's anybody here who can finish it, it's you.' Below the message, there are options to 'Reply' or 'Forward' the email.Email Received

自分だけの「古き良き時代」を築く

お別れは平凡である必要はありません。Vonage AI StudioとNotionをデータベースとして使い、創造性を発揮すれば、心のこもった忘れられないお別れにすることができます。さあ、相手が最後にもう一度笑顔になるような、パーソナライズされたメッセージで喜びを広げましょう。

The Office』のフィナーレで、アンディ・バーナードが「古き良き時代から離れる前に、古き良き時代にいることを知る方法があればいいのに」と言った。私たち開発者の "オフィス "に気軽に参加してください。 スラックでフォローしてください。 Xでフォローしてください。もし同じようなアプリケーションを作ることになったら、ぜひシェアしてください。 タグをつけてください。- あなたのシーズン・フィナーレについてお聞かせください。

シェア:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana Phamデベロッパー・アドボケイト

ダイアナはVonageのデベロッパー・アドボケイト。新鮮な牡蠣を食べるのが好き。