デベロッパー

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

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

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

会話エージェントを使用して、ユーザーのインテントに対応する動的なウェブページを作成する
関数ツールを使用して、会話のインテントとウェブコンテンツの表示を結びつける

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

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

自然言語の入力からユーザーのインテントを検出する
それらのインテントを特定の関数ツールにマッピングする
会話の流れに応じて 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_REGION、YOUR_PROJECT_ID、YOUR_AGENT_ID、YOUR_TOOL_ID、そしてカスタム JavaScript 関数などの構成は更新してください。

読み込んでいます...

<HTML>
    <body>
    <iframe id="myIframe" src="" width="100%" height="600px"></iframe>
    
    <link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
    <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
    <df-messenger
      location="<YOUR_REGION>"
      project-id="<YOUR_PROJECT_ID>"
      agent-id="<YOUR_AGENT_ID>"
      language-code="en"
      max-query-length="-1">
      <df-messenger-chat-bubble
       chat-title="VA driven Web Content"
       expanded="true"
       chat-width="320"
       chat-height="480">
      </df-messenger-chat-bubble>
    </df-messenger>
    <style>
      df-messenger {
        z-index: 999;
        position: fixed;
        --df-messenger-font-color: #000;
        --df-messenger-font-family: Google Sans;
        --df-messenger-chat-background: #f3f6fc;
        --df-messenger-message-user-background: #d3e3fd;
        --df-messenger-message-bot-background: #fff;
        bottom: 16px;
        right: 16px;
      }
    </style>
    
    <script>
    function loadURL(url) {
      console.log("URL received: " + url.url);
      document.getElementById('myIframe').src = url.url;
    }
    
    const toolID = "<YOUR_TOOL_ID>";
    
    const dfMessenger = document.querySelector('df-messenger');
    dfMessenger.registerClientSideFunction(toolID, "Load-Swag-Content", loadURL);
    
    const default_url = {"url":"https://www.example.com/v1/inventory.html"};
    loadURL(default_url);
    dfMessenger.sendQuery('Hi');
    
    </script>
    </body>
    </HTML>

デモのウェブページ

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

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

投稿先

https://storage.googleapis.com/gweb-cloudblog-publish/images/image4_wB9HxG2.max-700x700.png

Developers & Practitioners

Gemini Code Assist によるコーディング支援が無償で利用可能に

執筆者: Ryan J. Salva • 所要時間: 3 分

https://storage.googleapis.com/gweb-cloudblog-publish/images/0-hero-hpc.max-700x700.png

Networking

AI ワークロードのネットワーキングサポート

執筆者: Ammett Williams • 所要時間: 8 分

Financial Services

Google Cloud で Swift の Alliance Connect Virtual を使用する

執筆者: Maria Alejandra Emmanuelli • 所要時間: 18 分

AI & Machine Learning

PyTorch デベロッパー向け JAX 基礎ガイド

執筆者: Anfal Siddiqui • 所要時間: 12 分

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

Wei Yih Yap

Han Wen Kam

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

小売業の chatbot の例

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

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

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

ステップ 4: ウェブ クライアントの JavaScript 関数を記述する

ステップ 5: 関数ツールを登録する

ステップ 6: Dialogflow Messenger を統合する

フロントエンドのソースコードの例

デモのウェブページ

次のステップ

関連記事

Gemini Code Assist によるコーディング支援が無償で利用可能に

AI ワークロードのネットワーキング サポート

Google Cloud で Swift の Alliance Connect Virtual を使用する

PyTorch デベロッパー向け JAX 基礎ガイド

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

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

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

ステップ 4: ウェブクライアントの JavaScript 関数を記述する

AI ワークロードのネットワーキングサポート