Menggunakan Genkit di aplikasi Next.js

Halaman ini menunjukkan cara menggunakan flow Genkit sebagai tindakan server di aplikasi Next.js.

Sebelum memulai

Anda harus memahami konsep alur Genkit, dan cara menulisnya.

Membuat project Next.js

Jika belum memiliki project Next.js yang ingin Anda tambahkan fitur AI generatif, Anda dapat membuatnya untuk mengikuti halaman ini:

npx create-next-app@latest

Menginstal dependensi Genkit

Instal dependensi Genkit ke aplikasi Next.js, dengan cara yang sama seperti untuk project Genkit apa pun:

  1. Instal library Genkit inti:

    npm i --save genkit

  2. Instal minimal satu plugin model.

    Misalnya, untuk menggunakan AI Google:

    npm i --save @genkit-ai/googleai

    Atau untuk menggunakan Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Jika tidak menginstal Genkit CLI secara global, Anda dapat menginstalnya sebagai dependensi pengembangan. Alat tsx juga direkomendasikan, karena membuat pengujian kode Anda lebih praktis. Namun, kedua dependensi ini bersifat opsional.

    npm i --save-dev genkit-cli tsx

Menentukan alur Genkit

Buat file baru di project Next.js untuk memuat alur Genkit Anda: misalnya, src/app/genkit.ts. File ini dapat berisi alur Anda tanpa perubahan; namun, karena Anda hanya dapat menjalankan alur dari backend server, Anda harus menambahkan perintah 'use server' ke bagian atas file.

Contoh:

'use server';

import { gemini15Flash, googleAI } from "@genkit-ai/googleai";
import { genkit, z } from "genkit";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini15Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate({
      model: gemini15Flash,
      prompt: `Invent a menu item for a ${restaurantTheme} themed restaurant.`,
    });
    return text;
  }
);

Memanggil flow

Sekarang, dalam kode frontend, Anda dapat mengimpor alur dan memanggilnya sebagai tindakan server.

Contoh:

'use client';

import { menuSuggestionFlow } from './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 menuSuggestionFlow(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>
  );
}

Menguji aplikasi secara lokal

Jika ingin menjalankan aplikasi secara lokal, Anda harus menyediakan kredensial untuk layanan API model yang Anda pilih.

Gemini (AI Google)

  1. Pastikan AI Google tersedia di region Anda.

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

  3. Tetapkan variabel lingkungan GOOGLE_GENAI_API_KEY ke kunci Anda:

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini (Vertex AI)

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

  2. Tetapkan beberapa variabel lingkungan 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

Kemudian, jalankan aplikasi secara lokal seperti biasa:

npm run dev

Semua alat pengembangan Genkit akan terus berfungsi seperti biasa. Misalnya, untuk memuat flow di UI developer:

npx genkit start -- npx tsx --watch src/app/genkit.ts

Men-deploy aplikasi

Saat men-deploy aplikasi, Anda harus memastikan kredensial untuk layanan eksternal apa pun yang Anda gunakan (seperti layanan API model yang Anda pilih) tersedia untuk aplikasi yang di-deploy. Lihat halaman berikut untuk mengetahui informasi khusus untuk platform deployment yang Anda pilih: