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 を自動的に構成するかどうかを求められたら、[yes] を確認します。
    • 使用するモデル プロバイダを選択します。

    残りのプロンプトについては、デフォルト値を受け入れます。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 環境にデプロイしていない場合は、 次のいずれかを使用して Vertex AI API の承認を設定する Workload Identity 連携 （推奨）またはサービス アカウント キー。

      3. IAM [Vertex AI ユーザー] 権限 ロール（roles/aiplatform.user）を、 Vertex AI API です。

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

    このチュートリアルで設定する必要があるシークレットはモデル プロバイダ用のものだけですが、一般的には、フローで使用する各サービスに対して同様の設定を行う必要があります。

  5. genkit init コマンドでサンプルフローの生成を許可した場合は、 サーバーとして使用できる Genkit フローを含むファイル genkit.ts を作成しました できます。次のコマンドを試してみます。

    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 デベロッパー UI でフローを実行して確認することもできます。

    genkit start