您可以使用 Firebase Genkit 流程做為 Next.js 應用程式中的伺服器動作。本頁其餘部分會說明相關做法。
需求條件
Node.js 20 以上版本。
程序
請執行下列指令安裝 Genkit CLI:
npm i -g genkit
如果沒有要使用的 Next.js 應用程式,請建立一個:
npx create-next-app@latest
選取 TypeScript 做為語言。
初始化 Next.js 專案中的 Genkit:
cd your-nextjs-project
genkit init
- 選取「Next.js」做為部署平台。
- 選取您要使用的模型提供者。
接受其餘提示的預設值。
genkit
工具會建立一些範例來源檔案,協助您開始開發自己的 AI 流程。為已部署的函式提供 API 憑證。請根據您選擇的模型供應商,執行下列其中一項操作:
Gemini (Google AI)
使用 Google AI Studio 為 Gemini API 產生 API 金鑰。
如要在本機執行流程,如同下一個步驟,請將
GOOGLE_GENAI_API_KEY
環境變數設為金鑰:export GOOGLE_GENAI_API_KEY=<your API key>
部署應用程式時,您需要在部署的環境中提供這組金鑰;確切步驟則視平台而定。
Gemini (Vertex AI)
在 Cloud 控制台中,為專案啟用 Vertex AI API。
如要在本機執行流程,請按照下一個步驟設定其他環境變數,並使用
gcloud
工具設定應用程式預設憑證:export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login
部署應用程式時,您必須執行下列操作:
在已部署的環境中設定
GCLOUD_PROJECT
和GCLOUD_LOCATION
變數;確切步驟則視平台而定。如果您並未部署至 Firebase 或 Google Cloud 環境,請使用 Workload Identity 聯盟 (建議做法) 或服務帳戶金鑰,設定 Vertex AI API 的授權。
在 Google Cloud 控制台的「IAM」頁面中,將 Vertex AI 使用者 (
roles/aiplatform.user
) 角色授予用來呼叫 Vertex AI API 的身分。- 在 Cloud Functions 和 Cloud Run 中,此為「預設運算服務帳戶」。
- 在 Firebase 應用程式託管中,則會是應用程式的後端服務帳戶。
- 在其他平台上,則是您在上一個步驟中設定的身分。
本教學課程需要設定的唯一密鑰適用於模型提供者,但一般而言,您必須針對流程使用的各項服務執行類似操作。
如果您允許
genkit init
指令產生範例資料流,則系統會建立檔案genkit.ts
,並具有可供您做為伺服器動作使用的 Genkit 流程。請嘗試以下搜尋:首先,請稍微變更 Tbe
callMenuSuggestionFlow
函式:export async function callMenuSuggestionFlow(theme: string) { const flowResponse = await runFlow(menuSuggestionFlow, theme); console.log(flowResponse); return flowResponse; }
您可以使用此函式做為伺服器動作。以下提供一個簡單的範例,將
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> ); }
在 Next.js 開發環境中執行:
npm run dev
您也可以在 Genkit 開發人員 UI 中執行及探索流程:
genkit start