שימוש ב-Genkit באפליקציית Next.js

בדף הזה נסביר איך להשתמש בתהליכי Genkit כפעולות שרת באפליקציות Next.js.

לפני שמתחילים

כדאי שתכירו את המושג flows ב-Genkit ואת האופן שבו כותבים אותם.

יצירת פרויקט Next.js

אם עדיין אין לכם פרויקט Next.js שאליו אתם רוצים להוסיף תכונות של AI גנרטיבי, תוכלו ליצור פרויקט חדש כדי לעקוב אחרי ההוראות בדף הזה:

npx create-next-app@latest

התקנת יחסי התלות של Genkit

מתקינים את יחסי התלות של Genkit באפליקציית Next.js, בדיוק כמו בכל פרויקט Genkit:

  1. מתקינים את ספריית הליבה של Genkit:

    npm i --save genkit

  2. מתקינים לפחות פלאגין אחד של מודל.

    לדוגמה, כדי להשתמש ב-AI מבית Google:

    npm i --save @genkit-ai/googleai

    לחלופין, כדי להשתמש ב-Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. אם לא התקנתם את ה-CLI של Genkit ברמת המערכת, תוכלו להתקין אותו כיחסי תלות לפיתוח. מומלץ גם להשתמש בכלי tsx, כי הוא מאפשר לבדוק את הקוד בצורה נוחה יותר. עם זאת, שתי יחסי התלות האלה הם אופציונליים.

    npm i --save-dev genkit-cli tsx

הגדרת תהליכים של Genkit

יוצרים קובץ חדש בפרויקט Next.js שיכיל את תהליכי העבודה של Genkit: לדוגמה, src/app/genkit.ts. הקובץ הזה יכול להכיל את הפלואוז ללא שינוי. עם זאת, מכיוון שאפשר להריץ פלואוז רק מצד העורפי של השרת, צריך להוסיף את ההנחיה 'use server' לחלק העליון של הקובץ.

לדוגמה:

'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;
  }
);

קריאה לזרמים

עכשיו, בקוד הקצה הקדמי, אפשר לייבא את התהליכים ולקרוא להם כפעולות שרת.

לדוגמה:

'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>
  );
}

בדיקת האפליקציה באופן מקומי

אם רוצים להריץ את האפליקציה באופן מקומי, צריך להפוך את פרטי הכניסה לשירות ה-API של המודל שבחרתם לזמינים.

Gemini (AI מבית Google)

  1. מוודאים ש-Google AI זמין באזור שלכם.

  2. יוצרים מפתח API ל-Gemini API באמצעות Google AI Studio.

  3. מגדירים את משתנה הסביבה GOOGLE_GENAI_API_KEY למפתח:

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini‏ (Vertex AI)

  1. במסוף Cloud, מפעילים את Vertex AI API בפרויקט.

  2. מגדירים כמה משתני סביבה ומשתמשים בכלי gcloud כדי להגדיר את פרטי הכניסה שמוגדרים כברירת מחדל לאפליקציה:

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

לאחר מכן, מריצים את האפליקציה באופן מקומי כרגיל:

npm run dev

כל כלי הפיתוח של Genkit ממשיכים לפעול כרגיל. לדוגמה, כדי לטעון את התהליכים בממשק המשתמש למפתחים:

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

פריסה של האפליקציה

כשפורסים את האפליקציה, צריך לוודא שהפרטים האישיים של כל השירותים החיצוניים שבהם אתם משתמשים (כמו שירות ה-API של המודל שבחרתם) זמינים לאפליקציה הפרוסה. בדפים הבאים מפורט מידע ספציפי לפלטפורמת הפריסה שבחרתם: