1. 始める前に
この Codelab では、Genkit を使用して生成 AI をアプリに統合する方法を学びます。Genkit は、プロダクション レディな AI 搭載アプリを構築、デプロイ、モニタリングするオープンソース フレームワークです。
Genkit は、アプリ開発者向けに設計されています。これにより、使い慣れたパターンとパラダイムを使用して、強力な AI 機能をアプリに簡単に統合できます。Firebase チームが、世界中の何百万ものデベロッパーが使用するツールを構築してきた経験を活かして開発しました。
前提条件
- Firestore、Node.js、TypeScript の知識がある。
学習内容
- Firestore の高度なベクトル類似性検索機能を使用して、よりスマートなアプリを構築する方法。
- Genkit を使用してアプリに生成 AI を実装する方法について説明します。
- デプロイと統合の準備をします。
必要なもの
- 任意のブラウザ（Google Chrome など）
- コードエディタとターミナルを備えた開発環境
- Firebase プロジェクトの作成と管理に使用する Google アカウント
2. 使用されているウェブアプリとクラウド サービスを確認する
このセクションでは、この Codelab で作成するウェブアプリを確認し、使用するクラウド サービスについて学びます。
ウェブアプリ
この Codelab では、休暇計画アプリ「Compass」のコードベースを使用します。ユーザーは目的地を選択し、その目的地の活動内容を確認して、旅行の旅程を作成できます。
この Codelab では、アプリのホームページでのユーザー エンゲージメントを向上させることを目的とした 2 つの新機能を実装します。どちらの機能も生成 AI を活用しています。
- 現在のアプリでは、目的地の静的なリストが表示されます。これを動的に変更します。
- 自動入力された旅程を実装して、ユーザーの定着率を高めることを目指します。
使用するサービス
この Codelab では、多くの Firebase サービスと Cloud サービス、機能を使用します。これらのほとんどのスターター コードは用意されています。次の表に、使用するサービスとその理由を示します。
サービス | 使用の理由 |
Genkit を使用して、生成 AI を Node.js / Next.js アプリケーションに導入します。 | |
Cloud Firestore にデータを保存し、ベクトル類似性検索に使用します。 | |
Vertex AI の基盤モデル（Gemini など）を使用して AI 機能を強化します。 | |
必要に応じて、新しい効率化された Firebase App Hosting を使用して、動的な Next.js ウェブアプリ（GitHub リポジトリに接続）を提供できます。 |
3. 開発環境を設定する
Node.js バージョンを確認する
- ターミナルで、Node.js バージョン 20.0.0 以降がインストールされていることを確認します。
node -v - Node.js バージョン 20.0.0 以降がない場合は、最新の LTS バージョンをダウンロードしてインストールします。
Codelab のソースコードを取得する
GitHub アカウントをお持ちの場合:
- github.com/FirebaseExtended/codelab-ai-genkit-rag のテンプレートを使用して新しいリポジトリを作成します。
- 作成したばかりの Codelab の GitHub リポジトリのローカルクローンを作成します。
git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
git がインストールされていない場合や、新しいリポジトリを作成したくない場合:
GitHub リポジトリを zip ファイルとしてダウンロードします。
フォルダ構造を確認する
ローカルマシンで、クローンされたリポジトリを見つけて、フォルダ構造を確認します。
フォルダ | 説明 |
| Firestore コレクションをすばやく事前入力するためのヘルパー コマンドライン ツール |
*その他すべて | Next.js ウェブアプリのコード |
ルートフォルダには、簡略化された手順でウェブアプリを実行するためのクイック スタートを提供する README.md ファイルが含まれています。ただし、初めて学習する場合は、この Codelab（クイックスタートではなく）を完了する必要があります。この Codelab には、最も包括的な手順が記載されているためです。
この Codelab の手順に沿ってコードを正しく適用できたかどうか不明な場合は、end git ブランチでソリューション コードを確認できます。
Firebase CLI をインストールする
- Firebase CLI がインストールされており、バージョンが 13.6 以降であることを確認します。
firebase --version - Firebase CLI がインストールされているが、バージョンが 13.6 以降でない場合は、更新します。
npm update -g firebase-tools - Firebase CLI がインストールされていない場合は、インストールします。
npm install -g firebase-tools
権限エラーのため Firebase CLI を更新またはインストールできない場合は、npm のドキュメントを参照するか、別のインストール オプションを使用してください。
Firebase にログインする
- ターミナルで Firebase にログインします。
firebase login - ターミナルで、Firebase にデータを収集させるかどうかによって、
YまたはNを入力します。（この Codelab ではどちらのオプションでも動作します） - ブラウザで Google アカウントを選択し、[許可] をクリックします。
Google Cloud の gcloud CLI をインストールする
- gcloud CLI をインストールします。
- ターミナルで Google Cloud にログインします。
gcloud auth login
4. Firebase プロジェクトを設定する
このセクションでは、Firebase プロジェクトを設定し、Firebase ウェブアプリを登録します。また、この Codelab の後半でサンプル ウェブアプリで使用するサービスをいくつか有効にします。
このセクションの手順はすべて、Firebase コンソールで行います。
Firebase プロジェクトを作成する
- 前の手順で使用したのと同じ Google アカウントを使用して、Firebase コンソールにログインします。
- ボタンをクリックして新しいプロジェクトを作成し、プロジェクト名（例:
Compass Codelab）を入力します。
- [続行] をクリックします。
- Firebase の利用規約が表示されたら、内容を読み、同意して [続行] をクリックします。
- （省略可）Firebase コンソールで AI アシスタンス（「Gemini in Firebase」）を有効にします。
- この Codelab では Google アナリティクスは必要ないため、Google アナリティクスのオプションをオフに切り替えます。
- [プロジェクトを作成] をクリックし、プロジェクトのプロビジョニングが完了するまで待ってから、[続行] をクリックします。
Firebase プロジェクトにウェブアプリを追加する
- Firebase プロジェクトの [プロジェクトの概要] 画面に移動し、
[ウェブ] をクリックします。![Firebase コンソールの [プロジェクトの概要] の上部にある [ウェブ] ボタン](https://firebase.google.com/static/codelabs/ai-genkit-rag/img/compass-codelab-add-webapp.png?hl=ja)
- [アプリのニックネーム] テキスト ボックスに、覚えやすいアプリのニックネーム（
My Compass Codelab Appなど）を入力します。Firebase Hosting を設定するためのチェックボックスはオフのままにします。この Codelab の最後の手順で、ホスティング サービスを任意で設定するためです。
- [アプリの登録] > [コンソールに進む] をクリックします。
これで終了です。これで、新しい Firebase プロジェクトにウェブアプリが登録されました。
Firebase の料金プランをアップグレードする
Genkit と Vertex AI（およびその基盤となるクラウド サービス）を使用するには、Firebase プロジェクトが従量課金制（Blaze）のお支払いプランに登録されている必要があります。つまり、Cloud 請求先アカウントにリンクされている必要があります。
- Cloud 請求先アカウントには、クレジット カードなどの支払い方法が必要です。
- Firebase と Google Cloud を初めて使用する場合は、$300 のクレジットと無料トライアル用 Cloud 請求先アカウントを利用できるかどうかご確認ください。
- この Codelab をイベントの一環として行う場合は、利用可能な Cloud クレジットがあるかどうかを主催者に確認してください。
Vertex AI の料金の詳細を確認する。
プロジェクトを Blaze プランにアップグレードする手順は次のとおりです。
- Firebase コンソールで、プランをアップグレードします。
- Blaze プランを選択します。画面の指示に沿って、Cloud 請求先アカウントをプロジェクトにリンクします。
このアップグレードの一環として Cloud 請求先アカウントを作成する必要があった場合は、Firebase コンソールのアップグレード フローに戻ってアップグレードを完了する必要がある場合があります。
Cloud Firestore を設定する
- Firebase コンソールの左側のパネルで [ビルド] を展開し、[Firestore データベース] を選択します。
- [データベースを作成] をクリックします。
- [データベース ID] は
(default)に設定したままにします。 - データベースの場所を選択し、[次へ] をクリックします。
実際のアプリでは、ユーザーに近い場所を選択します。 - [テストモードで開始] をクリックします。セキュリティ ルールに関する免責条項を確認します。
データベースのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。 - [作成] をクリックします。
Vertex AI を有効にする
gcloud CLI を使用して Vertex AI を設定します。このページのすべてのコマンドで、YOUR_PROJECT_ID を Firebase プロジェクトの ID に置き換えてください。
- ターミナルで、Google Cloud SDK のデフォルト プロジェクトを設定します。
gcloud config set project YOUR_PROJECT_ID - 「警告: アクティブなプロジェクトがローカル アプリケーションのデフォルト認証情報ファイルの割り当てプロジェクトと一致しません。予期しない割り当ての問題が発生する可能性があります。」というメッセージが表示されたら、次のコマンドを実行して割り当てプロジェクトを設定します。
gcloud auth application-default set-quota-project YOUR_PROJECT_ID - プロジェクトで Vertex AI サービスを有効にします。
gcloud services enable aiplatform.googleapis.com
5. ウェブアプリを設定する
ウェブアプリを実行するには、ターミナルでコマンドを実行し、コード エディタ内でコードを追加する必要があります。このページのすべてのコマンドで、YOUR_PROJECT_ID を Firebase プロジェクトの ID に置き換えてください。
プロジェクトをターゲットにするように Firebase CLI を構成する
- ターミナルで、Codelab プロジェクトのルート ディレクトリに移動します。
- Firebase CLI で Firebase プロジェクトに対してすべてのコマンドを実行するには、次のコマンドを実行します。
firebase use YOUR_PROJECT_ID
サンプルデータを Firestore にインポートする
この Codelab では、すぐに開始できるように、Firestore 用の事前生成されたサンプルデータを提供します。
- ローカル コードベースで通常はサービス アカウントを使用するコードを実行できるようにするには、ターミナルで次のコマンドを実行します。
gcloud auth application-default login - Firestore のサンプルデータをインポートするには、次のコマンドを実行します。
cd load-firestore-data npm ci node index.js YOUR_PROJECT_ID cd .. - Firebase コンソールの Firebase プロジェクトの [Firestore] セクションに移動して、データがデータベースに正常に追加されたことを確認します。インポートされたデータスキーマとその内容が表示されます。
ウェブアプリを Firebase プロジェクトに接続する
データベースなどのサービスを利用するには、ウェブアプリのコードベースを正しい Firebase プロジェクトに関連付ける必要があります。そのためには、Firebase 構成をアプリのコードベースに追加する必要があります。この構成には、プロジェクト ID、アプリの API キー、アプリ ID などの重要な値や、アプリが Firebase とやり取りできるようにするその他の値が含まれます。
- アプリの Firebase 構成を取得します。
- Firebase コンソールで、Firebase プロジェクトに移動します。
- 左側のパネルで、[プロジェクトの概要] の横にある歯車アイコンをクリックし、[プロジェクトの設定] を選択します。
- [アプリ] カードでウェブアプリを選択します。
- [SDK の設定と構成] セクションで、[Config] オプションを選択します。
- スニペットをコピーします。
const firebaseConfig ...で始まります。
- ウェブアプリのコードベースに Firebase 構成を追加します。
- コードエディタで
src/lib/genkit/genkit.config.tsファイルを開きます。 - 関連するセクションを、コピーしたコードに置き換えます。
- ファイルを保存します。
- コードエディタで
ブラウザでウェブアプリをプレビューする
- ターミナルで、依存関係をインストールしてからウェブアプリを実行します。
npm install npm run dev:next - ブラウザで、ローカルでホストされている Hosting URL に移動して、ウェブアプリを表示します。たとえば、ほとんどの場合、URL は http://localhost:3000/ のようになります。
Compass は React サーバー コンポーネントを使用する Next.js アプリで、これがホームページです。
[夢の旅行を探す] をクリックします。一部の固定宛先に対してハードコードされたデータが表示されていることがわかります。
ぜひお試しください。続行する準備ができたら、
ホームボタン（右上）をクリックします。
6. Genkit で生成 AI を詳しく見る
これで、アプリケーションで生成 AI の機能を活用できるようになりました。この Codelab のセクションでは、ユーザーが提供したインスピレーションに基づいて目的地を提案する機能を実装する手順について説明します。Genkit と Google Cloud の Vertex AI を生成モデルのプロバイダとして使用します（Gemini を使用します）。
Genkit は、トレースとフローの状態を保存できます（これにより、Genkit フローの実行結果を検査できます）。この Codelab では、Firestore を使用してこれらのトレースを保存します。
この Codelab の最後のステップとして、Genkit アプリを Firebase App Hosting にデプロイします。
Genkit アプリを Firebase プロジェクトに接続する
前の手順で src/lib/genkit/genkit.config.ts を編集して、Genkit をプロジェクトに接続しました。
Genkit デベロッパー UI を起動する
Genkit には、LLM、Genkit フロー、リトリーバー、その他の AI コンポーネントを操作できるウェブベースの UI が用意されています。
ターミナルで次のコマンドを実行します。
npm run dev:genkit
ブラウザで、ローカルにホストされている Genkit URL に移動します。ほとんどの場合、http://localhost:4000/ です。
Gemini とのやり取り
Genkit のデベロッパー UI を使用して、サポートされているモデルや、プロンプト、リトリーバー、Genkit フローなどの他の AI コンポーネントを操作できるようになりました。
たとえば、Gemini にホリデー バケーションの提案をリクエストしてみましょう。システム指示を使用して、特定のニーズに基づいてモデルの動作を制御する方法について説明します。これは、システム指示をネイティブでサポートしていないモデルにも適用できます。
プロンプトを管理する
Genkit には、生成 AI プロンプトの作成と管理を効率化するために設計されたプラグインとテキスト形式である Dotprompt が導入されています。Dotprompt の基本的な考え方は、プロンプトをコードとして扱い、アプリケーション コードとともにプロンプトの作成、保守、バージョン管理を行うことです。
Dotprompt を使用するには、まず hello-world から始めます。
- コードエディタで
prompts/1-hello-world.promptファイルを開きます。 - Genkit デベロッパー UI で
prompts/1-hello-worldを開きます。 - 使い慣れた言語の名前またはコードを使用するか、空の文字列のままにします。
- [実行] をクリックします。
- いくつかの異なる値を試してください。大規模言語モデルは、このような単純なクエリで、省略されたプロンプト、スペルミスのあるプロンプト、不完全なプロンプトを理解するのに優れています。
構造化データで出力を拡充する
Genkit では、プレーン テキストの生成だけでなく、アプリの UI 内でのプレゼンテーションと統合を強化するために出力を構造化することもできます。スキーマを定義することで、目的の形式に沿った構造化データを生成するように LLM に指示できます。
出力スキーマの探索
LLM 呼び出しの出力スキーマを指定することもできます。
- コードエディタで、プロンプト ファイルを確認します。
prompts/2-simple-itinerary.promptファイルを開きます。- 定義された入力スキーマと出力スキーマを確認します。
- UI を操作する:
- Genkit デベロッパー UI で、[
prompts/2-simple-itinerary] セクションに移動します。 placeフィールドとinterestsフィールドにサンプルデータを入力して、入力を指定します。{ "interests": [ "Museums" ], "place": "Paris" }- [実行] をクリックします。
- Genkit デベロッパー UI で、[
スキーマ駆動型出力について
生成された出力が定義されたスキーマに準拠していることに注目してください。目的の構造を指定することで、LLM に、簡単に解析してアプリケーションに統合できるデータを生成するように指示しました。Genkit は、スキーマに対して出力を自動的に検証し、データの整合性を確保します。
また、Genkit を構成して、出力がスキーマと一致しない場合に再試行したり、出力を修復したりすることもできます。
出力スキーマの主なメリット
- 統合の簡素化: 構造化データをアプリの UI 要素に簡単に組み込むことができます。
- データ検証: 生成された出力の正確性と一貫性を確保します。
- エラー処理: スキーマの不一致に対処するメカニズムを実装します。
出力スキーマを活用すると、Genkit のエクスペリエンスが向上し、よりリッチで動的なユーザー エクスペリエンスを実現するカスタマイズされた構造化データを作成できます。
マルチモーダル入力を活用する
ユーザーがインスピレーションを得た画像に基づいて、パーソナライズされた旅行先を提案するアプリを想像してみてください。Genkit とマルチモーダル生成モデルを組み合わせることで、このビジョンを実現できます。
- コードエディタで、プロンプト ファイルを確認します。
prompts/imgDescription.promptファイルを開きます。{{media url=this}}は、プロンプトに画像を組み込むための Handlebars 構文要素です。
- UI を操作する:
- Genkit デベロッパー UI で、
prompts/imgDescriptionプロンプトを開きます。 - 画像の URL をコピーして
imageUrlsフィールドに貼り付け、画像の URL を入力します。たとえば、Wikipedia のエッフェル塔のサムネイル画像を使用できます。{ "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ] } - [実行] をクリックします。
- Genkit デベロッパー UI で、
7. ベクトル類似性検索で検索を実装する
AI モデルによるクリエイティブなコンテンツの生成は印象的ですが、実用的なアプリケーションでは、特定のコンテキストで出力をグラウンディングすることが必要になることがよくあります。
この Codelab では、目的地（場所とアクティビティ）のデータベースがあり、Gemini モデルが生成する提案がこのデータベース内のエントリのみを参照するようにします。
非構造化クエリと関連コンテンツのギャップを埋めるには、生成されたエンベディングでベクトル類似度検索を活用します。
エンベディングとベクトル類似度について
- ベクトル: ベクトルはデータポイントの数値表現であり、テキストや画像などの複雑な情報をモデル化するために使用されます。ベクトルの各ディメンションは、データの特定の特徴に対応しています。
- エンベディング モデル: これらの特殊な AI モデルは、テキストなどの入力データを高次元ベクトルに変換します。興味深いのは、類似した入力がこの高次元空間内で互いに近いベクトルにマッピングされることです。
- ベクトル類似性検索: この手法では、エンベディング ベクトルの近接性を利用して、関連するデータポイントを特定します。入力クエリが指定されると、類似したエンベディング ベクトルを持つデータベース内のエントリを検索し、意味的な関連性を示します。
取得プロセスの仕組みを理解する
- クエリのエンベディング: ユーザーの入力（「パリでのロマンチックなディナー」など）がエンベディング モデルに渡され、クエリベクトルが生成されます。
- データベース エンベディング: 理想的には、目的地のデータベースを事前に処理し、各エントリのエンベディング ベクトルを作成します。
- 類似度の計算: 類似度指標（コサイン類似度など）を使用して、クエリベクトルとデータベース内の各エンベディング ベクトルを比較します。
- 検索: クエリベクトルとの近さに基づいて、データベースから最も類似したエントリが関連性の高い候補として取得されます。
この取得メカニズムをアプリケーションに組み込むことで、Gemini モデルを活用して、クリエイティブであるだけでなく、特定のデータセットにしっかりと基づいた提案を生成できます。このアプローチにより、生成された出力はコンテキストに関連性があり、データベースで利用可能な情報と一致します。
Firestore でベクトル類似性検索を有効にする
この Codelab の前のステップでは、Firestore データベースにサンプル スポットとアクティビティを入力しました。各場所エントリには、注目すべき属性を説明する knownFor テキスト フィールドと、この説明のベクトル表現を含む対応する embedding フィールドが含まれています。
これらのエンベディングでベクトル類似性検索の能力を活用するには、Firestore インデックスを作成する必要があります。このインデックスを使用すると、指定されたクエリに対するエンベディング ベクトルの類似性に基づいて、場所を効率的に取得できます。
- インデックスを作成します。
YOUR_PROJECT_IDはプロジェクトの ID に置き換えてください。gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}' - Genkit デベロッパー UI で、
retrievers/placesRetrieverを開きます。 - [実行] をクリックします。プレースホルダー テキストを含むスキャフォールディングされたオブジェクトを確認します。これは、リトリーバー ロジックを実装する場所を示しています。
- コードエディタで
src/lib/genkit/placesRetriever.tsファイルを開きます。 - 下にスクロールし、プレースホルダ
placesRetrieverを次の内容に置き換えます。export const placesRetriever = defineFirestoreRetriever(ai, { name: 'placesRetriever', firestore, collection: 'places', contentField: 'knownFor', vectorField: 'embedding', embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}), distanceMeasure: 'COSINE', });
リトリーバーをテストする
- Genkit デベロッパー UI で、
retrievers/placesRetrieverリトリーバーを開きます。 - 次のクエリを指定します。
{ "content": [ { "text": "UNESCO" } ] } - オプションを指定することもできます。たとえば、リトリーバーが返すドキュメントの数を指定する方法は次のとおりです。
{ "limit": 4 } - [実行] をクリックします。
類似性以外のデータに対して追加のフィルタリングを行うには、オプションに where 句を追加します。
8. Genkit を使用した検索拡張生成（RAG）
前のセクションでは、テキスト、JSON、画像を処理し、ユーザー向けに旅行先などの魅力的なコンテンツを生成できる個々のプロンプトを作成しました。また、Firestore データベースから関連する目的地を取得するプロンプトも実装しました。次に、これらのコンポーネントをまとまりのある検索拡張生成（RAG）フローにオーケストレートします。
このセクションでは、フローと呼ばれる Genkit の重要なコンセプトについて説明します。フローは、厳密に型付けされたストリーミング可能な関数で、ローカルとリモートの両方で呼び出すことができ、完全なオブザーバビリティを備えています。フローの管理と呼び出しは、Genkit の CLI と Genkit デベロッパー UI の両方から行うことができます。
- コードエディタで、旅程のプロンプトを確認します。
prompts/itineraryGen.promptファイルを開きます。- プロンプトが拡張され、リトリーバーから取得したアクティビティ データなどの追加の入力を受け入れるようになっていることに注目してください。
- Genkit デベロッパー UI で、
src/lib/genkit/itineraryFlow.tsファイルの Genkit フローを表示します。
ヒント: デバッグを効率化するには、長いフローを管理しやすい小さなステップに分割することを検討してください。 - 「画像の説明」ステップを統合してフローを強化します。
TODO: 2コメント（81 行目付近）を見つけます。これは、フローを強化する場所を示すものです。- 空の
imgDescriptionプレースホルダを、imgDescriptionプロンプト呼び出しによって生成された出力に置き換えます。
- フローをテストします。
flows/itineraryFlowに移動します。- 次の入力を使用して、新しく追加したステップで
itineraryFlowが正常に実行されることをテストします。{ "request": "Sightseeing in Paris", "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ] } - [実行] をクリックします。
- 生成された出力を確認します。画像の説明が旅程の提案に組み込まれているはずです。
- エラーや予期しない動作が発生した場合は、[検査] タブで詳細を確認します。このタブでは、トレースストアの実行履歴を確認することもできます。
ウェブ アプリケーションの RAG
- ブラウザで http://localhost:3000/ にアクセスして、ウェブアプリがまだ実行されていることを確認します。
- ウェブアプリが実行されていない場合は、ターミナルで次のコマンドを実行します。
npm install npm run dev - Dream Your Vacation ウェブアプリのページ（http://localhost:3000/gemini）を確認します。
- Next.js 統合の例については、ソースコード（
src/app/gemini/page.tsx）をご覧ください。
9. Firebase App Hosting を使用してアプリケーションをデプロイする
このジャーニーの最後のステップは、ウェブアプリのデプロイです。ここでは、Next.js アプリと Angular アプリのサーバーレス バックエンドへのデプロイを簡素化するように設計されたフレームワーク対応のホスティング ソリューションである Firebase App Hosting を活用します。
- 変更をローカルの git リポジトリに commit してから、GitHub に push します。
- Firebase コンソールで、Firebase プロジェクト内の [アプリホスティング] に移動します。
- [Get started] > [Connect to GitHub] をクリックします。
- [GitHub アカウント] と [リポジトリ] を選択します。[Next] をクリックします。
- [Deployment setting] > [Root directory] で、デフォルト値のままにします。
- [ライブブランチ] で、GitHub リポジトリの main ブランチを選択します。[Next] をクリックします。
- バックエンドの ID を入力します（例:
compass）。 - [Firebase ウェブアプリを作成または関連付ける] というメッセージが表示されたら、[既存の Firebase ウェブアプリを選択] を選択し、この Codelab の前の手順で作成したアプリを選択します。
- [Finish and Deploy] をクリックします。
デプロイ ステータスのモニタリング
デプロイ プロセスには数分かかります。進行状況は、Firebase コンソールの App Hosting セクションで確認できます。
サービス アカウントに権限を付与する
Node.js バックエンドが Vertex AI リソースにアクセスできるようにするには、アプリのサービス アカウントに aiplatform.user ロールを割り当てる必要があります。
gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"
完了すると、ウェブアプリにユーザーがアクセスできるようになります。
自動再デプロイ
Firebase App Hosting は、今後のアップデートを効率化します。GitHub リポジトリのメインブランチに変更を push するたびに、Firebase App Hosting がアプリを自動的に再ビルドして再デプロイするため、ユーザーは常に最新バージョンを利用できます。
10. まとめ
これで、この包括的な Codelab は終了です。
Genkit、Firestore、Vertex AI の機能を活用して、ユーザーの好みやインスピレーションに基づいてパーソナライズされた旅行のおすすめ情報を生成する高度な「フロー」を作成しました。このフローでは、おすすめ情報をアプリケーションのデータに基づいて生成します。
このコースでは、堅牢な生成 AI アプリケーションの構築に不可欠なソフトウェア エンジニアリング パターンを実際に操作して習得しました。これらのパターンには、次のものがあります。
- プロンプト管理: コラボレーションとバージョン管理を改善するために、プロンプトをコードとして整理して維持します。
- マルチモーダル コンテンツ: 画像やテキストなど、さまざまなデータ型を統合して AI のインタラクションを強化します。
- 入力/出力スキーマ: アプリケーションでのシームレスな統合と検証のためにデータを構造化します。
- ベクトル ストア: ベクトル エンベディングを活用して、効率的な類似検索と関連情報の取得を行います。
- データ取得: データベースからデータを取得して AI 生成コンテンツに組み込むメカニズムを実装します。
- 検索拡張生成（RAG）: 検索手法と生成 AI を組み合わせて、コンテキストに関連性の高い正確な出力を生成します。
- フローの計測: シームレスで観測可能な実行のための複雑な AI ワークフローの構築とオーケストレーション。
これらのコンセプトを習得し、Firebase エコシステム内で適用することで、独自の生成 AI の冒険に乗り出す準備が整います。広大な可能性を探り、革新的なアプリケーションを作成し、生成 AI で実現できることの限界を押し広げ続けてください。
代替デプロイ オプションの検討
Genkit には、特定のニーズに合わせてさまざまなデプロイ オプションが用意されています。
- Cloud Functions for Firebase
- Cloud Run
- Next.js
- 任意の Node.js 環境
- Genkit は Go もサポートしています
（package.json）ノードフォルダ内で次のコマンドを実行して、最適なものを選択します。
npx genkit init
次のステップ
- Google AI Studio または Vertex AI Studio でプロンプトを試して、大きなコンテキスト ウィンドウを活用します。
- 詳しくは、AI 検索拡張生成（RAG）検索をご覧ください。
- Genkit の公式ドキュメントをご覧ください。
- Firestore の類似性検索機能と Cloud SQL for PostgreSQL の詳細を確認する。
- 関数呼び出しを使用して、生成 AI フローをさらに詳しく見てみましょう。