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
Zainstaluj interfejs wiersza poleceń Genkit, uruchamiając to polecenie:
npm i -g genkit
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.
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.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)
Upewnij się, że AI od Google jest dostępna w Twoim regionie.
Wygeneruj klucz interfejsu API dla interfejsu API Gemini za pomocą Google AI Studio.
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)
W konsoli Cloud włącz interfejs Vertex AI API w swoim projekcie.
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
Podczas wdrażania aplikacji wykonaj te czynności:
Ustaw zmienne
GCLOUD_PROJECT
iGCLOUD_LOCATION
we wdrażanym środowisku. Dokładne kroki zależą od platformy.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.
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.
Jeśli zezwolisz poleceniem
genkit init
na wygenerowanie przykładowego przepływu, zostanie utworzony plikgenkit.ts
z procesem Genkit, którego możesz użyć jako działania serwera. Wypróbuj te zapytania:Najpierw wprowadź niewielką zmianę w funkcji
callMenuSuggestionFlow
:export async function callMenuSuggestionFlow(theme: string) { const flowResponse = await runFlow(menuSuggestionFlow, theme); console.log(flowResponse); return flowResponse; }
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> ); }
Uruchom go w środowisku programistycznym Next.js:
npm run dev
Procesy możesz też uruchamiać i przeglądać w interfejsie programisty Genkit:
genkit start