1. 始める前に
このペースで進められる Codelab では、Google Cloud の Vertex AI Agent Builder を使用して AI エージェントを構築する方法について説明します。各ステップでは、Agent Builder の特定の機能に焦点を当て、その目的を説明します。
前提条件
- Google Cloud の 生成 AI に関する基礎知識
- AI エージェントのコンセプトに関する基礎知識
- Gemini Code Assist に関する基礎知識（省略可）
学習内容
- 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:
- アプリの作成ページにリダイレクトされます。
- [新しいアプリを作成] ボタンをクリックします。
ステップ 3:
- [**会話エージェント**] を選択し、[**作成**] をクリックします。
注:
- [作成] をクリックすると、[Diaglogflow 会話エージェント] の新しいタブが開きます。
- [**Google Cloud プロジェクトを選択**] するよう求められたら、正しい Gmail アカウント に関連付けられている Google Cloud プロジェクトを選択してください。
- 新しいアカウントでこのラボを実施する場合は、Dialogflow API を有効にするよう求められます。[API を有効にする] をクリックして有効にします。
- ボタンをクリックしても機能しない場合は、 API ページ に直接移動して手動で有効にできます。
- 新しく開いた Diaglogflow ページで、[エージェントを作成] をクリックします。
- エージェントを作成するためのオプション が表示されるので、[独自に作成] を選択します。
ステップ 4:
- 表示名 を選択します（例: Travel Buddy）。
- [ロケーション] で、[global（Global serving, data-at-rest in US）] をリージョン として選択します。
- 他の構成はデフォルト のままにします。
- [作成] ボタンをクリックします。
ステップ 5:
- Playbook 名 を選択します（例: Info Agent）。
- 目標 を追加します（例: 旅行関連のクエリに回答する）。
- 手順 を定義します（例: ユーザーに挨拶し、用件を聞きます）。
- すべてが完了したら、[保存] を押します。
ステップ 6:
- [Toggle Simulator] アイコン
をクリックします。 - 作成したエージェント（例: Info Agent）を選択します。
- エージェントの基盤となる生成 AI モデルを選択します（例: gemini-1.5-flash）。
- エージェントと会話してエージェントをテストします（[ユーザー入力] テキスト ボックスに何か入力します）。
おめでとうございます。Vertex AI Agent Builder を使用して AI エージェントを作成できました。
4. エージェントにデータストアを接続する
エージェントにワカンダへの行き方について質問してみます（例: 「ワカンダに行くにはどうすればよいですか？」）。次のような回答が返されます。
これは事実として正しいですが、「情報を提供できません」とだけ言って会話を終了するのではなく、エージェントが類似の場所を提案する方がユーザーにとって役立ちます。このアプローチにより、ユーザーがエージェントを通じて実際に旅行を予約する可能性があります。
エージェントが類似の場所を推奨できるようにするには、データストアを通じてエージェントに詳細情報を提供します。これは、エージェントが組み込みの知識に基づいてユーザーの質問に回答できない場合に参照する追加のナレッジベースとして機能します。
注: シミュレータを閉じる場合は、シミュレータ切り替えアイコンをもう一度クリック します。
データストアの作成は簡単です。[エージェントの基本] ページの最下部にある [+ データストア] ボタンをクリックします。
次の情報を入力します。
- ツール名: Alternative Location
- タイプ: データストア
- 説明: ユーザーのリクエストに存在しない場所が含まれている場合は、このツールを使用します
完了したら [保存] をクリックします。
これにより、エージェントがデータストアと通信するためのデータストア ツールが作成されますが、情報を含む実際のデータストアを作成する必要があります。これを行うには、[データストアを追加してデータストアを作成] をクリックします。
[新しいデータストアを作成] をクリックすると、次のように Vertex AI Agent Builder ページにリダイレクトされます。
Cloud Storage オプションを選択します。
このステップが完了したら、
- [ファイル] をクリックします（非常に重要 です。そうしないとインポートが失敗します）。
- 「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）が使用可能になっていることがわかります。データストア（例: Alternative Location）をオンにして、ページ上部の [保存] ボタンをクリックします。
もう少しで万全です。最後のステップは、エージェントの手順に [Alternative Location] ツールを含めることです。エージェントの手順に「- Use ${TOOL: Alternative Location} if the user's request contains a location that does not exist」という行を追加して、[保存]をクリックします。
準備が整いましたので、シミュレータ切り替えをもう一度開き、同じ質問をします（例: ワカンダに行くにはどうすればよいですか？）。
おめでとうございます。エージェントは、テキスト ファイルから提供された情報を使用して場所を推奨するようになりました。
これで、独自のエージェント ビルダー AI エージェントの構築が完了しました。エージェントをカスタマイズしてエクスペリエンスを向上させる方法について詳しくは、以下の追加アクティビティをご覧ください。
5. 追加アクティビティ - AI エージェントを公開する
前のステップでは、AI エージェントを開発し、関連する参照データでグラウンディングしました。次のセクションでは、このエージェントをウェブサイトに埋め込み、訪問者とのリアルタイム インタラクションを可能にする方法という重要な問題に対処します。
エージェントを公開する方法はたくさんあります。エクスポートすることも、直接公開することもできます。可能なオプションについては、ドキュメントをご覧ください。
Dialogflow タブの右上にあるオーバーフロー メニュー をクリックし、[エージェントを公開] をクリックします。
すべての構成をデフォルトのままにして、[認証されていない API を有効にする]をクリックします。
注: 認証されていない API を有効にするのはデモのみを目的としており、本番環境のワークロードでの使用はおすすめしません。安全に公開する方法については、こちらのドキュメントをご覧ください。
クリックすると、小さな CSS コード スニペットが表示されます。
コード スニペットをコピー します。このコード スニペットは後でウェブサイトに統合します。
ウェブサイトを作成するには、Cloud Editor 環境を使用します。Cloud Editor を開く手順は次のとおりです。
- 別のタブで Google Cloud コンソールを開きます。
- 右上にある [Cloud Shell をアクティブにする] ボタンをクリックします。
- [エディタを開く] ボタンをクリックします。
Cloud Shell の承認を求めるプロンプトが表示されたら、[承認] をクリックして続行します。
次のセクションでは、Gemini Code Assist を使用して、エージェント スニペットと統合するサンプル Python Flask ウェブ アプリケーションを作成します。
Cloud Shell Editor が開いたら、[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 アカウントに課金されないようにするには、次の手順を行います。