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
    • 选择 Next.js 作为部署平台。
    • 选择要使用的模型提供方。

    接受其余提示的默认值。genkit 工具将创建一些示例源文件，帮助您开始开发自己的 AI 流程。

  4. 使 API 凭据可供部署的函数使用。根据您选择的模型提供程序，执行以下某项操作：

    Gemini (Google AI)

    1. 确保 Google AI 在您所在的地区可用。

    2. 使用 Google AI Studio 为 Genmini 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 Federation（推荐）或服务帐号密钥为 Vertex AI API 设置授权。

      3. 在 Google Cloud 控制台的 IAM 页面上，将 Vertex AI User 角色 (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 Developer 界面中运行和探索您的数据流：

    genkit start