1. 始める前に
この Codelab では、Firebase Genkit を使用して生成 AI をアプリに統合する方法を学習します。Firebase Genkit は、プロダクション レディな AI 搭載アプリを構築、デプロイ、モニタリングするオープンソース フレームワークです。
Genkit は、アプリ デベロッパー向けに設計されており、使い慣れたパターンとパラダイムを使用して、強力な AI 機能をアプリに簡単に統合できます。Firebase チームが、世界中の何百万人ものデベロッパーが使用するツールの構築で培った経験を活かして開発しました。
前提条件
- Firestore、Node.js、TypeScript に精通している。
学習内容
- Firestore の高度なベクトル類似性検索機能を使用して、よりスマートなアプリを作成する方法。
- Firebase Genkit を使用してアプリに生成 AI を実際に実装する方法。
- デプロイと統合に向けてソリューションを準備します。
必要なもの
- 任意のブラウザ（Google Chrome など）
- コードエディタとターミナルがある開発環境
- Firebase プロジェクトの作成と管理に使用する Google アカウント
2. 使用されているウェブアプリとクラウド サービスを確認します。
このセクションでは、この Codelab で作成するウェブアプリを確認します。また、使用するクラウド サービスについても説明します。
ウェブアプリ
この Codelab では、旅行計画アプリ Compass というアプリのコードベースを使用します。ユーザーは目的地を選択し、その目的地でのアクティビティを確認し、旅行プランを作成できます。
この Codelab では、アプリのホームページでユーザー エンゲージメントを向上させることを目的とした 2 つの新機能を実装します。どちらの機能も生成 AI を活用しています。
- アプリでは現在、デスティネーションの静的なリストが表示されます。動的に変更します。
- 自動入力された旅行プランを実装して、ユーザーの滞在時間を長くします。
使用するサービス
この Codelab では、Firebase と Cloud の多くのサービスや機能を使用します。ほとんどのスターター コードがあらかじめ用意されています。次の表に、使用するサービスとその使用理由を示します。
Service | 使用の理由 |
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 ファイルとしてダウンロードします。
フォルダ構造を確認する
ローカルマシンで、クローンを作成したリポジトリを見つけて、フォルダ構造を確認します。
フォルダ | 説明 |
| バックエンド Genkit コード |
| Firestore コレクションにすばやく事前入力するためのヘルパー コマンドライン ツール |
*その他 | Next.js ウェブアプリのコード |
ルートフォルダには README.md ファイルが含まれています。このファイルを使用すると、簡単な手順でウェブアプリの実行をすぐに開始できます。初心者の場合は、最も包括的な手順が記載されているため、クイックスタートではなく、この 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 プロジェクトに自動で割り当てられたプロジェクト ID を控えておいてください（または、[編集] アイコンをクリックして、使用するプロジェクト ID を設定します）。この ID は、Firebase CLI で Firebase プロジェクトを識別するために後で必要になります。ID を忘れてしまった場合は、後で [プロジェクトの設定] でいつでも確認できます。 - [続行] をクリックします。
- プロンプトが表示されたら、Firebase の利用規約を確認して同意し、[続行] をクリックします。
- この Codelab では Google アナリティクスは必要ないため、Google アナリティクス オプションをオフに切り替えます。
- [プロジェクトを作成] をクリックし、プロジェクトがプロビジョニングされるのを待ってから、[続行] をクリックします。
Firebase プロジェクトにウェブアプリを追加する
- Firebase プロジェクトの [Project Overview] 画面に移動し、
[ウェブ] をクリックします。![Firebase コンソールの [プロジェクトの概要] の上部にある [ウェブ] ボタン](https://firebase.google.com/static/codelabs/ai-genkit-rag/img/compass-codelab-add-webapp.png?hl=ja)
- [アプリのニックネーム] テキスト ボックスに、覚えやすいアプリのニックネーム（
My Compass Codelab Appなど）を入力します。この Codelab の最後のステップでホスティング サービスを設定するので、Firebase Hosting の設定のチェックボックスはオフのままで構いません。
- [アプリの登録] > [コンソールに進む] をクリックします。
これで、これで、新しい Firebase プロジェクトにウェブアプリが登録されました。
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 コンソールの左側のパネルで [Build] を開き、[Firestore データベース] を選択します。
- [データベースを作成] をクリックします。
- [Database ID] は
(default)に設定されたままにします。 - データベースのロケーションを選択し、[Next] をクリックします。
実際のアプリでは、ユーザーに近いロケーションを選択します。 - [テストモードで開始] をクリックします。セキュリティ ルールに関する免責条項を確認します。
データベースのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。 - [作成] をクリックします。
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 プロジェクトに移動します。
- 左側のパネルで、[Project Overview] の横にある歯車アイコンをクリックし、[Project settings] を選択します。
- [アプリ] カードでウェブアプリを選択します。
- [SDK のセットアップと構成] セクションで、[構成] オプションを選択します。
- スニペットをコピーします。
const firebaseConfig ...で始まります。
- Firebase 構成をウェブアプリのコードベースに追加します。
- コードエディタで
src/lib/genkit/genkit.config.tsファイルを開きます。 - 関連するセクションを、コピーしたコードに置き換えます。
- ファイルを保存します。
- コードエディタで
ブラウザでウェブアプリをプレビューする
- ターミナルで依存関係をインストールしてから、ウェブアプリを実行します。
npm install npm run dev - ブラウザで、ローカルでホストされている Hosting URL に移動してウェブアプリを表示します。たとえば、ほとんどの場合、URL は http://localhost:3000/ です。
Compass は、React Server コンポーネントを使用した Next.js アプリで、これがホームページです。
[夢の旅行を探す] をクリックします。現在、一部の固定デスティネーションに対してハードコードされたデータが表示されています。
ぜひお試しください。続行する準備ができたら、右上にある 
ホームボタンをクリックします。
6. Genkit で生成 AI を学ぶ
これで、アプリケーションで生成 AI のパワーを活用する準備が整いました。この Codelab のセクションでは、ユーザーが提供するインスピレーションに基づいて目的地を提案する機能を実装します。Firebase Genkit と Google Cloud の Vertex AI を生成モデルのプロバイダとして使用します（Gemini を使用します）。
Genkit は、トレース状態とフロー状態を保存できます（これにより、Genkit フローの実行結果を検査できます）。この Codelab では、Firestore を使用してトレースを保存します。
この Codelab の最後のステップとして、Genkit アプリを Firebase App Hosting にデプロイします。
Genkit アプリを Firebase プロジェクトに接続する
Genkit を起動する前に、データベースなどのサービスを利用できるように、コードベースを正しい Firebase プロジェクトに関連付ける必要があります。これを行うには、Firebase 構成を Genkit アプリのコードベースに追加する必要があります。この構成には、プロジェクト ID、アプリの API キー、アプリ ID などの必須の値に加え、アプリが Firebase とやり取りできるようにするその他の値が含まれます。
- アプリの Firebase 構成を取得します。
- Firebase コンソールで、Firebase プロジェクトに移動します。
- 左側のパネルで [プロジェクトの概要] の横にある歯車アイコンをクリックし、[プロジェクトの設定] を選択します。
- [アプリ] カードでウェブアプリを選択します。
- [SDK のセットアップと構成] セクションで、[構成] オプションを選択します。
- スニペットをコピーします。
const firebaseConfig ...で始まります。
- アプリの Firebase 構成を Genkit アプリのコードベースに追加します。
- コードエディタで
genkit-functions/src/lib/genkit.config.tsファイルを開きます。 - 関連するセクションを、コピーしたコードに置き換えます。
- ファイルを保存します。
- コードエディタで
Genkit デベロッパー UI を起動する
Genkit にはウェブベースの UI が付属しており、LLM、Genkit フロー、リトリーバー、その他の AI コンポーネントを操作できます。
- Genkit デベロッパー UI を起動します。
- 新しいターミナル ウィンドウを開きます。
genkit-functionsディレクトリのルートに移動します。- 次のコマンドを実行して、Genkit デベロッパー UI を起動します。
cd genkit-functions npx genkit start
- ブラウザで、ローカルにホストされている Genkit の URL に移動します。ほとんどの場合は http://localhost:4000/ です。
Gemini を操作する
これで、Genkit のデベロッパー UI を使用して、サポートされているモデルや他の AI コンポーネント（プロンプト、リトリーバー、Genkit フローなど）を操作できます。
たとえば、Gemini に休暇をおすすめしてもらいましょう。システム指示を使用して、特定のニーズに基づいてモデルの動作を制御する方法を確認します。これは、システム命令をネイティブにサポートしていないモデルでも機能します。
プロンプトを管理する
Firebase Genkit には、生成 AI のプロンプトの作成と管理を効率化するために設計されたプラグインとテキスト形式である Dotprompt が導入されています。Dotprompt の背後にある考え方は、プロンプトをコードとして扱い、アプリケーション コードとともに作成、メンテナンス、バージョン管理を行えるようにすることです。
Dotprompt を使用するには、まず hello-world を作成します。
- コードエディタで
genkit-functions/prompts/1-hello-world.promptファイルを開きます。 - Genkit デベロッパー UI で、
dotprompt/1-hello-worldを開きます。 - 使い慣れた言語の名前またはコードを使用するか、空の文字列のままにします。
- [実行] をクリックします。
- いくつかの値を試してみてください。大規模言語モデルは、この例のような簡単なクエリで省略形、スペルミス、不完全なプロンプトを理解するのに適しています。
構造化データを使用して出力を拡充する
Genkit では、単なるテキストの生成だけでなく、出力を構造化して、アプリの UI 内での表示と統合を強化できます。スキーマを定義することで、目的の形式に沿った構造化データを生成するように LLM に指示できます。
出力スキーマの確認
LLM 呼び出しの出力スキーマを指定することもできます。
- コードエディタで、プロンプト ファイルを調べます。
dotprompt/2-simple-itineraryファイルを開きます。- 定義済みの入力スキーマと出力スキーマを確認します。
- UI を操作します。
- Genkit デベロッパー UI で、
dotprompt/2-simple-itineraryセクションに移動します。 placeフィールドとinterestsフィールドにサンプルデータを入力して入力します。{ "interests": [ "Museums" ], "place": "Paris" }- [実行] をクリックします。
- Genkit デベロッパー UI で、
スキーマドリブン出力について
生成された出力が定義済みのスキーマに準拠していることに注目してください。目的の構造を指定することで、解析が容易でアプリケーションに統合できるデータを生成するように LLM に指示できました。Genkit はスキーマに照らして出力を自動的に検証し、データの整合性を確保します。
さらに、スキーマと一致しない場合に出力を再試行または修復するように Genkit を構成することもできます。
出力スキーマの主な利点
- 統合の簡素化: 構造化データをアプリの UI 要素に簡単に組み込むことができます。
- データの検証: 生成された出力の正確性と一貫性を確保します。
- エラー処理: スキーマの不一致に対処するメカニズムを実装します。
出力スキーマを活用することで、Genkit のエクスペリエンスが向上し、より豊かで動的なユーザー エクスペリエンスを実現するカスタマイズされた構造化データを作成できるようになります。
マルチモーダル入力を活用する
ユーザーが魅力的だと感じた画像に基づいて、カスタマイズされた休暇先をアプリが提案するとします。Genkit をマルチモーダル生成モデルと組み合わせることで、このビジョンを現実化できます。
- コードエディタでプロンプト ファイルを調べます。
genkit-functions/prompts/imgDescription.promptファイルを開きます。{{media url=this}}が含まれていることに注意してください。これは、プロンプトに画像を簡単に組み込める Handlebars 構文要素です。
- UI を操作する:
- Genkit デベロッパー UI で、
dotprompt/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 インデックスを作成する必要があります。このインデックスにより、エンベディング ベクトルと特定のクエリの類似性に基づいて場所を効率的に取得できます。
- ターミナルで次のコマンドを実行して、最新の アルファ版コンポーネントをインストールします。バージョン
2024.05.03以降が必要です。gcloud components install alpha - インデックスを作成します。
YOUR_PROJECT_IDは実際のプロジェクトの ID に置き換えてください。gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding - Genkit デベロッパー UI で、
placesRetrieverを開きます。 - [実行] をクリックします。プレースホルダ テキストを含むスキャフォールディングされたオブジェクトを調べ、取得ロジックを実装する場所を確認します。
- コードエディタで
genkit-functions/src/lib/placesRetriever.tsファイルを開きます。 - 下にスクロールし、プレースホルダ
placesRetrieverを次のように置き換えます。export const placesRetriever = defineFirestoreRetriever({ name: 'placesRetriever', firestore, collection: 'places', contentField: 'knownFor', vectorField: 'embedding', embedder: textEmbeddingGecko, distanceMeasure: 'COSINE', });
Retriever をテストする
- Genkit デベロッパー UI で、
placesRetrieverRetriever を開きます。 - 次のクエリを入力します。
{ "content": [ { "text": "UNESCO" } ] } - [Options] を指定することもできます。たとえば、取得ツールが返すドキュメントの数を指定するには、次のようになります。
{ "limit": 4 } - [実行] をクリックします。
[Options] に where 句を追加すると、類似性以外のデータに対するフィルタリングを行えます。
8. Genkit を使用した検索拡張生成（RAG）
これまでのセクションでは、テキスト、JSON、画像を処理して、旅行先などの魅力的なコンテンツを生成できる個別のプロンプトを作成しました。また、Firestore データベースから関連するデスティネーションを取得するプロンプトも実装しました。次に、これらのコンポーネントを結合的検索拡張生成（RAG）フローにオーケストレートします。
このセクションでは、フローという重要な Genkit のコンセプトについて説明します。フローは、厳密な型付けが施されたストリーミング可能な関数で、ローカルとリモートの両方で呼び出し可能で、完全なオブザーバビリティを備えています。フローの管理と呼び出しは、Genkit の CLI と Genkit デベロッパー UI の両方から行うことができます。
- コードエディタで旅行プランのプロンプトを確認します。
genkit-functions/prompts/itineraryGen.promptファイルを開きます。- プロンプトが展開され、追加の入力、具体的には取得ツールから提供される activities データを受け入れるようになっています。
- Genkit デベロッパー UI で、
genkit-functions/src/lib/itineraryFlow.tsファイルの Genkit フローを表示します。
ヒント: デバッグを効率化するには、長いフローを小さく、管理しやすいステップに分割することを検討してください。 - 「画像の説明」ステップを統合してフローを強化します。
TODO: 2コメント（70 行目付近）を見つけます。これはフローを強化する箇所です。- 空の
imgDescriptionプレースホルダを、imgDescriptionプロンプト呼び出しによって生成された出力に置き換えます。
- フローをテストします。
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" ] } - [実行] をクリックします。
- 生成された出力を確認します。画像の説明が旅行プランの提案に組み込まれています。
- エラーや予期しない動作が発生した場合は、[Inspect] タブで詳細を確認してください。このタブを使用して、Trace Store からの実行履歴を確認することもできます。
ウェブ アプリケーション用の 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 を使用してアプリケーションをデプロイする
このプロセスの最後のステップは、ウェブアプリのデプロイです。Firebase App Hosting を活用します。これはフレームワーク対応のホスティング ソリューションで、Next.js アプリと Angular アプリをサーバーレス バックエンドに簡単にデプロイできるように設計されたものです。
- 変更をローカルの Git リポジトリに commit してから、GitHub に push します。
- Firebase コンソールで、Firebase プロジェクト内の [App Hosting] に移動します。
- [使ってみる] > [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 は終了です。
Firebase 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 もサポート
適切なものを 1 つ選択します。そのためには、（package.json）ノードフォルダ内で次のコマンドを実行します。
npx genkit init
次のステップ
- Google AI Studio または Vertex AI Studio でプロンプトを試し、大きなコンテキスト ウィンドウを活用する。
- AI 検索拡張生成（RAG）検索の詳細を確認する。
- Firebase Genkit の公式ドキュメントをご覧ください。
- 詳しくは、Firestore の類似検索機能と Cloud SQL for PostgreSQL に関する記事をご覧ください。
- 関数呼び出しで生成 AI フローを深く掘り下げる。