您可以在 Next.js 应用中使用 Firebase Genkit 流程作为服务器操作。 本页面的其余部分将介绍如何执行此操作。
要求
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
- 当系统提示是否自动配置 Genkit for 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 环境 为 Vertex AI API 设置授权,您可以使用 工作负载身份联合 (推荐)或服务账号密钥。
在 IAM 上 授予 Vertex AI User 角色, 角色 (
roles/aiplatform.user
) 映射到您用于调用 Vertex AI API。- 在 Cloud Functions 和 Cloud Run 上 默认计算服务账号。
- 在 Firebase App Hosting 上 后端服务账号。
- 在其他平台上,该身份是您在上一个 操作。
在本教程中,您只需要为模型提供方设置 Secret,但一般来说,您必须为 flow 使用的每项服务执行类似的操作。
如果您允许
genkit init
命令生成示例流, 创建了一个文件“genkit.ts
”,其中包含一个可用作服务器的 Genkit 流程 操作。请尝试以下示例:首先,对
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 开发者界面中运行和探索您的流程:
genkit start