Zenn
😽

Vertex AI Search の検索ウィジェットを埋め込んだ Web アプリを構築してみた

2024/06/27に公開
Next.js
Google Cloud
生成 AI
agentbuilder
vertexaisearch
tech

こんにちは、クラウドエース株式会社 フロントエンド・UI/UX 部の松尾です。

この記事では Vertex AI Agent Builder の機能の一つである Vertex AI Search による Retrieval-Augmented Generation（以下、RAG）システムを、簡単に Web アプリに埋め込む方法をご紹介します。

Vertex AI Search とは？

Vertex AI Search は、Vertex AI Agent Builder という Google Cloud のプロダクトの一部で、
Google の生成 AI 技術を利用して簡単に検索システムを作ることができる機能です。
https://cloud.google.com/products/agent-builder?hl=ja

Vertex AI Search を使えば、組織内で取り扱うドキュメントなどのデータに基づいた質問に対して AI が回答してくれる検索システムを簡単に構築することができます。

Vertex AI Search のメリットとして、生成 AI や LLM（Large Language Models、大規模言語モデル）の初心者でも RAG システムの構築に簡単に挑戦することができます。
そのため、生成 AI を活用する最初の一歩としておすすめです。

Vertex AI Search の導入方法

Vertex AI Search の導入方法は、主に 2 通りあります。

  1. Discovery Engine API を使用する
  2. ウィジェットを埋め込む

今回は、後者のウィジェットを埋め込む方法の導入手順について 3 ステップでご紹介します。

導入手順

ステップ1：データの準備

まず、RAG の元となるデータを用意し、Cloud Storage にアップロードします。

Cloud Storage のバケットを作成し、[ファイルをアップロード] をクリックします。
バケット名やリージョンなどは任意の値を設定してください。

ローカルからファイルを選択し、アップロードします。

今回はマイナンバーカードに関するデータを用意しました。
※ 総務省のサイトからダウンロードした PDF ファイルを使用します。

ステップ2：アプリの作成

次に、アップロードしたデータを元に回答してくれる Vertex AI Search のアプリを作成します。

Agent Builder にアクセスします。
初めて利用する方は、利用規約をチェックのうえ API を有効化してください。

[新しいアプリを作成] をクリックし、アプリの種類の選択で [検索] を選択します。

アプリの構成を入力し、[続行] をクリックします。
今回の設定値は以下です。

  • Enterprise エディションの機能：オン
  • 高度な LLM 機能：オン
  • アプリ名：{ 任意のアプリ名 }
  • 会社名または組織名：クラウドエース株式会社
  • アプリのロケーション：global（グローバル）

[データストアを作成] をクリックし、データソースを選択で Cloud Storage を選択します。

Import data from Cloud Storage を入力し、[続行] をクリックします。
今回の設定値は以下です。

  • What kind of data are you importing?：非構造化ドキュメント（PDF、HTML、TXT など）
  • インポートするフォルダ：{ 任意のバケット名とフォルダ名 }（今回は前述のステップで用意したもの）

データストアの構成を入力し、[作成] をクリックします。
今回の設定値は以下です。

  • データストアのロケーション：global（グローバル）※変更不可
  • データストア名：{ 任意のデータストア名 }
  • このデータストアにはアクセス制御に関する情報が含まれています：チェックなし

作成したデータストアにチェックを入れ、[作成] をクリックします。

5 分程度でデータのインポートが完了し、[データ] メニュー > [ドキュメント] タブにデータ一覧が表示されます。

ここまで完了すれば、[プレビュー] メニューから検索機能が利用できるようになります。
以下は「マイナンバーカードを使ってコンビニで取得できる書類は」と聞いてみた結果です。
※生成結果にはマスクをしてあります。

ステップ3：作成したアプリの埋め込み

最後に、作成した Vertex AI Search アプリを Web アプリに埋め込みます。

まず、[統合] メニュー > [ウィジェット] タブにアクセスし、認証・認可の設定をして [保存] をクリックします。
今回の設定値は以下です。

  • 認証タイプの選択：公開アクセス
  • ウィジェットで許可するドメイン：localhost

認証タイプの選択

今回は検証のため「公開アクセス」を選択しましたが、「JWT または OAuth ベース」の場合は、[ウィジェット] タブ最下部のサンプルコードを参照してください。

ウィジェットで許可するドメイン

ドメインを追加してから適用されるまでに 30 分程度かかります。
今回は検証のため localhost にしましたが、既存サイトのドメインを追加すれば、既存サイトに検索ウィジェットを埋め込むこともできます。

次に、Web アプリ側でコードを追加します。
HTML ファイルに直接読み込ませる場合は、[統合] メニュー > [ウィジェット] タブのサンプルコードをそのままコピー&ペーストして使えます。
今回は Next.js を使用した Web アプリに埋め込むため、Next.js の初期構築後、以下のコンポーネントを任意の page コンポーネントで読み込ませます。

'use client'
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    // クライアントサイドでスクリプトを読み込む
    const script = document.createElement("script");
    script.src = "https://cloud.google.com/ai/gen-app-builder/client?hl=ja";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // クリーンアップ
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="p-16">
      <gen-search-widget
        configId="{{ YOUR_CONFIG_ID }}"
        triggerId="searchWidgetTrigger">
      </gen-search-widget>
      <input placeholder="ここで検索" id="searchWidgetTrigger" />
    </div>
  );
}

ローカルサーバーを起動し、「ここで検索」にフォーカスを当てると以下のようにウィジェットが開きます。
※入力及び検索は、ドメイン追加設定から 30 分程度経たないとできないので注意してください。

ドメインの適用が反映されると、コンソール上と同様に検索ができるようになります。
以下は「マイナンバーカードは更新が必要ですか」と聞いてみた結果です。
※生成結果にはマスクをしてあります。


スクリプトの読み込み

初期化の段階で、クライアントサイドで Vertex AI Search のスクリプトを読み込ませます。

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://cloud.google.com/ai/gen-app-builder/client?hl=ja";
  script.async = true;
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, []);

UI の埋め込み

ウィジェットの UI となる gen-search-widget コンポーネントと、ウィジェットを開くためのトリガーとなる input タグを追加します。

<gen-search-widget
  configId="{{ YOUR_CONFIG_ID }}"
  triggerId="searchWidgetTrigger">
</gen-search-widget>
<input placeholder="ここで検索" id="searchWidgetTrigger" />

configId は [統合] メニュー > [ウィジェット] タブのサンプルコードから確認することができます。
triggerId には input タグに付与した id を設定します。
これにより、input タグをクリックすると検索ウィジェットが開くようになります。

これで作業は完了です。
お疲れ様でした。

まとめ

Vertex AI Search の検索ウィジェットを埋め込んだ Web アプリを構築する方法について紹介しました。

ウィジェットの埋め込みになるので、細かい機能や UI をカスタムするには難しいですが、ひとまず RAG によるシンプルな検索システムを構築したい方には便利な機能だと思います。

最後まで読んでいただき、ありがとうございました。

Discussion