Looker Explore Assistant構築パート3: フロントエンドのセットアップとExplore Assistantの使用編

2024/09/12

與田龍人

Looker Explore Assistant構築パート3: フロントエンドのセットアップとExplore Assistantの使用編

前回の記事では、Terraformを使ってBigQueryとVertex AIのGemini Proモデルを連携させる方法を学びました。具体的には、以下の手順を行いました。今回は、フロントエンドのセットアップに進み、実際にExplore Assistantをどのように使うかを解説します。

Explore AssistantGeminiLLMBILooker

はじめに

前回のバックエンド編では、Terraformを使ってBigQueryとVertex AIのGemini Proモデルを連携させる方法を学びました。具体的には、以下の手順を行いました：

前回の記事リンク:Looker Explore Assistant構築パート2: バックエンドのセットアップ編

・必要なアカウント権限を設定。

・Terraformでインフラをデプロイ。

・サービスアカウントのキーを作成し、BigQueryにLLMモデルを構築。

・サンプルデータをアップロードしてExplore Assistantの動作を確認。

今回は、フロントエンドのセットアップに進み、実際にExplore Assistantをどのように使うかを解説します。

フロントエンドのセットアップ

Explore Assistantを完全に動作させるために、フロントエンド側の設定が必要です。このセクションでは、LookerとBigQueryの接続を行い、自然言語に基づいてLooker Explore URLを生成する手順を説明します。

アカウントへの許可の付与

前提条件としてフロントエンドを設定する際、Looker 管理者の権限が必要になります。これにより、Lookerの設定や拡張機能のデプロイが可能になります。

ステップ1: Lookerでの接続設定

BigQuery接続の作成

Lookerのナビゲーションバーから「管理」>「接続」に進みます。

新しい接続を追加し、接続名を指定します（例：「since_llm」）。

接続の設定において、前回バックエンド編で作成したjsonキーをアップロードします。

接続が完了すると、LookerでBigQueryのデータにアクセスできるようになります。

ステップ2: フロントエンド環境のセットアップ

Cloud Shellで拡張機能フォルダへ移動

cd looker-explore-assistant/explore-assistant-extension

.envファイルの作成

拡張機能の変数を定義するため、新しい.envファイルを作成します。

LOOKER_MODEL=thelook_japanese_bq

LOOKER_EXPLORE=order_items

VERTEX_BIGQUERY_LOOKER_CONNECTION_NAME=connect_llm

VERTEX_BIGQUERY_MODEL_ID= project_id.explore_assistant.explore_assistant_llm

BIGQUERY_EXAMPLE_PROMPTS_CONNECTION_NAME=connect_llm

BIGQUERY_EXAMPLE_PROMPTS_DATASET_NAME=explore_assistant

npmのセットアップとビルド

必要なパッケージをインストールし、拡張機能をビルドします。

npm install

npm run build

bundle.jsファイルの確認

distフォルダに生成されたbundle.jsファイルをLookerのプロジェクトフォルダにアップロードします。

ステップ3: manifest.lkmlの作成とデプロイ

manifest.lkmlの作成

manifest.lkmlをLookerプロジェクトに作成し、以下の内容を追加します。

application: explore_assistant {

label: "Explore Assistant"

file: "bundle.js"

entitlements: {

core_api_methods: ["lookml_model_explore","create_sql_query","run_sql_query","run_query","create_query"]

navigation: yes

use_embeds: yes

use_iframes: yes

new_window: yes

}

}

LookMLの検証とデプロイ