Agent Platform を使用して LangChain エージェントを Flutter アプリに統合する

Create an Agent Search data store

進行状況を確認

/ 20

Create an Agent Search app

進行状況を確認

/ 20

Create a Backend app

進行状況を確認

/ 20

Deploy the LangChain agent

進行状況を確認

/ 20

Develop and test the Flutter chat app

進行状況を確認

/ 20

このラボでは、学習をサポートする AI ツールが組み込まれている場合があります。

概要

このラボでは、LangChain AI エージェントを Flutter アプリに統合します。Flutter はクライアントアプリフレームワークとして使用され、Gemini Enterprise Agent Platform のエージェント検索はベクトルデータベースとして使用されます。また、Gemini Enterprise Agent Platform の Agent Runtime は、LangChain エージェントを構築およびデプロイするために使用されます。エージェントは、高度な機能を備えた大規模言語モデル（LLM）ファミリーである Gemini を使用して、テキストと画像のプロンプトに対する AI 回答を生成します。

このラボには、Flutter アプリを実行するために必要な Flutter と Dart の拡張機能に加え、code-server を介して IDE として VSCode が事前にプロビジョニングされています。さらに、このラボには fwr も含まれています。これは、ブラウザを使用してアクセスするウェブアプリケーションとして Flutter アプリを提供するために使用するツールです。

このラボは、クラウドアプリケーションの開発にはあまり詳しくない、アプリケーションの構築に携わるあらゆるレベルの開発者を対象としています。Python を利用した経験があり、Flutter フレームワークに慣れているほうが内容を理解しやすいでしょう。このラボのタスクを実行する際に Flutter の知識は必要ありません。ただし、Flutter アプリのコードの一部を確認する、アプリの機能をテストするといった作業は行います。

目標

このラボでは、次のタスクを行います。

Google Cloud コンソールで AI Applications を使用して検索データストアと検索アプリを作成する。
Gemini Enterprise Agent Platform Workbench を使用して LangChain エージェントをデプロイする。
エージェント検索および LangChain エージェントと連携する Python アプリを使用する。
アプリを Cloud Run にデプロイし、Flutter アプリのバックエンドとして使用する。
フロントエンドのチャットアプリケーションとして使用する Flutter アプリを作成する。

このラボで使用する各種コンポーネントの概要は次のとおりです。

設定

各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。

シークレットウィンドウを使用して Google Skills にログインします。
ラボのアクセス時間（例: 1:15:00）に注意し、時間内に完了できるようにしてください。
一時停止機能はありません。必要な場合はやり直せますが、最初からになります。
準備ができたら、[ラボを開始] をクリックします。
ラボの認証情報（ユーザー名とパスワード）をメモしておきます。この情報は、Google Cloud Console にログインする際に使用します。
[Google Console を開く] をクリックします。
[別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。
他の認証情報を使用すると、エラーが発生したり、料金の請求が発生したりします。
利用規約に同意し、再設定用のリソースページをスキップします。

タスク 1. 検索データストアと検索アプリを作成する

このタスクでは、Google Cloud コンソールで AI Applications を使用して検索データストアと検索アプリを作成することにより、Flutter アプリに検索機能を実装します。

検索データストアを作成する

Cloud コンソールで、[すべてのプロダクトを表示] をクリックします。[すべてのプロダクト] ページで [AI] セクションまでスクロールし、[AI Applications] をクリックします。
[続行して API を有効化] をクリックします。
左側のペインで [データストア] をクリックし、[データストア] ページで [データストアを作成] をクリックします。

このページでは、検索結果に使用するデータソースを構成します。このラボには、Google Merchandise Store のアイテムに関するデータを含む .csv ファイルが格納された Cloud Storage バケットが事前にプロビジョニングされています。
データソースとして Cloud Storage を選択するには、[Cloud Storage] で [選択] をクリックします。
インポートするデータの種類として、[構造化データのインポート] で [CSV（よくある質問データ用）] を選択します。
[インポートするフォルダまたはファイルを選択します] セクションまでスクロールし、[ファイル] をクリックします。
CSV ファイルの Cloud Storage URL を指定するには、[参照] をクリックします。
Cloud Storage バケットのをクリックして、内容を表示します。
goog_merch.csv ファイルを選択し、[選択] をクリックします。

フォルダの gs:// URI が取り込まれます。
[続行] をクリックします。
データストア名に「goog-merch-ds」と入力し、[続行] をクリックします。
選択した料金モデルはデフォルトのままにして [作成] をクリックします。

データストアが作成され、CSV ファイルからのデータの取り込みが開始されます。
[データストア] ページで、新しく作成したデータストアの名前をクリックします。
[更新] をクリックします。

[ドキュメント] タブに、インポートしたドキュメントのリストが表示されます。
ドキュメントに関連付けられたデータを表示するには、[ドキュメントを閲覧] をクリックします。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。エージェント検索データストアを作成する。

検索アプリを作成する

検索データストアを使用するには、AI Applications で検索アプリに接続します。

Cloud コンソールで [AI Applications] をクリックし、[アプリ] をクリックします。
[新しいアプリを作成] をクリックします。
[アプリを作成する] ページで、[検索とアシスタント] タブの [カスタム検索（一般）] の [作成] をクリックします。

[アプリの構成の検索] ページで、以下の設定を使用してウェブサイト検索アプリを構成します。残りの設定は、デフォルトのままにします。

プロパティ	値（入力または選択）
Enterprise エディションの機能	無効にする
アプリ名	gms-search-app
会社名または組織名	gms-company
アプリのロケーション	global（グローバル）

[続行] をクリックします。
既存のデータストアのリストが表示されます。前のサブタスクで作成した goog_merch_ds データストアを選択し、[続行] をクリックします。
選択した料金プランはデフォルトのままにして [作成] をクリックします。

検索アプリが作成され、データストアがアプリに接続されます。
検索アプリをテストするには、AI Applications のナビゲーションメニューで [プレビュー] をクリックします。
[検索] フィールドに「dino」と入力し、Enter キーを押します。

データストアにインポートされたドキュメントから、関連する検索結果のリストが表示されます。

注: [検索プレビューの準備がまだできていません] というエラーが表示された場合、数分待ってから再試行してください。待たずにラボの次のタスクに進むこともできます。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。エージェント検索アプリを作成する。

タスク 2. バックエンドをビルドしてデプロイする

Flutter アプリのバックエンドは、Google Cloud で Cloud Run サービスとして実行されます。バックエンドサービスは、商品ショップのデータから検索レスポンスを生成するために、前のタスクで作成した検索アプリと統合されます。

後のタスクでは、バックエンドアプリを LangChain エージェントとも統合し、Gemini にアクセスすることで、Flutter アプリからのクエリに応答して生成 AI コンテンツを取得します。

このタスクでは、バックエンド Python アプリをビルドして Cloud Run にデプロイします。

バックエンドアプリをビルドして確認する

このラボ用に VSCode ベースの IDE が事前プロビジョニングされています。IDE にアクセスするには、ラボの認証情報パネルから IDE サービス URL をコピーして、新しいシークレットモードブラウザウィンドウまたはタブに貼り付けます。

注: IDE サービスの URL は、このラボ用に事前プロビジョニングされた Cloud Run サービスのエンドポイントであり、code-server VM へのリクエストをプロキシします。この IDE は code-server を使用して構築されており、Flutter、Dart、Vim の拡張機能が含まれています。
IDE でターミナルを開きます。IDE のナビゲーションメニュー（）で、[ターミナル] > [新しいターミナル] をクリックします。
注: 以下の手順のコマンドは、IDE のターミナルウィンドウで実行します。
バックエンドアプリの初期バージョンと関連ファイルは、ラボ用に事前プロビジョニングされています。バックエンドアプリの初期バージョンのフォルダとその内容を Cloud Storage のアーカイブからコピーします。
gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip 注: プロンプトが表示されたら、[許可] をクリックしてクリップボードからテキストと画像を貼り付け、Enter キーを押します。
フォルダの内容を一覧表示するには、IDE のターミナルウィンドウで次のコマンドを実行します。
ls ~/ag-web/app
ag-web/app フォルダには、アプリケーションのソースコードと、バックエンドアプリをビルドして Cloud Run にデプロイするために必要な他のファイルが含まれています。
アプリの PROJECT_ID と LOCATION の構成を設定します。
sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py
先ほど作成した検索データストアを使用するようバックエンドアプリを構成します。
sed -i 's/SEARCH_DATASTORE_ID/{YOUR_SEARCH_DATASTORE_ID}/' ~/ag-web/app/app.py
次のコマンドで、文字列 {YOUR_SEARCH_DATASTORE_ID} を検索データストア ID の値に置き換えます。sed コマンドの中括弧は必ず削除してください。
注: 検索データストア ID の値を取得するには、Cloud コンソールで [AI Applications] > [データストア] に移動し、先ほど作成した検索データストアの名前をクリックします。データストア ID の値をコピーします。これは検索エンジン ID と同じです。
IDE でコードを表示するには、IDE のナビゲーションメニューでをクリックし、[フォルダを開く] をクリックします。
リストから IDE-DEV/ag-web/ フォルダを選択し、[OK] をクリックします。
コードの作成者を信頼する場合、[はい、この作成者を信用します] をクリックします。
[エクスプローラ] ペインで、app フォルダを開き、app.py をクリックして、ファイルをエディタで開きます。

バックエンドアプリのコードにより実行される処理は、次のとおりです。
- discoveryengine.googleapis.com API 用の SearchServiceClient を初期化します。
- search_gms() 関数は、API の datastores エンドポイントを使用して検索リクエストを開始します。先ほど作成したデータストア ID が URL で使用されます。
- この関数は、ユーザーが指定した検索クエリを使用してデータストアのコンテンツを検索し、結果を JSON の回答としてフォーマットします。
- アプリは、個々の関数への呼び出しをルーティングするために flask を使用します。/ エンドポイントは、アプリが正常に読み込まれたことを確認するために使用されるデフォルトのページです。一方、/ask_gms エンドポイントは、エージェント検索を使用する search_gms() 関数を呼び出します。

アプリをビルドして Cloud Run にデプロイする

デプロイスクリプトを使用すると、バックエンドアプリをビルドして Cloud Run にデプロイできます。

IDE でターミナルウィンドウを開き、バックエンドアプリのフォルダに移動します。
cd ~/ag-web/app
gcloud CLI から Google Cloud に対して認証を行います。
gcloud auth login
続行するには、「Y」と入力します
ログインフローを立ち上げるには、Ctrl キー（Windows および Linux の場合）または Command キー（macOS の場合）を押して、ターミナルのリンクをクリックします。
外部ウェブサイトを開くかどうかを確認するメッセージが表示されたら、[開く] をクリックします。
ラボ受講者用のメールアドレスをクリックします。
続行するかどうかを確認するメッセージが表示されたら、[続行] をクリックします。
Google Cloud SDK に Google アカウントへのアクセスを許可し、利用規約に同意するには、[Allow] をクリックします。

確認コードがブラウザタブに表示されます。
[コピー] をクリックします。
IDE のターミナルウィンドウに戻り、[認証コードを入力してください] と表示されている場所にコードを貼り付けて、Enter キーを押します。

これで Google Cloud にログインできました。
deploy.sh スクリプトを実行可能にし、スクリプトを実行して、指定した Cloud Run リージョンにアプリをデプロイします。
chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}
アプリのビルドと Cloud Run へのデプロイが正常に完了すると、スクリプト出力の末尾にアプリのエンドポイント URL が表示されます。この URL は、スクリプトで実行された gcloud run deploy コマンドによって生成されたものです。
注: このコマンドの実行には時間がかかります。完了するまで待ってから次のタスクに進んでください。

バックエンドアプリをテストする

アプリの機能は、そのアプリの Cloud Run エンドポイントにアクセスしてテストします。

前の手順で生成されたアプリのエンドポイント URL をコピーし、新しいブラウザタブでその URL に移動します。
アプリが読み込まれると、ホームページに [Welcome to the ag-web backend app] と表示されます。
ブラウザの URL バーで、次のパスを URL の末尾に追加します。
/ask_gms?query=dino
アプリで先ほど作成した検索データストアからの結果が返されることを確認します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。バックエンドアプリを作成する。

タスク 3. LangChain エージェントを作成する

AI エージェントは、目標を達成するために、大規模言語モデル（LLM）の機能を利用して推論を行い、外部ツールとのオーケストレーションを行うアプリケーションです。Gemini Enterprise Agent Platform は、AI エージェントを信頼できるデータソースに接続して構築するのに役立つ、Google のプロダクトとツールのスイートです。

Gemini Enterprise Agent Platform の Agent Runtime は、Agent Platform で推論エージェントを構築およびデプロイするのに役立ちます。LangChain は、チャットボットや RAG システムの構築に使用される人気の OSS ツールです。

Agent Platform では、デベロッパーが関数呼び出しを使用して、LLM（Gemini）からの出力を Python 関数にマッピングできます。Agent Platform SDK を使用して、フレームワーク固有の LangChain テンプレートを使用してエージェントを開発およびデプロイできます。

このタスクでは、Agent Platform Workbench と Jupyter ノートブックを使用し、Python 関数を備えた LangChain エージェントを構築してデプロイします。このエージェントは、このラボの次のタスクにおいて生成 AI バックエンドアプリケーションで使用します。

Agent Platform Workbench インスタンスを作成する

Agent Platform Workbench は、データサイエンスと ML のワークフロー全体に対応する Jupyter ノートブックベースの開発環境です。Agent Platform や他の Google Cloud サービスを Workbench インスタンスの Jupyter ノートブック内から操作できます。たとえば、BigQuery と Cloud Storage のインテグレーションを使用して、Jupyter ノートブック内からデータにアクセスして探索できます。

Agent Platform Workbench ノートブックは、Google Cloud で ML モデルを開発およびデプロイするための柔軟でスケーラブルなソリューションです。

Workbench インスタンスを作成するには、Google Cloud コンソールでナビゲーションメニュー（）をクリックし、[Agent Platform] > [Notebooks] を選択します。
Notebooks のナビゲーションメニューで [Workbench] をクリックします。
[インスタンス] タブで [インスタンス] が選択されていることを確認し、[新規作成] をクリックします。
[新しいインスタンス] ページで、[名前] に「my-instance」と入力します。
残りの設定はデフォルトのままにして、[作成] をクリックします。

新しいインスタンスがインスタンスセクションでスピンアップされます。インスタンスが作成されるまで待ってから次の手順に進みます。
注: インスタンスが使用可能な状態になると、インスタンスの横に緑色のチェックマークが表示されます。
インスタンスの準備ができたら、[Jupyterlab を開く] をクリックします。
Python 3 Jupyter ノートブックを起動するには、[Python 3] ノートブックをクリックします。

ノートブックファイルをコピーする

このラボには、LangChain エージェントをビルドおよびデプロイするノートブックが事前プロビジョニングされています。

ノートブックを JupyterLab インスタンスにコピーするには、新しいノートブックの最初のセルに次のコードをコピーします。
!gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .
セルを選択し、セルメニューの [実行] をクリックして実行します。

このコマンドは、Cloud Storage から JupyterLab インスタンスにノートブックをコピーします。コマンドが完了すると、ノートブックファイルが最上位のルートフォルダに表示されます。
ノートブックを開くには、フォルダリストでノートブックファイルをダブルクリックします。ノートブックのコンテンツが新しいタブで開きます。

Reasoning Engine エージェントをビルドしてデプロイする

ノートブックのすべてのコードセルを最初から順番に実行します。セルを実行するには、セル内の任意の場所をクリックして選択し、セルメニューまたはノートブックの上部メニューで [実行] をクリックします。
注: セルでコマンドを実行したときは、コマンドが完了するまで待ってから次のセルに進んでください。コマンドの実行が完了すると、セル番号フィールドのアスタリスク（*）がセル番号に置き換えられます。注: セルを実行する前に、以下のメモでセル固有の指示や手順を確認してください。そのような指示には、CELL INSTR 接頭辞が付いています。
a. [CELL INSTR] 現在のランタイムを再起動する

プロンプトが表示されたら、[カーネルを再起動します] ダイアログで [OK] をクリックします。

b. [CELL INSTR] Google Cloud プロジェクト情報を設定し、Agent Platform を初期化する:

このセルを実行して Agent Platform を初期化する前に、ラボの project_id、ロケーション、ステージングバケットの構成値を更新します。
PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"
サンプル構成設定で更新されたセル:

c. [CELL INSTR] エージェントを定義する:

このセルを実行する前に、GEMINI_MODEL_ID の値を、このノートブックで使用されている最新のモデル ID であるに置き換えます。
注: ノートブックのメニューバーで [実行] をクリックしてセルを実行することもできます。
セル「エージェントを Agent Runtime にデプロイする」を実行したら、コマンドが完了して LangChain エージェントがデプロイされるまで待ちます。次に、エージェント ID をコピーします。

この ID は、次のタスクでバックエンドアプリを構成して再デプロイする際に使用します。
注: このセルが完了するまで最大 10 分かかることがあります。エージェントがデプロイされたことを示す最終出力が表示されるまで待ってから、次の手順に進んでください。
LangChain エージェントが正常に動作することをテストするには、次の 2 つのセルを実行し、出力を確認します。

LangChain エージェントは、クエリ入力に基づいて、Wikipedia またはエージェント検索データストアのいずれかを正常に呼び出します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 LangChain エージェントをデプロイする。

タスク 4. バックエンドアプリを拡張する

バックエンドアプリを拡張し、前のタスクでデプロイした LangChain エージェントを呼び出すようにしましょう。

バックエンドアプリの最初のバージョンでは、エージェント検索から直接結果を取得するだけでした。新しいバージョンでは、入力プロンプトに基づいて、Gemini の出力とエージェントのツールを使用し、エージェント検索または Wikipedia から回答を生成するエージェントも呼び出すようになります。

このタスクでは、バックエンドアプリのコードを更新し、リクエストクエリで LangChain エージェントを呼び出してエージェントの回答を返すエントリポイントを追加します。

バックエンドアプリを更新する

IDE のターミナルウィンドウで、次のコマンドを実行して、app.py ファイルに新しいエントリポイントコードを追加します。
cat << EOF >> ~/ag-web/app/app.py # # Agent Engine # import vertexai from vertexai import agent_engines from google.cloud import resourcemanager_v3 def get_project_number(project_id): client = resourcemanager_v3.ProjectsClient() # プロジェクトのリソース名を構築する name = f"projects/{project_id}" # プロジェクトのメタデータを取得する project = client.get_project(name=name) # レスポンスの 'name' フィールドは 'projects/123456789' の形式 project_number = project.name.split('/')[-1] return project_number PROJECT_NUM = get_project_number(PROJECT_ID) LANGCHAIN_AGENT = "LANGCHAIN_AGENT_ID" remote_agent = vertexai.agent_engines.get(f"projects/{PROJECT_NUM}/locations/{LOCATION}/reasoningEngines/{LANGCHAIN_AGENT}") # エージェントを呼び出す Flask アプリのエンドポイント @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF
先ほど作成した LangChain エージェントを使用するようバックエンドアプリを構成します。

次のコマンドの文字列 {YOUR_LANGCHAIN_AGENT_ID} を、前のタスクでノートブックセルからコピーしたエージェント ID の値に置き換え、IDE のターミナルウィンドウで次のコマンドを実行します。

sed コマンドの中括弧は必ず削除してください。
sed -i 's/LANGCHAIN_AGENT_ID/{YOUR_LANGCHAIN_AGENT_ID}/' ~/ag-web/app/app.py
IDE でコードを表示するには、IDE のナビゲーションメニューでをクリックし、IDE-DEV/ag-web/app/app.py ファイルを選択します。

拡張バージョンのバックエンドアプリで、次の処理が行われます。
- 前のタスクで作成したエージェントの LANGCHAIN_AGENT_ID を使用して、Agent Runtime から remote_agent のハンドルが取得されます。
- `ask_gemini() 関数を定義する新しい /ask_gemini エンドポイントが定義されます。
- この関数は、ユーザー提供の query パラメータをリクエストから LangChain エージェント（remote_agent）に渡し、エージェントからの回答を返します。

バックエンドアプリをビルドして Cloud Run に再デプロイする

バックエンドアプリのフォルダに移動します。
cd ~/ag-web/app
スクリプトを実行し、指定した Cloud Run リージョンにアプリを再デプロイします。
./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

バックエンドアプリをテストする

アプリの機能は、そのアプリの Cloud Run エンドポイントにアクセスしてテストします。

前の手順で生成されたアプリのエンドポイント URL をコピーし、新しいブラウザタブでその URL に移動します。
アプリが読み込まれると、ホームページに [Welcome to the ag-web backend app] と表示されます。
ブラウザの URL バーで、次のパスを URL の末尾に追加します。
/ask_gemini?query=where can I buy the chrome dino pin
アプリは、先ほど作成したエージェント検索データストアからエージェントが取得した結果を返します。
Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/. （Chrome Dino エナメルピンは、Google Merch Store で販売されている商品です。価格は 7.00 米ドルです。商品は、ウェブサイト https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/ で購入できます。）
ブラウザの URL バーで、パスを以下に置き換えます。
/ask_gemini?query=what is fallingwater. Write the answer in plaintext.（落水荘とは何ですか。回答をプレーンテキストで記述してください。）
アプリは、エージェントがノートブックで構成した Wikipedia API から取得した結果で応答します。
Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. （落水荘は、建築家フランクロイドライトが 1935 年に設計しました。ペンシルバニア州南西部、ピッツバーグから南東に約 110 km の場所にあります。この建物は、その一部が滝の上に建てられていることで有名です。）注: 実際の回答は、上記とは異なる場合があります。

タスク 5. Flutter フロントエンドアプリを作成する

Flutter は、オープンソースのマルチプラットフォームアプリ開発フレームワークです。Android、iOS、web、macOS、Windows、Linux で動作する 1 つのコードベースを作成できます。Flutter アプリは、Dart プログラミング言語で開発されています。

このラボでは、Flutter アプリをウェブアプリケーションとしてデプロイし、ブラウザを使用してアクセスできるようにするため、ターゲットプラットフォームとして web を使用します。

このタスクでは、Flutter を使用してシンプルなチャットアプリケーションを作成し、コードを更新して、アプリをウェブアプリケーションとしてビルドおよび実行します。

Flutter アプリを作成する

IDE ターミナルで、ホームディレクトリに移動して次のコマンドを実行します。
cd ~; flutter create chat_app
flutter create コマンドにより、実行可能な新しい Flutter プロジェクトに必要なすべてのファイル、フォルダ、構成が作成されます。
IDE でデフォルトのチャットアプリのコードを表示するには、IDE-DEV/chat_app フォルダに移動します。
IDE のフォルダナビゲーションペインの内容を最新にするには、必要に応じて [更新] をクリックします。
フォルダ内のファイルの作成者を信頼するかどうかを確認するメッセージが表示された場合は、[はい、この作成者を信用します] をクリックします。

Flutter アプリのコードを確認する

chat_app フォルダの内容の概要は次のとおりです。

フォルダ / ファイル	説明
chat_app	Flutter アプリを構成するサブフォルダとファイルが格納されたプロジェクトのルートフォルダ。
android/ios/linux/macos/web/windows	サポートされている各プラットフォームで Flutter アプリを実行するために必要なプラットフォーム固有のファイルが保存されています。
lib	機能とユーザーインターフェースを含む、アプリケーションの中核となる Dart ファイルが保存されています。
test	アプリのウィジェットをテストするために使用される Dart テストが保存されています。
pubspec.yaml	アプリの依存関係、Flutter のバージョン、他の構成設定が保存されています。
analysis_options.yaml	アプリの静的解析の構成設定が保存されています。

Flutter アプリのエントリポイントファイル main.dart を見てみましょう。

[エクスプローラ] メニューで、IDE-DEV/chat_app/lib/main.dart ファイルをクリックして開きます。

これは Flutter アプリのアプリケーションエントリポイントです。このファイル内のコードは、初期化タスクの実行後、マテリアルコンポーネントを使用してアプリの UI をビルドし、アプリのタイトル、テーマ、その他の構成を設定します。
注: Material アプリにまず表示されるのは MaterialApp ウィジェットです。このウィジェットは、アプリ内のさまざまな画面へのルーティングを管理する Navigator など、多くの便利なウィジェットをアプリのルートにビルドします。
Flutter では、アプリのビルドに使用される宣言型クラスであるウィジェットというコンセプトが使用されます。Flutter では、ウィジェットを構成してより複雑なウィジェットをビルドし、ウィジェットツリーを形成することでレイアウトを作成します。Flutter での UI のビルドについて詳しくは、こちらのドキュメントをご覧ください。

このファイルには、アプリのウィジェットをビルドするクラスが保存されています。これには次のものが含まれます。
- チャットアプリのルートウィジェットである MyApp クラス。
- _MyHomePageState クラスを使用してアプリのメインページを作成する MyHomePage クラス。
- アプリの UI を構築し、UI の状態を更新する _MyHomePageState クラス。
チャットアプリを構築する次のサブタスクで、これらのクラスのデフォルトの生成コードを置き換えます。

Flutter アプリのコードを更新する

まず、アプリのタイトルを変更します。MyApp クラスの 14 行目で、title プロパティの値を変更します。
title: 'Gemini Chat App',
_MyHomePageState クラスの 58 行目で、int _counter = 0; の行と _incrementCounter() 関数を削除し、次のプロパティを追加します。
final TextEditingController _controller = TextEditingController(); final List<Map<String, String>> _messages = []; String _cloudRunHost = '';
これらのプロパティは、テキストプロンプトに対するユーザー入力を受け入れ、表示用にユーザー入力とバックエンドアプリのレスポンスを保存し、バックエンドアプリの Cloud Run サービスのホスト名を保存するために使用されます。
initState() メソッドをクラスに追加します。
@override void initState() { super.initState(); _loadConfig(); }
このメソッドは、State オブジェクトが作成されたときに初期化関数を実行します。チャットアプリ内で、次に実装する _loadConfig() メソッドを呼び出して、ファイルの内容を読み込みます。
_loadConfig() メソッドをクラスに追加します。
Future<void> _loadConfig() async { final configString = await rootBundle.loadString('assets/config.json'); final config = json.decode(configString); setState(() { _cloudRunHost = config['cloudRunHost']; }); }
このメソッドは、チャットアプリの構成ファイルの内容を取得します。これは、Cloud Run バックエンドアプリのホスト名の値を JSON オブジェクトに保存します。このファイルはラボの後半で作成します。このメソッドは、先ほど作成した内部 _cloudRunHost プロパティに値を保存し、ウィジェットの UI を構築します。
_sendMessage() メソッドをクラスに追加します。
Future<void> _sendMessage() async { if (_controller.text.isEmpty) { return; } final message = _controller.text; _controller.clear(); setState(() { _messages.add({'sender': 'user', 'text': message}); }); if (_cloudRunHost.isEmpty || _cloudRunHost == 'YOUR_CLOUD_RUN_ENDPOINT_URL') { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Please configure the Cloud Run endpoint in assets/config.json' }); }); return; } try { var endpoint_query = Uri.https(_cloudRunHost, '/ask_gemini', {'query': message}); final response = await http.get(endpoint_query); if (response.statusCode == 200) { var responseText = utf8.decode(response.bodyBytes); responseText = responseText.replaceAll(RegExp(r'\*'), ''); setState(() { _messages.add({'sender': 'bot', 'text': responseText}); }); } else { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Error: ${response.statusCode}' }); }); } } catch (e) { setState(() { _messages.add({'sender': 'bot', 'text': 'Error: $e'}); }); } }
このメソッドは、ユーザーが入力したプロンプトテキストを取得し、チャットパネルに表示されるメッセージのリストに追加します。また、入力プロンプトとともに、Cloud Run バックエンドサービスのエンドポイント URL に HTTP GET リクエストを送信し、サービスからのレスポンスを表示します。

このコードは、Cloud Run バックエンドホストエンドポイントへの URL を作成し、プロンプトテキストをクエリパラメータに含めます。次に、HTTP GET リクエストがエンドポイントに送信されます。ステータスコード 200 のレスポンスを受信すると、レスポンスがデコードされ、チャット画面に表示されるメッセージリストに追加されます。レスポンスが成功しなかった場合や例外が発生した場合は、ステータスコードまたは例外メッセージがメッセージリストに追加されて表示されます。
チャットアプリの UI を作成するには、_MyHomePageState クラスの既存の build メソッドを以下のコードに置き換えます。
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gemini Chat App'), ), body: Column( children: [ Expanded( child: ListView.builder( padding: const EdgeInsets.all(8.0), itemCount: _messages.length, itemBuilder: (context, index) { final message = _messages[index]; final isUserMessage = message['sender'] == 'user'; return Align( alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft, child: Container( margin: const EdgeInsets.symmetric(vertical: 4.0), padding: const EdgeInsets.all(12.0), decoration: BoxDecoration( color: isUserMessage ? Colors.blue[100] : Colors.grey[200], borderRadius: BorderRadius.circular(8.0), ), child: Text(message['text']!), ), ); }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: 'Enter a message', ), onSubmitted: (text) => _sendMessage(), ), ), IconButton( icon: const Icon(Icons.send), onPressed: _sendMessage, ), ], ), ), ], ), ); }
build メソッドは、チャットアプリの UI を定義します。構成と現在の状態に基づいてウィジェットツリーを作成し、Flutter フレームワークがそれを画面にレンダリングします。このチャットアプリの UI では、コードによってチャットメッセージが 1 列に表示され、ユーザープロンプト用のテキストフィールドと送信ボタンも表示されます。ユーザーが入力したメッセージ（プロンプト）は青いボックスで表示され、アプリ（bot）からの回答やエラーメッセージはグレーのボックスで表示されます。

ユーザーがチャットアプリで [送信] をクリックするか、プロンプトを入力した後にテキストフィールドで Enter キーを押すと、_sendMessage() コールバックメソッドが呼び出されます。

インポートの追加

追加されたコードは、Dart および Flutter SDK の特定のライブラリやパッケージに依存します。

これらのパッケージをインポートするには、既存の import ステートメントの下の main.dart ファイルの先頭に、次の import ステートメントを追加します。
import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
- http.dart パッケージには、HTTP リソースを簡単に使用するための高度な関数とクラスのセットが含まれています。
- dart:convert ライブラリには、一般的なデータ変換を処理する関数（JSON シリアル化や UTF-8 エンコード / デコードなど）があります。
- rootBundle プロパティは、グローバルな静的オブジェクトです。Flutter アプリにパッケージ化されたメインのアセットバンドルへのアクセスを提供します。
アプリへの変更を保存するには、IDE のナビゲーションメニューで [File] > [Save] をクリックします。

依存関係の更新

pubspec.yaml ファイルは、Flutter アプリのプロジェクトメタデータ、パッケージの依存関係、アセットを指定します。

IDE のエクスプローラペインで pubspec.yaml ファイルを選択して編集します。ファイルは chat_app フォルダにあります。
dependencies セクションで、cupertino_icons フォントライブラリの下に http パッケージの依存関係を追加します。
http: ^1.6.0 スペースのインデントが正しく保持されていることを確認します。
pubspec.yaml ファイルの flutter セクションまでスクロールし、63 行目をコメント化解除します。assets の下に assets フォルダを追加し、スペースのインデントを保持します。
assets: - assets/

これにより、アプリの config.json ファイルを保存するアセットフォルダが構成されます。
pubspec.yaml ファイルへの変更を保存するには、IDE のナビゲーションメニューで [File] > [Save] をクリックします。

Flutter アプリを Cloud Run バックエンドと統合する

Flutter アプリは、このラボで先ほどデプロイした Reasoning Engine エージェントと統合されます。統合は、ビルドして Cloud Run にデプロイしたバックエンドアプリのエンドポイントに Flutter アプリを接続することにより実現します。

_sendMessage() メソッドには、_cloudRunHost プロパティが空かどうか、または assets/config.json というファイルで構成されていないかどうかを確認するコードがあります。このサブタスクでは、このファイルを Flutter アプリに追加します。

まず、バックエンドアプリの Cloud Run エンドポイントのホスト名を取得し、その値を環境変数に格納します。

IDE のターミナルウィンドウで、次のコマンドを実行します。
BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST
Flutter チャットアプリのホームディレクトリに /assets ディレクトリを作成します。
mkdir ~/chat_app/assets
/assets ディレクトリに config.json ファイルを作成します。
cat <<EOF > ~/chat_app/assets/config.json { "cloudRunHost": "$BACKEND_APP_HOST" } EOF
変更を確認するには、IDE の [エクスプローラ] メニューでコンテンツを更新し、IDE-DEV/chat_app/assets/config.json ファイルをクリックして開きます。cloudRunHost 構成エントリの値が、Cloud Run バックエンドアプリのホスト名の値で更新されていることを確認します。
注: この値は、前の手順で設定した `BACKEND_APP_HOST` 環境変数の値と一致している必要があります。

Flutter アプリをデプロイする

Flutter アプリの構成が完了したので、アプリをビルドしてデプロイできます。このラボでは、アプリをウェブアプリケーションとして実行するため、Flutter ウェブ用の開発サーバーである Fwr を使用します。

Flutter アプリのフォルダ内にいることを確認します。IDE のターミナルウィンドウで、次のコマンドを実行します。
cd ~/chat_app
アプリプロジェクトの依存関係を取得するには、次のコマンドを実行します。
flutter pub get
プロジェクトを構築してウェブサーバーを起動するには、次のコマンドを実行します。
fwr
サーバーが起動して Flutter アプリにサービスを提供するまで待ちます。起動すると、コマンドの出力は次のようになります。

タスク 6. Flutter アプリをテストする

Flutter アプリの機能をテストしましょう。

アプリをテストする

Flutter アプリにアクセスするには、ラボの認証情報パネルからライブサーバーの URL をコピーし、シークレットモードのブラウザウィンドウの新しいタブで開きます。

アプリが読み込まれるまで数秒待ちます。
下部のメッセージに次のように入力します。
What is fallingwater? Write the answer in plaintext.（落水荘とは何ですか？回答をプレーンテキストで記述してください。）
数秒後、バックエンドエージェントからの回答がアプリに表示されます。
アプリとエージェントをテストするには、メッセージに次のようにします。
Where can I buy the Chrome dino pin?（Chrome の恐竜ピンはどこで購入できますか？）
数秒後、バックエンドエージェントからの回答がアプリに表示されます。

チャットアプリは、バックエンドアプリの /ask_gemini Cloud Run エンドポイントを呼び出します。バックエンドアプリは、Gemini を使用する LangChain エージェントを呼び出し、エージェント検索データストアから回答を返します。
Flutter アプリがモバイルレイアウトに収まることを確認するため、ブラウザウィンドウのサイズをモバイルデバイスと同程度のサイズに変更します。

これは、Flutter アプリが画面サイズやウィンドウサイズに応じて表示を変化できることを示しています。Flutter のウィジェットとパッケージは、デバイス設定に基づいてアプリをレスポンシブにし、適応させるのに役立ちます。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Flutter チャットアプリを開発してテストする。

ラボを終了する

ラボが完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Google Skills から削除され、アカウントの情報も消去されます。

ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックしてください。

星の数は、それぞれ次の評価を表します。

星 1 つ = 非常に不満
星 2 つ = 不満
星 3 つ = どちらともいえない
星 4 つ = 満足
星 5 つ = 非常に満足

フィードバックを送信しない場合は、ダイアログボックスを閉じてください。

フィードバックやご提案の送信、修正が必要な箇所をご報告いただく際は、[サポート] タブをご利用ください。

お疲れさまでした

このラボでは、次の作業を行いました。

Google Cloud コンソールで AI Applications を使用して検索データストアと検索アプリを作成する。
Agent Platform Workbench を使用して LangChain エージェントをデプロイする。
エージェント検索および LangChain エージェントと連携する Python アプリを構築する。
アプリを Cloud Run にデプロイし、Flutter アプリのバックエンドとして使用する。
Flutter チャットアプリを開発し、バックエンドサービスと統合して Gemini とやり取りできるようする。

チェックポイント

概要

目標

設定