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. 產生 API 金鑰： 或 Google AI Studio 建立 Gemini 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_PROJECTGCLOUD_LOCATION ；確切步驟視平台而定。

      2. 如果沒有部署至 Firebase 或 Google Cloud 環境 使用以下其中一種標記為 Vertex AI API 設定授權： 工作負載身分聯盟 (建議) 或服務帳戶金鑰。

      3. 在 IAM 頁面中 前往 Google Cloud 控制台頁面，授予 Vertex AI 使用者 角色 (roles/aiplatform.user) 是您呼叫 Vertex AI API

         • 在 Cloud Functions 和 Cloud Run 中 預設運算服務帳戶：
         • Firebase App Hosting 的應用程式
         • 在其他平台上，這就是你在先前步驟中設定的身分 採用

   在這個教學課程中，您只需要為模型設定密鑰 但整體而言，您必須為每個服務進行類似的操作 以及流程使用的容器

5. 如果您允許 genkit init 指令產生範例資料流，那麼 建立了一個檔案 (genkit.ts) 並具有 Genkit 流程，可當做伺服器使用 動作。請嘗試以下搜尋：

   1. 首先，請對 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