App Prototyping エージェントを使用してフルスタック ウェブアプリを開発、公開、モニタリングする

このガイドでは、App Prototyping agent を使用して、Firebase の Gemini を活用してフルスタック アプリを迅速に開発して公開する方法について説明します。自然言語プロンプトを使用して、写真またはブラウザ内カメラから食品を識別し、識別された材料を含むレシピを提供する Next.js アプリを生成します。その後、アプリを改良して最終的に Firebase App Hosting に公開します。

このガイドで使用するその他のテクノロジーは次のとおりです。

ステップ 1: アプリを生成する

  1. Google アカウントにログインし、Firebase Studio を開きます。

  2. [AI でアプリのプロトタイプを作成する] フィールドに、作成するアプリの説明を入力します。このソリューションでは、画像ベースのレシピ アプリを作成します。次のようなプロンプトを使用して、カメラと生成 AI を使用するアプリのプロトタイプを作成できます。

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. [AI でプロトタイプを作成する] をクリックします。

    Gemini はプロンプトに基づいてアプリ ブループリントを生成し、提案されたアプリ名、必要な機能、スタイル ガイドラインを返します。

  4. ブループリントを確認し、いくつか変更を加えます。たとえば、提案されたアプリ名やカラーパターンは、次のいずれかのオプションを使用して変更できます。

    • [カスタマイズ] をクリックして、ブループリントを直接編集します。変更を加えて、[保存] をクリックします。

    • チャットペインの [Describe...] フィールドに、明確な質問とコンテキストを追加します。画像を追加することもできます。

  5. [このアプリのプロトタイプを作成する] をクリックします。Gemini がアプリのコーディングを開始します。アプリの説明に生成 AI を必要とする機能が記載されているため、Gemini から Gemini API キーの入力を求められます。

  6. 独自の Gemini API キーを追加するか、[自動生成] をクリックして Gemini API キーを生成します。

ステップ 2: テスト、調整、デバッグ、反復処理

初期アプリが生成されたら、テスト、調整、デバッグ、反復処理を行うことができます。

  1. アプリを確認して操作する: コード生成が完了すると、アプリのプレビューが表示されます。プレビューを直接操作してテストできます。

  2. アプリを反復処理する: チャット インターフェースを引き続き使用して、Gemini に機能を追加してアプリを改良するよう依頼します。または、コード切り替えアイコン [コードに切り替え] をクリックして Code ビューを開き、Firebase Studio ワークスペースでコードを直接編集します。

  3. アプリをテストする: アプリのプレビュー ペインで、さまざまな食品を示す画像をアップロードして、アプリが食材を特定してレシピを提供できるかどうかをテストします。必要に応じて、Code ビューを使用してアプリを一般公開し、Firebase Studio パブリック プレビューを使用して一時的に公開することもできます。

  4. アプリをデバッグする: コード切り替えアイコン をクリックして Code を開き、[コードに切り替え] をクリックして Code ビューを開きます。ここでは、Firebase Studio の組み込みのデバッグ機能とレポート機能を使用して、アプリの検査、デバッグ、監査を行うことができます。いつでも App Prototyping agent に戻すことができます。

  5. 反復処理: アプリが期待どおりに動作しない場合は、プロンプトを調整するか、チャットペインを使用して Gemini にアプリの調整を依頼するか、コードを直接編集します。Code

（省略可）ステップ 3: App Hosting を使用してアプリを公開する

アプリをテストして問題がなければ、Firebase App Hosting を使用してウェブに公開できます。

App Hosting を設定すると、Firebase Studio によって Firebase プロジェクトが作成され、Cloud Billing アカウントのリンク手順が表示されます。

アプリを Firebase App Hosting に公開するには:

  1. [公開] をクリックして新しい Firebase プロジェクトを作成し、App Hosting の設定を開始します。[アプリを公開する] ペインが表示されます。

  2. [Firebase プロジェクト] の手順で、作成された Firebase プロジェクトの名前をメモし、[次へ] をクリックします。

  3. [Cloud Billing アカウントをリンク] の手順で、次のいずれかを選択します。

    • Firebase プロジェクトにリンクする Cloud Billing アカウントを選択します。

    • Cloud Billing アカウントをお持ちでない場合や、新しいアカウントを作成する場合は、[Cloud Billing アカウントを作成] をクリックします。Google Cloud コンソールが開き、新しいセルフサービス Cloud Billing アカウントを作成できます。アカウントを作成したら、Firebase Studio に戻り、[Cloud Billing をリンク] リストからアカウントを選択します。

  4. [次へ] をクリックします。Firebase Studio は、ワークスペースに関連付けられたプロジェクトに請求先アカウントをリンクします。このプロジェクトは、Gemini API キーを自動生成したとき、または [公開] をクリックしたときに作成されます。次に、App Hosting は Google Cloud にアプリのフルマネージド環境を設定します。

  5. [最初のロールアウトを作成する] をクリックします。Firebase Studio は App Hosting のロールアウトを開始します。完了するまでに最大で 10 分かかります。裏側で何が行われているかについて詳しくは、App Hosting ビルドプロセスをご覧ください。

  6. ロールアウトが完了すると、App Hosting オブザーバビリティに基づく URL とアプリ分析情報とともに [アプリの概要] が表示されます。Firebase で生成されたドメインの代わりにカスタム ドメイン（example.com や app.example.com など）を使用するには、Firebase コンソールでカスタム ドメインを追加します。

App Hosting の詳細については、App Hosting とその仕組みの概要をご覧ください。

（省略可）ステップ 4: アプリをモニタリングする

App Hosting [アプリの概要] パネルには、アプリに関する主要な指標と情報が表示されます。App Hosting に組み込まれたオブザーバビリティ ツールを使用して、ウェブアプリのパフォーマンスをモニタリングできます。サイトがリリースされたら、[公開] をクリックして概要にアクセスできます。このパネルでは、次の操作を行うことができます。

  • [ロールアウトを作成] をクリックして、アプリの新しいバージョンをリリースします。
  • アプリへのリンクを共有するか、[アプリにアクセス] でアプリを直接開きます。
  • リクエストの合計数や最新のロールアウトのステータスなど、過去 7 日間のアプリのパフォーマンスの概要を確認します。[詳細を表示] をクリックすると、Firebase コンソールでさらに詳細な情報を確認できます。
  • 過去 24 時間にアプリが受信したリクエスト数を HTTP ステータス コード別にグラフで表示します。

アプリの概要パネルを閉じた場合は、[公開] をクリックしていつでも再び開くことができます。

App Hosting ロールアウトの管理とモニタリングについて詳しくは、ロールアウトとリリースを管理するをご覧ください。

（省略可）ステップ 5: デプロイをロールバックする

アプリの連続バージョンを App Hosting にデプロイした場合は、以前のバージョンのいずれかにロールバックできます。削除することもできます。

  • 公開済みのサイトをロールバックするには:

    1. Firebase コンソールで App Hosting を開きます。

    2. アプリのバックエンドを見つけて、[表示]、[ロールアウト] の順にクリックします。

    3. ロールバックするデプロイの横にあるその他アイコン をクリックし、[このビルドにロールバック] を選択して確認します。

    詳しくは、ロールアウトとリリースを管理するをご覧ください。

  • ウェブから App Hosting ドメインを削除するには:

    1. Firebase コンソールで App Hosting を開き、Firebase Studio アプリ セクションで [表示] をクリックします。

    2. [バックエンド情報] セクションで [管理] をクリックします。[Domains] ページが読み込まれます。

    3. ドメインの横にあるその他アイコン をクリックし、[ドメインを無効にする] を選択して確認します。

    これにより、ドメインがウェブから削除されます。App Hosting バックエンドを完全に削除するには、バックエンドを削除するの手順に沿って操作します。

（省略可）ステップ 6: デプロイされた特徴に Genkit モニタリングを使用する

AI フロー コードへのテレメトリーを有効にすると、Genkit 特徴ステップ、入力、出力をモニタリングできます。Genkit のテレメトリー機能を使用すると、AI フローのパフォーマンスと使用状況をモニタリングできます。このデータは、改善の余地がある部分の特定、問題のトラブルシューティング、プロンプトとフローの最適化によるパフォーマンスと費用対効果の向上、フローの使用状況の経時的な追跡に役立ちます。

Genkit でモニタリングを設定するには、Genkit AI フローにテレメトリーを追加し、Firebase コンソールで結果を表示します。

ステップ 1: Firebase Studio の Genkit フローコードにテレメトリーを追加する

コードでモニタリングを設定するには:

  1. Code ビューにまだ表示されていない場合は、コード切り替えアイコン [コードに切り替え] をクリックして開きます。

  2. package.json を確認して、インストールされている Genkit のバージョンを確認します。

  3. ターミナル（Ctrl-Shift-C、または macOS では Cmd-Shift-C）を開きます。

  4. ターミナル内でクリックし、package.json ファイルと一致するバージョンを使用して Firebase プラグインをインストールします。たとえば、package.json の Genkit パッケージが 1.0.4 の場合、次のコマンドを実行してプラグインをインストールする必要があります。

    npm i --save @genkit-ai/firebase@1.0.4

  5. [エクスプローラ] で src > ai > flows を開きます。Genkit フローを含む 1 つ以上の TypeScript ファイルが flows フォルダに表示されます。

  6. いずれかのフローをクリックして開きます。

  7. ファイルの imports セクションの一番下に、次のコードを追加して FirebaseTelemetry をインポートして有効にします。

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

ステップ 2: 権限を設定する

Firebase Studio は Firebase プロジェクトの設定時に必要な API を有効にしましたが、App Hosting サービス アカウントに権限を付与する必要があります。

権限を設定するには:

  1. Google Cloud IAM コンソールを開き、プロジェクトを選択して、App Hosting サービス アカウントに次のロールを付与します。

    • モニタリング指標の書き込み（roles/monitoring.metricWriter）
    • Cloud Trace エージェント（roles/cloudtrace.agent）
    • ログ書き込み（roles/logging.logWriter）

  2. App Hosting にアプリを再公開します。

  3. 公開が完了したら、アプリを読み込んで使用を開始します。5 分後に、アプリがテレメトリー データの記録を開始します。

ステップ 3: Firebase コンソールで生成 AI 機能をモニタリングする

テレメトリーが構成されている場合、Genkit はすべてのフローのリクエスト数、成功数、レイテンシを記録します。また、特定のフローごとに、Genkit は安定性指標を収集し、詳細なグラフを表示し、キャプチャされたトレースをログに記録します。

Genkit で実装された AI 機能をモニタリングするには:

  1. 5 分後、Firebase コンソールで Genkit を開き、Genkit のプロンプトとレスポンスを確認します。

    Genkit は、次の安定性指標をコンパイルします。

    • 合計リクエスト数: フローによって受信されたリクエストの合計数。
    • 成功率: 正常に処理されたリクエストの割合。
    • 95 パーセンタイルのレイテンシ: フロー内の 95% のリクエストが処理されるまでにかかる時間。

    • トークンの使用量:

      • 入力トークン: プロンプトでモデルに送信されたトークン数。
      • 出力トークン: レスポンスでモデルによって生成されたトークンの数。

    • 画像の使用:

      • 入力画像: プロンプトでモデルに送信される画像の数。
      • 出力画像: レスポンスでモデルによって生成された画像の数。

    安定性指標を開くと、詳細なグラフが表示されます。

    • 時間の経過に伴うリクエスト数。
    • 時間の経過に伴う成功率。
    • 時間の経過に伴う入力トークンと出力トークン。
    • 時間の経過に伴うレイテンシ（95 パーセンタイルおよび 50 パーセンタイル）。

Genkit について詳しくは、Genkit をご覧ください。

次のステップ