Firebase Genkit w aplikacjach Next.js

Możesz używać przepływów Firebase Genkit jako działań serwera w aplikacjach Next.js. Instrukcje znajdziesz w dalszej części tej strony.

Wymagania

Node.js w wersji 20 lub nowszej.

Procedura

  1. Zainstaluj interfejs wiersza poleceń Genkit, uruchamiając to polecenie:

    npm i -g genkit

  2. Jeśli nie masz jeszcze aplikacji Next.js, której chcesz użyć, utwórz ją:

    npx create-next-app@latest

    Wybierz TypeScript jako wybrany język.

  3. Zainicjuj Genkit w projekcie Next.js:

    cd your-nextjs-project
genkit init
    • Gdy pojawi się pytanie, czy chcesz automatycznie skonfigurować Genkit na potrzeby Next.js, potwierdź wartość yes (tak).
    • Wybierz dostawcę modelu, którego chcesz użyć.

    W pozostałych promptach zaakceptuj wartości domyślne. Narzędzie genkit utworzy kilka przykładowych plików źródłowych, które pomogą Ci utworzyć własne przepływy pracy AI.

  4. Udostępnij dane logowania do interfejsu API wdrożonej funkcji. Wykonaj jedną z tych czynności: w zależności od wybranego dostawcy modelu:

    Gemini (AI od Google)

    1. Upewnij się, że AI od Google dostępne w Twoim regionie.

    2. Wygeneruj klucz interfejsu API dla platformy Gemini API za pomocą Google AI Studio.

    3. Aby uruchomić przepływ lokalnie, tak jak w następnym kroku ustaw zmienną środowiskową GOOGLE_GENAI_API_KEY na swój klucz:

      export GOOGLE_GENAI_API_KEY=<your API key>

      Po wdrożeniu aplikacji musisz udostępnić ten klucz w wdrożone środowisko; dokładne kroki zależą od platformy.

    Gemini (Vertex AI)

    1. W konsoli Google Cloud Włączanie interfejsu Vertex AI API do swojego projektu.

    2. Aby uruchomić przepływ lokalnie, tak jak w następnym kroku ustaw kilka dodatkowych zmiennych środowiskowych i użyj Narzędzie gcloud do konfiguracji domyślne dane uwierzytelniające aplikacji:

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

    3. Podczas wdrażania aplikacji musisz wykonać te czynności:

      1. Ustaw zmienne GCLOUD_PROJECT i GCLOUD_LOCATION w wdrożone środowisko; dokładne kroki zależą od platformy.

      2. Jeśli nie wdrażasz środowiska Firebase ani Google Cloud, skonfigurować autoryzację dla interfejsu Vertex AI API przy użyciu Federacja tożsamości zadań (zalecane) lub klucz konta usługi.

      3. W Uprawnieniach w konsoli Google Cloud i przyznaj użytkownikowi Vertex AI. (roles/aiplatform.user) do tożsamości, której używasz do wywoływania interfejsu Vertex AI API.

        • W Cloud Functions i Cloud Run jest to Domyślne konto usługi Compute.
        • W Firebase App Hosting jest to konta usługi backendu.
        • Na innych platformach jest to tożsamość skonfigurowana w poprzednim kroku krok po kroku.

    Jedynym obiektem tajnym, który musisz skonfigurować na potrzeby tego samouczka, jest model ale z reguły należy zrobić coś podobnego w przypadku każdej usługi używane przez przepływ.

  5. Jeśli zezwolisz polecenia genkit init na generowanie przykładowego przepływu, utworzył(a) plik genkit.ts z przepływem Genkit, którego możesz używać jako serwera działania. Wypróbuj te zapytania:

    1. Najpierw wprowadź niewielką zmianę w funkcji callMenuSuggestionFlow:

      export async function callMenuSuggestionFlow(theme: string) {
  const flowResponse = await runFlow(menuSuggestionFlow, theme);
  console.log(flowResponse);
  return flowResponse;
}

    2. Możesz uzyskać dostęp do tej funkcji jako działania serwera. Oto prosty przykład: zastąp zawartość pola page.tsx taką:

      'use client';

import { callMenuSuggestionFlow } from '@/app/genkit';
import { useState } from 'react';

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

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

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

    3. Uruchom go w środowisku programistycznym Next.js:

      npm run dev

  6. Możesz też uruchamiać i badać przepływy w interfejsie Genkit Developer:

    genkit start