Firebase Genkit w aplikacjach Next.js

W aplikacjach Next.js możesz używać przepływów Firebase Genkit jako działań serwera. Więcej informacji znajdziesz na tej stronie.

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 swój język.

3. Zainicjuj Genkit w projekcie Next.js:

   cd your-nextjs-project
   genkit init
   

   • Wybierz Next.js jako platformę wdrożenia.
   • Wybierz dostawcę modelu, którego chcesz użyć.

   Zaakceptuj ustawienia domyślne w pozostałych promptach. Narzędzie genkit utworzy przykładowe pliki źródłowe, aby ułatwić Ci tworzenie własnych przepływów AI.

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

   Gemini (AI od Google)

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

   2. Wygeneruj klucz interfejsu API dla interfejsu API Gemini 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 środowisku wdrożonym. Dokładne czynności zależą od platformy.

   Gemini (Vertex AI)

   1. W konsoli Cloud włącz interfejs Vertex AI API w swoim projekcie.

   2. Aby uruchomić przepływ lokalnie, tak jak w następnym kroku, ustaw dodatkowe zmienne środowiskowe i za pomocą narzędzia gcloud skonfiguruj domyślne dane logowania aplikacji:

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

   3. Podczas wdrażania aplikacji wykonaj te czynności:

      1. Ustaw zmienne GCLOUD_PROJECT i GCLOUD_LOCATION we wdrażanym środowisku. Dokładne kroki zależą od platformy.

      2. Jeśli nie wdrażasz wdrożenia w środowisku Firebase ani Google Cloud, skonfiguruj autoryzację interfejsu Vertex AI API, korzystając z federacji tożsamości Workload (zalecane) lub klucza konta usługi.

      3. Na stronie Uprawnienia w konsoli Google Cloud przypisz rolę Użytkownik Vertex AI (roles/aiplatform.user) 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 przypadku Hostingu aplikacji Firebase jest to konto usługi backendu aplikacji.
         • Na innych platformach jest to tożsamość skonfigurowana w poprzednim kroku.

   Jedyny obiekt tajny, który należy skonfigurować w tym samouczku, dotyczy dostawcy modelu, ale ogólnie rzecz biorąc, musisz zrobić coś podobnego dla każdej usługi, której używa Twój przepływ.

5. Jeśli zezwolisz poleceniem genkit init na wygenerowanie przykładowego przepływu, zostanie utworzony plik genkit.ts z procesem Genkit, którego możesz użyć jako działania serwera. 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. Dostęp do tej funkcji możesz uzyskać jako działanie serwera. W prostym przykładzie zastąp zawartość elementu page.tsx tą:

      '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. Procesy możesz też uruchamiać i przeglądać w interfejsie programisty Genkit:

   genkit start