在 Next.js 应用中使用 Genkit

本页介绍了如何在 Next.js 应用中将 Genkit flow 用作服务器操作。

准备工作

您应熟悉 Genkit 的流程概念以及如何编写流程。

创建 Next.js 项目

如果您还没有要添加生成式 AI 功能的 Next.js 项目，可以创建一个项目，以便按照本页中的说明操作：

npx create-next-app@latest

安装 Genkit 依赖项

将 Genkit 依赖项安装到 Next.js 应用中，方法与任何 Genkit 项目相同：

  1. 安装核心 Genkit 库：

    npm i --save genkit

  2. 安装至少一个模型插件。

    例如，如需使用 Google AI，请执行以下操作：

    npm i --save @genkit-ai/googleai

    或者，如需使用 Vertex AI，请执行以下操作：

    npm i --save @genkit-ai/vertexai

  3. 如果您未全局安装 Genkit CLI，可以将其作为开发依赖项进行安装。我们还建议使用 tsx 工具，因为它可以让您更方便地测试代码。不过，这两个依赖项都是可选的。

    npm i --save-dev genkit-cli tsx

定义 Genkit 流

在 Next.js 项目中创建一个新文件来包含 Genkit 流程，例如 src/app/genkit.ts。此文件可以包含您的流程，无需进行修改；但是，由于您只能从服务器后端运行流程，因此必须将 'use server' 指令添加到文件顶部。

例如：

'use server';

import { gemini15Flash, googleAI } from "@genkit-ai/googleai";
import { genkit, z } from "genkit";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini15Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate({
      model: gemini15Flash,
      prompt: `Invent a menu item for a ${restaurantTheme} themed restaurant.`,
    });
    return text;
  }
);

调用流程

现在，您可以在前端代码中导入流程，并将其作为服务器操作调用。

例如：

'use client';

import { menuSuggestionFlow } from './genkit';
import { useState } from 'react';

export default function Home() {
  const [menuItem, setMenuItem] = useState<string>('');

  async function getMenuItem(formData: FormData) {
    const theme = formData.get('theme')?.toString() ?? '';
    const suggestion = await menuSuggestionFlow(theme);
    setMenuItem(suggestion);
  }

  return (
    <main>
      <form action={getMenuItem}>
        <label htmlFor="theme">
          Suggest a menu item for a restaurant with this theme:{' '}
        </label>
        <input type="text" name="theme" id="theme" />
        <br />
        <br />
        <button type="submit">Generate</button>
      </form>
      <br />
      <pre>{menuItem}</pre>
    </main>
  );
}

在本地测试应用

如果您想在本地运行应用，则需要提供您选择的模型 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

然后，照常在本地运行应用：

npm run dev

Genkit 的所有开发工具都将继续正常运行。例如，如需在开发者界面中加载您的流程，请执行以下操作：

npx genkit start -- npx tsx --watch src/app/genkit.ts

部署应用

在部署应用时，您需要确保您使用的所有外部服务（例如您选择的模型 API 服务）的凭据可供部署的应用使用。请参阅以下页面，了解特定于您所选部署平台的信息：