Next.js 应用中的 Firebase Genkit

您可以在 Next.js 应用中使用 Firebase Genkit 流程作为服务器操作。 本页面的其余部分将介绍如何执行此操作。

要求

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
   

   • 当系统提示是否自动配置 Genkit for 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 环境 为 Vertex AI API 设置授权，您可以使用 工作负载身份联合 （推荐）或服务账号密钥。

      3. 在 IAM 上 授予 Vertex AI User 角色， 角色 (roles/aiplatform.user) 映射到您用于调用 Vertex AI API。

         • 在 Cloud Functions 和 Cloud Run 上 默认计算服务账号。
         • 在 Firebase App Hosting 上，您的应用的 后端服务账号。
         • 在其他平台上，该身份是您在上一个 操作。

   在本教程中，您只需要为模型提供方设置 Secret，但一般来说，您必须为 flow 使用的每项服务执行类似的操作。

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 开发者界面中运行和探索您的流程：

   genkit start