1. 始める前に
このセルフペースのコードラボでは、Google Cloud の Vertex AI Agent Builder を使用して AI エージェントを構築する方法について説明します。各ステップでは、Agent Builder の特定の機能とその目的について説明します。
前提条件
- Google Cloud の生成 AI の基本的な知識
- AI エージェントのコンセプトに関する基本的な知識
- Gemini CodeAssist の基本的な知識（省略可）
学習内容
- Vertex AI Agent Builder を使用してシンプルな AI エージェントを作成する方法
- データストアを接続して作成したエージェントをグラウンディングする方法
- AI エージェントをウェブサイトに統合する方法（省略可）
必要なもの
- 好奇心旺盛な人
- 動作するパソコンと安定した Wi-Fi 接続
- 課金が関連付けられている Google Cloud プロジェクト。
注: Google Cloud プロジェクトがまだない場合は、手順に沿って作成できます。Google Cloud の無料枠サービスもご覧ください。
2. 初めての AI エージェントを設計する
これで、独自の AI エージェントを作成する準備が整いました。ただし、開発に取り組む前に、エージェントの明確なビジョンを確立することが重要です。次の重要な質問について考えてみましょう。
- これによって解決される問題タスクの自動化、情報の提供、エンターテイメントの提供、クリエイティブな探求の促進のいずれを目的としていますか？
- 主な機能は何ですか？タスクを実行するのか、タスクを委任するのか。テキストを生成するのか、さまざまなメディアを組み合わせて生成するのか。
- 制限事項すべてを自律的に実行できるようになりますか？
- どのような性格やペルソナにすべきですか？フォーマル、カジュアル、ユーモラス、役立つ、情報提供のいずれにしますか？
- 成功指標は何ですか？エージェントの有効性をどのように測定しますか？
プロセスを迅速に進めるため、本日作成する旅行代理店に関する質問の回答を以下に示します。
- これによって解決される問題
- 旅行の計画は、時間と手間がかかり、大変な作業になることがあります。この旅行代理店は、ユーザーが目的地を見つけ、旅程を計画し、フライトと宿泊施設を予約するのに役立ちます。
- 主な機能は何ですか？
- エージェントは、次のことを行う必要があります。
- 目的地に関する質問（ビザの要件など）に答える
- ユーザーのスケジュールと目標に合った旅程を計画する
- フライトと宿泊施設を予約する
- 制限事項
- エージェントは、デフォルトでは複雑なクエリに回答できない場合があります
- エージェントは視覚的な画像を生成できません
- エージェントの知識は基盤となるモデルによって制限されます
- どのような性格やペルソナにすべきか？
- このエージェントは、知識が豊富で、親切で、旅行に熱心である必要があります。情報を明確かつ簡潔に伝えることができる必要があります。
- 成功指標は何ですか？
- このエージェントの成功は、ユーザーがその推奨事項（探索、計画、予約）にどれだけ満足しているかによって測定できます。
3. Vertex AI Agent Builder を使用して AI エージェントを構築する
Vertex AI Agent Builder を使用すると、AI エージェントを数ステップで作成できます。
ステップ 1:
- Vertex AI Agent Builder に移動します。
- スタートページが表示されます。
- [続行して API を有効にする] ボタンをクリックします。
ステップ 2:
- アプリの作成ページにリダイレクトされます。
- [CREATE A NEW APP] ボタンをクリックします。
ステップ 3:
- [会話エージェント] を選択し、[作成] をクリックします。
注:
- [作成] をクリックすると、Dialogflow 会話エージェントの新しいタブが開きます。
- [Google Cloud プロジェクトを選択] というメッセージが表示されたら、正しい Gmail アカウントに関連付けられている Google Cloud プロジェクトを選択してください。
- 新しいアカウントでこのラボを実施する場合は、Dialogflow API を有効にするよう求められます。[API を有効にする] をクリックして有効にします。
- ボタンをクリックしても有効にならない場合は、API ページ に直接アクセスして手動で有効にできます。
- 新しく開いた Dialogflow ページで、[Create Agent] をクリックします。
- エージェントを作成するためのオプションが表示されるので、[独自に作成] を選択します。
ステップ 4:
- 表示名を選択します（例: Travel Buddy）。
- [ロケーション] で、[リージョン] として [global（グローバル サービング、米国でのデータ保存）] を選択します。
- その他の構成はデフォルトのままにします。
- [作成] ボタンをクリックします。
ステップ 5:
- ハンドブック名を選択します（例: 情報エージェント）。
- 目標を追加する（例: 旅行に関するお客様の質問に答える）
- 指示を定義します（例: - ユーザーに挨拶し、用件を聞きます）。
- すべてが確定したら [保存] を押します。
ステップ 6:
- [Toggle Simulator] アイコン
をクリックします。 - 作成したエージェント（例: Info Agent）を選択します。
- エージェントの基盤となる生成 AI モデル（gemini-1.5-flash など）を選択します。
- エージェントと会話してテストします（[Enter User Input] テキスト ボックスに何かを入力します）。
おめでとうございます！Vertex AI Agent Builder を使用して AI エージェントを作成しました。
4. エージェントへのデータストアの接続
エージェントにワカンダへの行き方について質問してみます（例: 「ワカンダに行くにはどうすればいいですか？」）。次のような回答が返ってきます。
これは事実として正しいことですが、「情報を提供できません」とだけ言って会話を終了するのではなく、類似の場所を提案する方がユーザーにとって有益です。このアプローチにより、ユーザーがエージェントを通じて実際に旅行を予約する可能性があります。
エージェントが類似する場所を推奨できるようにするには、データストアを介してエージェントに詳細情報を提供します。エージェントが組み込みの知識に基づいてユーザーの質問に回答できない場合に参照できる、追加のナレッジベースとして機能します。
注: シミュレータを閉じる場合は、シミュレータの切り替えアイコンをもう一度クリックします。
データストアの作成は簡単です。Agent Basics ページの下部にある [+ データストア] ボタンをクリックします。
次の情報を入力します。
- ツール名: 代替の場所
- タイプ: データストア
- 説明: ユーザーのリクエストに存在しない場所が含まれている場合は、このツールを使用します。
完了したら [保存] をクリックします。
これにより、エージェントがデータストアと通信するためのデータストア ツールが作成されますが、情報を含む実際のデータストアはまだ作成する必要があります。これを行うには、[データストアを追加してデータストアを作成] をクリックします。
[新しいデータストアを作成] をクリックすると、次のように Vertex AI エージェント ビルダーのページにリダイレクトされます。
Cloud Storage オプションを選択する
この手順が完了したら、
- [FILE] をクリックします（これは非常に重要です。そうしないとインポートが失敗します）。
- type ai-workshops/agents/data/wakanda.txt
- [続行] をクリックします。
参考までに、提供されたテキスト ファイルの内容を以下に示します。
Places that are similar to Wakanda
- Oribi Gorge in South Africa: The rock formations here are reminiscent of the Warrior Falls in Wakanda.
- Iguazu Falls: Located on the border of Argentina and Brazil, these massive waterfalls were a major inspiration for the Warrior Falls.
- Immerse yourself in Wakandan culture: Read the Black Panther comics, watch the movies, and explore online resources to learn more about Wakandan culture, language, and technology.
- Visit a Disney theme park: While there isn't a dedicated Wakanda land yet, you might be able to meet Black Panther at Disneyland or on a Marvel Day at Sea Disney cruise.
次のページで、データストアに名前（例: Wakanda Alternative）を付けて、[作成] をクリックします。
最後に、作成したデータソースを 選択 し、[作成] をクリックします。データストアのインポートの進行状況は、データストアをクリックすると確認できます。
注: インポート アクティビティが正常に完了するまでに時間がかかります。このアクティビティが進行中の間、Vertex AI エージェントで使用できるデータストア オプションの詳細については、こちらをご覧ください。
すべてがスムーズに完了したら、[Dialogflow] タブに戻り、[更新] をクリックします。[使用可能なデータストア] ページに作成されたデータストアが表示されます。
エージェントのハルシネーションを防ぐため、データストアのグラウンディング構成で設定を [非常に低い] に設定します。これにより、エージェントがでたらめなことを言うのを防ぐための制限が厳しくなります。今のところはデフォルトのままにしておきますが、いつでもさまざまな設定で試すことができます。
追加したデータストアを選択し、[確認]、[保存] の順にクリックします。
[エージェントの基本] ページに戻ります。ハンドブック構成の下部に、新しく作成したデータストア（代替の場所など）が使用可能になっていることが表示されます。データストア（代替の場所など）をオンにして、ページ上部の [保存] ボタンをクリックします。
あと少しで完了です。最後の手順は、エージェントの手順に [Alternative Location] ツールを含めることです。エージェントの手順に「- ユーザーのリクエストに存在しない場所が含まれている場合は、${TOOL: Alternative Location} を使用します」という行を追加し、[保存] をクリックします。
準備が整いましたので、トグル シミュレータを再度開き、同じ質問（ワカンダに連絡する最善の方法は？）をしてみましょう。
おめでとうございます！エージェントは、テキスト ファイルから提供された情報を使用して場所を推奨するようになりました。
これで、独自のエージェント ビルダー AI エージェントの構築は完了です。エージェントをカスタマイズしてエクスペリエンスを向上させる方法について詳しく知りたい場合は、以下の追加アクティビティをご覧ください。
5. その他のアクティビティ - AI エージェントをライブにする
これまでの手順で、AI エージェントを開発し、関連する参照データでグラウンディングしました。次のセクションでは、このエージェントをウェブサイトに埋め込み、訪問者とのリアルタイムのやり取りを可能にする方法という重要な問題について説明します。
エージェントを公開する方法は多数あります。エクスポートするか、直接公開できます。ドキュメントで、利用可能なオプションをご確認ください。
Dialogflow タブの右上にあるオーバーフロー メニューをクリックし、[エージェントを公開] をクリックします。
すべての構成を [デフォルト] のままにして、[認証されていない API を有効にする] をクリックします。
注: 未認証 API の有効化はデモ目的のみであり、この構成を本番環境のワークロードに使用することはおすすめしません。安全な公開にご興味がある場合は、こちらのドキュメントをご覧ください。
クリックすると、次のような小さな CSS コード スニペットが表示されます。
コード スニペットをコピーするだけです。このコード スニペットは、後でウェブサイトに統合します。
ウェブサイトを作成するには、Cloud エディタ環境を使用します。Cloud エディタを開く手順は次のとおりです。
- 別のタブで Google Cloud コンソールを開きます。
- 右上にある [Cloud Shell をアクティブにする] ボタンをクリックします。
- [エディタを開く] ボタンをクリックします。
Cloud Shell の承認を求めるプロンプトが表示されたら、[承認] をクリックして続行します。
次のセクションでは、Gemini Code Assist を使用して、エージェント スニペットと統合するサンプル Python Flask ウェブ アプリケーションを作成します。
Cloud Shell エディタが開いたら、[Gemini Code Assist] をクリックして Google Cloud プロジェクトにログインします。API を有効にするよう求められたら、[有効にする] をクリックします。
完了したら、Gemini Code Assist に Flask アプリを作成し、AI エージェントのコード スニペットを統合するようリクエストします。
使用できるサンプル プロンプトは次のとおりです。
Here is my Travel buddy Vertex AI agent builder agent publish code snippet,
<REPLACE IT WITH YOUR AI AGENT PUBLISH CODE SNIPPET>
can you create a sample flask app to use it
注: ここでは Python Flask アプリをリクエストしましたが、他のプログラミング言語やフレームワークを使用することもできます。Gemini Code Assist には、さまざまなプログラミング言語を生成する機能があります。詳細については、サポートされている言語、IDE、インターフェースをご覧ください。
提供されたコード スニペットが AI エージェントとすでに統合されていることがわかります。提供されたコードが有効で、意図したとおりに機能しているかどうかをテストするには、出力レスポンスのこのコード セクションを実行する方法について Gemini Code Assist が提供する手順に沿って操作します。
出力レスポンス コード スニペットの例 -
from flask import Flask, render_template_string
app = Flask(__name__)
# HTML template string with the provided Dialogflow Messenger code
html_template = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Buddy Chatbot</title>
<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>
<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;
}
body {
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Travel Buddy!</h1>
<p>Start chatting with our AI Travel buddy, in the bottom right corner.</p>
<df-messenger
project-id="<SAMPLE>"
agent-id="<SAMPLE>"
language-code="en"
max-query-length="-1">
<df-messenger-chat-bubble
chat-title="Travel Buddy">
</df-messenger-chat-bubble>
</df-messenger>
</body>
</html>
"""
@app.route("/")
def index():
"""Renders the HTML template with the Dialogflow Messenger."""
return render_template_string(html_template)
if __name__ == "__main__":
app.run(debug=True)
指示に従う
- 提供されたサンプル Flask アプリのコード スニペットをコピーします。
- app.py という名前の新しいファイルを作成して保存します。
次のステップでは、このスニペットを実行するために flask をインストールするように求められますが、Cloud Shell には一般的に使用されるユーティリティがすべてデフォルトでインストールされているため、現時点では必要ありません。
ファイルを保存（Ctrl+S または Cmd+S）し、[ターミナルを開く] をクリックして、提供されたコードを実行します。
ターミナルで、次のコマンドを実行します。
python app.py
注: app.py ファイルが存在する正しいフォルダにいることを確認してください。
Python Flask アプリはポート 5000 で実行されます。このウェブ アプリケーションのプレビューを表示するには、Cloud Shell の [ウェブでプレビュー] アイコンをクリックします。[ポートの変更] をクリックし、「5000」と入力して [変更してプレビュー] をクリックして保存します。
サンプル ウェブサイトが表示され、AI エージェントがすでに利用可能になっています。AI エージェントをクリックして、チャットを開始するだけです。
さまざまなプロンプトでテストしてみてください。Gemini Code Assist にウェブサイトの美化を依頼したり、AI エージェントにグラウンディング データを追加して、よりリソースフルにすることもできます。
準備ができたら、次のステップとして、この AI エージェントを Google Cloud でホストして、誰でもどこからでもアクセスできるようにします。この Codelab の残りの部分では、このサンプル Flask アプリケーションをコンテナとして Cloud Run にデプロイします。
注: これは Cloud Run に限定されません（Cloud Run がわからない場合でも、この質問をすることができます）。Gemini Code Assist に、ベスト プラクティスに沿って Google Cloud または任意の場所にデプロイするよう依頼することもできます。この部分についても支援を受けることができます。
Cloud Shell ターミナルに戻り、Ctrl+C キーを押してプロセスを強制終了します。[エディタを開く] をもう一度クリックし、Gemini Code Assist にアプリケーションのコンテナ化と Cloud Run へのデプロイを依頼します。
Can you help me deploy this sample flask app to cloud run service
Cloud Run サービスでアプリをホストするための手順とコマンドが提供されています。手順に沿って操作しましょう。
出力レスポンスの例を次に示します。
Cloud Run にデプロイする手順
- 前提条件:
- Google Cloud アカウント: 課金が有効になっている Google Cloud アカウントが必要です。
- gcloud CLI: ローカルマシンに Google Cloud SDK（gcloud CLI）をインストールして初期化します。これを使用して、ターミナルから Google Cloud を操作します。
- Docker: ローカルマシンに Docker をインストールします。Cloud Run は Docker を使用してアプリケーションをコンテナ化します。
- プロジェクトの設定: gcloud CLI で Google Cloud プロジェクトが選択されていることを確認します。
gcloud config list projectで確認し、gcloud config set project YOUR_PROJECT_IDで設定できます。
注: このアクティビティ全体を Cloud Shell で実行するため、プロジェクトを設定する必要はありません。
- 作成 **
requirements.txt****:**
- このファイルには、アプリに必要なすべての Python パッケージがリストされています。プロジェクト ディレクトリ（
main.pyがある場所）にrequirements.txtという名前のファイルを作成し、次の行を追加します。
- 作成 **
Dockerfile****:**
Dockerfileは、アプリケーションの Docker イメージをビルドする方法を定義します。プロジェクト ディレクトリにDockerfileという名前のファイル（拡張子なし）を作成し、次の内容を追加します。
# Use an official Python runtime as a parent imageFROM python:3.9-slim-buster
# Set the working directory to /appWORKDIR /app
# Copy the current directory contents into the container at /app
COPY . /app
# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Make port 5000 available to the world outside this container
EXPOSE 5000
# Define environment variable
ENV NAME World
# Run app.py when the container launches
CMD ["python", ".py"]
- Docker イメージをビルドする:
- ターミナルを開き、プロジェクト ディレクトリに移動して、次のコマンドを実行します。
gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy
- Cloud Run にデプロイします。
- イメージをビルドしてアップロードしたら、次のコマンドを使用して Cloud Run にデプロイします。
gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1
これらの手順を完了すると、AI エージェントが統合されたアプリケーションがエンドユーザー向けに公開されます。
おめでとうございます。学習をお楽しみください。
6. クリーンアップ
この Codelab で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。