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, buat aplikasi:

    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
    • Konfirmasi yes saat diminta apakah akan otomatis mengonfigurasi Genkit untuk Next.js.
    • Pilih penyedia model yang ingin Anda gunakan.

    Terima setelan default untuk prompt yang tersisa. Alat genkit akan membuat beberapa contoh file sumber untuk membantu Anda mulai mengembangkan alur AI Anda sendiri.

  4. Sediakan kredensial API untuk fungsi yang Anda deploy. Tergantung pada penyedia model yang Anda pilih, lakukan salah satu hal berikut ini:

    Gemini (AI Google)

    1. Pastikan AI Google tersedia di region Anda.

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

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

      export GOOGLE_GENAI_API_KEY=<your API key>

      Saat Anda men-deploy aplikasi, Anda harus menyediakan kunci ini di lingkungan yang di-deploy; langkah-langkah yang tepat tergantung pada platformnya.

    Gemini (Vertex AI)

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

    2. Untuk menjalankan flow Anda secara lokal, seperti pada langkah berikutnya , atur beberapa variabel lingkungan tambahan dan gunakan Alat gcloud untuk disiapkan 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-langkah yang tepat tergantung pada platformnya.

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

      3. Pada IAM halaman konsol Google Cloud, memberikan Vertex AI User peran (roles/aiplatform.user) dengan identitas yang Anda gunakan untuk memanggil Vertex AI API.

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

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

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

    1. Pertama, buat perubahan kecil pada fungsi callMenuSuggestionFlow:

      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 yang berikut ini:

      'use client';

import { callMenuSuggestionFlow } from '@/app/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 callMenuSuggestionFlow(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>
  );
}

    3. Jalankan di lingkungan pengembangan Next.js:

      npm run dev

  6. Anda juga dapat menjalankan dan mempelajari alur Anda di UI Developer Genkit:

    genkit start