在 Next.js 應用程式中使用 Genkit

本頁面說明如何在 Next.js 應用程式中，使用 Genkit 流程做為伺服器動作。

事前準備

您應該熟悉 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 的所有開發工具仍可正常運作。舉例來說，如要在開發人員 UI 中載入流程：

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

部署您的應用程式

部署應用程式時，請確認所用外部服務 (例如所選模型 API 服務) 的憑證可供已部署的應用程式使用。請參閱下列頁面，瞭解所選部署平台的相關資訊：