コンテンツに移動
デベロッパー

会話エージェントを使って動的なウェブ エクスペリエンスを実現する方法

2025年1月21日
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を使用すると、ユーザーが何を探しているかに応じてコンテンツが動的に変わるウェブサイトを構築できます。

このブログ投稿では以下のことを行う方法について説明します。

  1. 会話エージェントを使用して、ユーザーのインテントに対応する動的なウェブページを作成する

  2. 関数ツールを使用して、会話のインテントとウェブ コンテンツの表示を結びつける

会話エージェントの関数ツールとは

会話エージェントの関数ツールは、chatbot で外部システムとやり取りし、ユーザーとの会話に応じてアクションをトリガーできる機能です。この記事では、関数ツールを使用して以下のことを行います。

  1. 自然言語の入力からユーザーのインテントを検出する

  2. それらのインテントを特定の関数ツールにマッピングする

  3. 会話の流れに応じて UI を動的に更新する

小売業の chatbot の例

これらの機能はあらゆる業種で活用できるものですが、特に小売業では会話エージェントを使った動的ウェブページの構築が効果的です。ここでは、このツールのデモとして、小売業の chatbot のユースケースを使用します。ワークフローは次のとおりです。

https://storage.googleapis.com/gweb-cloudblog-publish/images/1_workflow_diagram.max-1100x1100.png

ステップ 1: 関数ツールを作成する

新しいハンドブック関数ツール Load-Swag-Content で、次の入力 / 出力スキーマを YAML 形式で設定します。

読み込んでいます...

コンソールは次のようになります。

https://storage.googleapis.com/gweb-cloudblog-publish/images/2_tool_setup.max-2000x2000.png

ステップ 2: ハンドブック ステアリング エージェントを設定する

関数ツール Load-Swag-Content を呼び出すメインのステアリング ハンドブックを設定します。

https://storage.googleapis.com/gweb-cloudblog-publish/images/3_playbook_instruction.max-1900x1900.png

ステップ 3: ハンドブック エージェントの動作を実行する例を作成する

この例では、ユーザーが「バックパック」について尋ねると、ハンドブック エージェントが関数ツールを呼び出し、ウェブ クライアントへの引数としてバックパックに関連する URL を渡します。

ウェブ クライアントの詳細については、次のステップで説明します。

https://storage.googleapis.com/gweb-cloudblog-publish/images/4_playbook_example.max-1500x1500.png

ステップ 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_REGIONYOUR_PROJECT_IDYOUR_AGENT_IDYOUR_TOOL_ID、そしてカスタム JavaScript 関数などの構成は更新してください。

読み込んでいます...

デモのウェブページ

仮想商品アシスタントのデモ ユースケースを見てみましょう。チャットで初めにあいさつのメッセージが表示されます。

https://storage.googleapis.com/gweb-cloudblog-publish/images/5_backpack.max-2200x2200.png

顧客がフリース ジャケットについて詳しく知りたいと返すと、ページが動的に更新され、関連する情報が表示されます。

https://storage.googleapis.com/gweb-cloudblog-publish/images/6_fleece.max-2200x2200.png

次のステップ

会話エージェントの関数ツールの詳細については、以下のリソースをご覧ください。インテントに応じたリアルタイムの動的ウェブページでカスタマー エクスペリエンスを向上させましょう。

-生成 AI ソリューション アーキテクト Wei Yih Yap

-会話型 AI プラクティス スペシャリスト(アジア太平洋地域)Han Wen Kam

投稿先