Next.js アプリで Genkit を使用する

このページでは、Next.js アプリで Genkit フローをサーバー アクションとして使用する方法について説明します。

始める前に

Genkit のフローのコンセプトと作成方法を理解している必要があります。

Next.js プロジェクトを作成する

生成 AI 機能を追加する Next.js プロジェクトがない場合は、このページの手順に沿って作成できます。

npx create-next-app@latest

Genkit の依存関係をインストールする

Genkit プロジェクトの場合と同様に、Genkit の依存関係を Next.js アプリにインストールします。

  1. コア Genkit ライブラリをインストールします。

    npm i --save genkit

  2. モデル プラグインを 1 つ以上インストールします。

    たとえば、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 サービスなど）がデプロイされたアプリで使用可能であることを確認する必要があります。選択したデプロイ プラットフォームに固有の情報については、次のページをご覧ください。