会話エージェントを使って動的なウェブ エクスペリエンスを実現する方法
Wei Yih Yap
Generative AI Solutions Architect
Han Wen Kam
Conversational AI Practice Specialist, Asia Pacific
※この投稿は米国時間 2025 年 1 月 11 日に、Google Cloud blog に投稿されたものの抄訳です。
ウェブサイトをお持ちの場合、既存顧客の維持と新規顧客の獲得を効果的に両立できる、魅力的なエクスペリエンスを生み出すことは最低限の条件です。ユーザーはパーソナライズされたコンテンツを求めていますが、従来のウェブサイト開発ツールでは、個々のユーザーに合わせた動的なジャーニーへのニーズに十分に対応できません。Google Gemini と会話エージェント(Dialogflow CX)を使用すると、ユーザーが何を探しているかに応じてコンテンツが動的に変わるウェブサイトを構築できます。
このブログ投稿では以下のことを行う方法について説明します。
-
会話エージェントを使用して、ユーザーのインテントに対応する動的なウェブページを作成する
-
関数ツールを使用して、会話のインテントとウェブ コンテンツの表示を結びつける
会話エージェントの関数ツールとは
会話エージェントの関数ツールは、chatbot で外部システムとやり取りし、ユーザーとの会話に応じてアクションをトリガーできる機能です。この記事では、関数ツールを使用して以下のことを行います。
-
自然言語の入力からユーザーのインテントを検出する
-
それらのインテントを特定の関数ツールにマッピングする
- 会話の流れに応じて UI を動的に更新する
小売業の chatbot の例
これらの機能はあらゆる業種で活用できるものですが、特に小売業では会話エージェントを使った動的ウェブページの構築が効果的です。ここでは、このツールのデモとして、小売業の chatbot のユースケースを使用します。ワークフローは次のとおりです。
ステップ 1: 関数ツールを作成する
新しいハンドブック関数ツール Load-Swag-Content
で、次の入力 / 出力スキーマを YAML 形式で設定します。
コンソールは次のようになります。
ステップ 2: ハンドブック ステアリング エージェントを設定する
関数ツール Load-Swag-Content
を呼び出すメインのステアリング ハンドブックを設定します。
ステップ 3: ハンドブック エージェントの動作を実行する例を作成する
この例では、ユーザーが「バックパック」について尋ねると、ハンドブック エージェントが関数ツールを呼び出し、ウェブ クライアントへの引数としてバックパックに関連する URL を渡します。
ウェブ クライアントの詳細については、次のステップで説明します。
ステップ 4: ウェブ クライアントの JavaScript 関数を記述する
クライアントサイドの JavaScript 関数は、Load-Swag-Content 関数ツールから URL を受け取り、それに合わせて HTML の iframe を更新します。
ここでは、HTML の iframe を使用して、関数呼び出しとパラメータ受け渡しの機能を示しています。他のウェブ フレームワークやウェブ アプリケーションでも同じコンセプトを使用できます。また、創造性を発揮してカスタム ロジックを構築することもできます。
ステップ 5: 関数ツールを登録する
registerClientSideFunction
を使用してハンドブック関数ツールを登録します。これで Load-Swag-Content
ツールが JavaScript 関数 loadURL
とマッピングされます。
toolId
は、ハンドブック関数ツールのページのブラウザ URL バーから取得できます。
ステップ 6: Dialogflow Messenger を統合する
最後に、Dialogflow Messenger の統合をウェブ クライアントに埋め込みます。
フロントエンドのソースコードの例
フロントエンドのサンプルコードです。YOUR_REGION
、YOUR_PROJECT_ID
、YOUR_AGENT_ID
、YOUR_TOOL_ID
、そしてカスタム JavaScript 関数などの構成は更新してください。
デモのウェブページ
仮想商品アシスタントのデモ ユースケースを見てみましょう。チャットで初めにあいさつのメッセージが表示されます。
顧客がフリース ジャケットについて詳しく知りたいと返すと、ページが動的に更新され、関連する情報が表示されます。
次のステップ
会話エージェントの関数ツールの詳細については、以下のリソースをご覧ください。インテントに応じたリアルタイムの動的ウェブページでカスタマー エクスペリエンスを向上させましょう。
-
会話エージェントを初めて使用する場合に役立つチュートリアルはこちら
-生成 AI ソリューション アーキテクト Wei Yih Yap
-会話型 AI プラクティス スペシャリスト(アジア太平洋地域)Han Wen Kam