Korzystanie z Genkit w aplikacji Next.js

Na tej stronie dowiesz się, jak używać przepływów Genkit jako działań serwera w aplikacjach Next.js.

Zanim zaczniesz

Musisz znać pojęcie przepływów w Genkit i wiedzieć, jak je pisać.

Tworzenie projektu Next.js

Jeśli nie masz jeszcze projektu Next.js, do którego chcesz dodać funkcje generatywnej AI, możesz go utworzyć, aby móc śledzić tę stronę:

npx create-next-app@latest

Instalowanie zależności Genkit

Zainstaluj zależności Genkit w aplikacji Next.js w taki sam sposób jak w przypadku dowolnego projektu Genkit:

1. Zainstaluj główną bibliotekę Genkit:

   npm i --save genkit

2. Zainstaluj co najmniej 1 wtyczkę modelu.

   Na przykład, aby korzystać z AI od Google:

   npm i --save @genkit-ai/googleai

   Aby korzystać z Vertex AI:

   npm i --save @genkit-ai/vertexai

3. Jeśli nie zainstalowano Genkit CLI globalnie, można go zainstalować jako zależność programistyczną. Zalecamy też narzędzie tsx, ponieważ ułatwia testowanie kodu. Obie te zależności są jednak opcjonalne.

   npm i --save-dev genkit-cli tsx

Definiowanie przepływów Genkit

Utwórz w projekcie Next.js nowy plik, który będzie zawierać przepływy Genkit, np. src/app/genkit.ts. Ten plik może zawierać Twoje przepływy bez zmian, ale ponieważ możesz uruchamiać przepływy tylko z backendu serwera, musisz dodać dyrektywę 'use server' na początku pliku.

Przykład:

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

Wywoływanie przepływów

Teraz w kodzie interfejsu możesz importować przepływy i wywoływać je jako akcje serwera.

Przykład:

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

Testowanie aplikacji lokalnie

Jeśli chcesz uruchomić aplikację lokalnie, musisz udostępnić poświadczenia dostępu do wybranej usługi interfejsu API modelu.

Następnie uruchom aplikację lokalnie w zwykły sposób:

npm run dev

Wszystkie narzędzia do tworzenia w Genkit działają normalnie. Aby na przykład załadować przepływy w interfejsie dla deweloperów:

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

Wdrażanie aplikacji

Podczas wdrażania aplikacji musisz się upewnić, że dane logowania do wszystkich używanych usług zewnętrznych (np. wybranej usługi interfejsu API modelu) są dostępne dla wdrożonej aplikacji. Informacje o wybranej platformie wdrażania znajdziesz na tych stronach:

• Cloud Functions dla Firebase
• Cloud Run
• Inne platformy Node.js