Firebase Genkit di aplikasi Next.js

Anda dapat menggunakan alur Firebase Genkit sebagai tindakan server di aplikasi Next.js. Bagian selanjutnya dari halaman ini akan menunjukkan caranya.

Persyaratan

Node.js 20 atau yang lebih baru.

Prosedur

1. Instal Genkit CLI dengan menjalankan perintah berikut:

   npm i -g genkit
   

2. Jika Anda belum memiliki aplikasi Next.js yang ingin digunakan, buatlah:

   npx create-next-app@latest
   

   Pilih TypeScript sebagai bahasa pilihan Anda.

3. Inisialisasi Genkit di project Next.js Anda:

   cd your-nextjs-project
   genkit init
   

   • Pilih Next.js sebagai platform deployment.
   • Pilih penyedia model yang ingin Anda gunakan.

   Setujui setelan default untuk dialog lainnya. Alat genkit akan membuat beberapa file sumber contoh untuk membantu Anda mulai mengembangkan alur AI Anda sendiri.

4. Menyediakan kredensial API untuk fungsi yang di-deploy. Lakukan salah satu hal berikut, bergantung pada penyedia model yang Anda pilih:

   Gemini (AI Google)

   1. Pastikan Google AI tersedia di wilayah Anda.

   2. Buat kunci API untuk Gemini API menggunakan Google AI Studio.

   3. Untuk menjalankan flow secara lokal, seperti pada langkah berikut, tetapkan variabel lingkungan GOOGLE_GENAI_API_KEY ke kunci Anda:

      export GOOGLE_GENAI_API_KEY=<your API key>
      

      Saat men-deploy aplikasi, Anda harus menyediakan kunci ini di lingkungan yang di-deploy. Langkah tepatnya bergantung pada platform.

   Gemini (Vertex AI)

   1. Di Konsol Cloud, Aktifkan Vertex AI API untuk project Anda.

   2. Untuk menjalankan flow secara lokal, seperti pada langkah berikutnya, tetapkan beberapa variabel lingkungan tambahan dan gunakan alat gcloud untuk menyiapkan kredensial default aplikasi:

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

   3. Saat men-deploy aplikasi, Anda perlu melakukan hal berikut:

      1. Tetapkan variabel GCLOUD_PROJECT dan GCLOUD_LOCATION di lingkungan yang di-deploy; langkah yang tepat bergantung pada platform.

      2. Jika Anda tidak men-deploy ke lingkungan Firebase atau Google Cloud, siapkan otorisasi untuk Vertex AI API, menggunakan Workload Identity Federation (direkomendasikan) atau kunci akun layanan.

      3. Pada halaman IAM di Konsol Google Cloud, berikan peran Vertex AI User (roles/aiplatform.user) ke identitas yang Anda gunakan untuk memanggil Vertex AI API.

         • Pada Cloud Functions dan Cloud Run, ini adalah Akun layanan komputasi default.
         • Di Firebase App Hosting, ini adalah akun layanan backend aplikasi Anda.
         • Di platform lain, identitas ini adalah identitas yang Anda siapkan pada langkah sebelumnya.

   Satu-satunya rahasia yang perlu Anda siapkan untuk tutorial ini adalah untuk penyedia model, tetapi secara umum, Anda harus melakukan hal yang serupa untuk setiap layanan yang digunakan flow Anda.

5. Jika Anda mengizinkan perintah genkit init untuk menghasilkan alur contoh, perintah tersebut akan membuat file, genkit.ts, yang memiliki alur Genkit yang dapat Anda gunakan sebagai tindakan server. Cobalah:

   1. Pertama, buat perubahan kecil pada fungsi callMenuSuggestionFlow tbe:

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

   2. Anda dapat mengakses fungsi ini sebagai tindakan server. Sebagai contoh sederhana, ganti konten page.tsx dengan kode berikut:

      '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. Jalankan di lingkungan pengembangan Next.js:

      npm run dev
      

6. Anda juga dapat menjalankan dan menjelajahi flow di UI Developer Genkit:

   genkit start