Next.js アプリでの Firebase Genkit

Firebase Genkit のフローは、Next.js アプリのサーバー アクションとして使用できます。このページの残りの部分では、その方法について説明します。

要件

Node.js 20 以降。

手順

  1. 次のコマンドを実行して、Genkit CLI をインストールします。

    npm i -g genkit

  2. 使用する Next.js アプリがまだない場合は作成します。

    npx create-next-app@latest

    言語として TypeScript を選択します。

  3. Next.js プロジェクトで Genkit を初期化します。

    cd your-nextjs-project
genkit init
    • デプロイ プラットフォームとして [Next.js] を選択します。
    • 使用するモデル プロバイダを選択します。

    残りのプロンプトはデフォルトのままにします。genkit ツールは、独自の AI フローの開発を開始できるように、いくつかのサンプル ソースファイルを作成します。

  4. デプロイした関数で API 認証情報を利用できるようにします。選択したモデル プロバイダに応じて、次のいずれかを行います。

    Gemini（Google AI）

    1. Google AI がお住まいのリージョンで利用可能であることを確認してください。

    2. Google AI Studio を使用して、Gemini API の API キーを生成します。

    3. 次のステップと同様に、フローをローカルで実行するには、GOOGLE_GENAI_API_KEY 環境変数をキーに設定します。

      export GOOGLE_GENAI_API_KEY=<your API key>

      アプリをデプロイするときは、デプロイした環境でこの鍵を使用できるようにする必要があります。正確な手順は、プラットフォームによって異なります。

    Gemini（Vertex AI）

    1. Cloud コンソールで、プロジェクトで Vertex AI API を有効にします。

    2. 次のステップのようにフローをローカルで実行するには、追加の環境変数を設定し、gcloud ツールを使用してアプリケーションのデフォルト認証情報を設定します。

      export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login

    3. アプリをデプロイする際は、以下を行う必要があります。

      1. デプロイした環境で GCLOUD_PROJECT 変数と GCLOUD_LOCATION 変数を設定します。正確な手順はプラットフォームによって異なります。

      2. Firebase または Google Cloud 環境にデプロイする場合は、Workload Identity 連携（推奨）またはサービス アカウント キーを使用して Vertex AI API の承認を設定します。

      3. Google Cloud コンソールの [IAM] ページで、Vertex AI API の呼び出しに使用する ID に Vertex AI ユーザーのロール（roles/aiplatform.user）を付与します。

        • Cloud Functions と Cloud Run では、これはデフォルトのコンピューティング サービス アカウントです。
        • Firebase App Hosting ではアプリのバックエンド サービス アカウントです。
        • 他のプラットフォームでは、これは前の手順で設定した ID です。

    このチュートリアルで設定する必要があるシークレットは、モデル プロバイダ用のみですが、通常は、フローで使用するサービスごとに同様の操作を行う必要があります。

  5. genkit init コマンドでサンプルフローの生成を許可すると、genkit.ts ファイルが作成されます。このファイルには、サーバー アクションとして使用できる Genkit フローが含まれています。次のコマンドを試してみます。

    1. まず、tbe callMenuSuggestionFlow 関数に小さな変更を加えます。

      export async function callMenuSuggestionFlow(theme: string) {
  const flowResponse = await runFlow(menuSuggestionFlow, theme);
  console.log(flowResponse);
  return flowResponse;
}

    2. この関数にはサーバー アクションとしてアクセスできます。簡単な例として、page.tsx の内容を次のように置き換えます。

      'use client';

import { callMenuSuggestionFlow } from '@/app/genkit';
import { useState } from 'react';

export default function Home() {
  const [menuItem, setMenu] = useState<string>('');

  async function getMenuItem(formData: FormData) {
    const theme = formData.get('theme')?.toString() ?? '';
    const suggestion = await callMenuSuggestionFlow(theme);
    setMenu(suggestion);
  }

  return (
    <main>
      <form action={getMenuItem}>
        <label>
          Suggest a menu item for a restaurant with this theme:{' '}
        </label>
        <input type="text" name="theme" />
        <button type="submit">Generate</button>
      </form>
      <br />
      <pre>{menuItem}</pre>
    </main>
  );
}

    3. Next.js 開発環境で実行します。

      npm run dev

  6. Genkit Developer UI でフローを実行して確認することもできます。

    genkit start