Genkit in einer Next.js-App verwenden

Auf dieser Seite wird gezeigt, wie Sie Genkit-Abläufe als Serveraktionen in Ihren Next.js-Anwendungen verwenden können.

Hinweis

Sie sollten mit dem Genkit-Konzept von Abläufen und deren Erstellung vertraut sein.

Next.js-Projekt erstellen

Wenn Sie noch kein Next.js-Projekt haben, dem Sie generative KI-Funktionen hinzufügen möchten, können Sie eines erstellen, um die Schritte auf dieser Seite auszuführen:

npx create-next-app@latest

Genkit-Abhängigkeiten installieren

Installieren Sie die Genkit-Abhängigkeiten in Ihrer Next.js-Anwendung wie bei jedem Genkit-Projekt:

  1. Installieren Sie die Genkit-Kernbibliothek:

    npm i --save genkit

  2. Installieren Sie mindestens ein Modell-Plug-in.

    So verwenden Sie beispielsweise die KI von Google:

    npm i --save @genkit-ai/googleai

    So verwenden Sie Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Wenn Sie die Genkit-Befehlszeile nicht global installiert haben, können Sie sie als Entwicklungsabhängigkeit installieren. Das tsx-Tool wird ebenfalls empfohlen, da es das Testen Ihres Codes erleichtert. Beide Abhängigkeiten sind jedoch optional.

    npm i --save-dev genkit-cli tsx

Genkit-Abläufe definieren

Erstellen Sie in Ihrem Next.js-Projekt eine neue Datei für Ihre Genkit-Flows, z. B. src/app/genkit.ts. Diese Datei kann Ihre Abläufe ohne Änderungen enthalten. Da Sie Abläufe jedoch nur über ein Server-Backend ausführen können, müssen Sie die Anweisung 'use server' oben in die Datei einfügen.

Beispiel:

'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;
  }
);

Abläufe aufrufen

Jetzt können Sie Ihre Workflows in Ihren Front-End-Code importieren und als Serveraktionen aufrufen.

Beispiel:

'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>
  );
}

App lokal testen

Wenn Sie Ihre App lokal ausführen möchten, müssen Sie Anmeldedaten für den von Ihnen ausgewählten Modell-API-Dienst verfügbar machen.

Gemini (Google AI)

  1. Prüfen Sie, ob Google AI in Ihrer Region verfügbar ist.

  2. Erstellen Sie einen API-Schlüssel für die Gemini API mit Google AI Studio.

  3. Legen Sie die Umgebungsvariable GOOGLE_GENAI_API_KEY auf Ihren Schlüssel fest:

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini (Vertex AI)

  1. Aktivieren Sie in der Cloud Console die Vertex AI API für Ihr Projekt.

  2. Legen Sie einige Umgebungsvariablen fest und verwenden Sie das Tool gcloud, um Standardanmeldedaten für die Anwendung einzurichten:

    export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login

Führen Sie die App dann wie gewohnt lokal aus:

npm run dev

Alle Entwicklungstools von Genkit funktionieren weiterhin wie gewohnt. So laden Sie beispielsweise Ihre Workflows in die Entwickler-UI:

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

Anwendung bereitstellen

Wenn Sie Ihre App bereitstellen, müssen Sie dafür sorgen, dass die Anmeldedaten für alle verwendeten externen Dienste (z. B. der von Ihnen ausgewählte Modell-API-Dienst) für die bereitgestellte App verfügbar sind. Auf den folgenden Seiten finden Sie Informationen speziell für die von Ihnen ausgewählte Bereitstellungsplattform: