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 使用者 (roles/aiplatform.user) 角色授予用來呼叫 Vertex AI API 的身分。

        • 在 Cloud Functions 和 Cloud Run 中，此為「預設運算服務帳戶」。
        • 在 Firebase 應用程式託管中，則會是應用程式的後端服務帳戶。
        • 在其他平台上，則是您在上一個步驟中設定的身分。

    本教學課程需要設定的唯一密鑰適用於模型提供者，但一般而言，您必須針對流程使用的各項服務執行類似操作。

  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 開發人員 UI 中執行及探索流程：

    genkit start