استخدام Genkit في تطبيق Next.js

توضِّح هذه الصفحة كيفية استخدام مسارات Genkit كإجراءات خادم في تطبيقات Next.js.

قبل البدء

يجب أن تكون على دراية بمفهوم عمليات التنقّل في Genkit وكيفية كتابة هذه العمليات.

إنشاء مشروع Next.js

إذا لم يكن لديك مشروع Next.js تريد إضافة ميزات الذكاء الاصطناعي التوليدي إليه، يمكنك إنشاء مشروع لهذا الغرض من أجل اتّباع الخطوات الواردة في هذه الصفحة:

npx create-next-app@latest

تثبيت تبعيات Genkit

ثبِّت تبعيات Genkit في تطبيق Next.js بالطريقة نفسها التي تُثبِّت بها تبعيات أي مشروع Genkit:

  1. ثبِّت مكتبة Genkit الأساسية:

    npm i --save genkit

  2. ثبِّت مكوّنًا إضافيًا واحدًا على الأقل لنموذج.

    على سبيل المثال، لاستخدام تكنولوجيات الذكاء الاصطناعي من Google:

    npm i --save @genkit-ai/googleai

    لاستخدام Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. إذا لم يتم تثبيت Genkit CLI بشكل عام، يمكنك تثبيته كأحد ملفّات الاعتماد اللازمة لتطوير التطبيقات. ننصح أيضًا باستخدام أداة 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>
  );
}

اختبار تطبيقك على الجهاز

إذا كنت تريد تشغيل تطبيقك على الجهاز، عليك إتاحة بيانات الاعتماد لخدمة واجهة برمجة التطبيقات التي اخترتها.

Gemini (تكنولوجيات الذكاء الاصطناعي من Google)

  1. تأكَّد من أنّ تكنولوجيات الذكاء الاصطناعي من Google متوفّرة في منطقتك.

  2. أنشئ مفتاح واجهة برمجة تطبيقات لواجهة برمجة التطبيقات Gemini API باستخدام Google AI Studio.

  3. اضبط متغيّر البيئة GOOGLE_GENAI_API_KEY على مفتاحك:

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini (Vertex AI)

  1. في Cloud Console، فعِّل واجهة برمجة التطبيقات 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

نشر تطبيقك

عند نشر تطبيقك، عليك التأكّد من توفّر بيانات الاعتماد لأي خدمات خارجية تستخدمها (مثل خدمة واجهة برمجة التطبيقات التي اخترتها لعرض النماذج) للتطبيق المنشور. اطّلِع على الصفحات التالية للحصول على معلومات خاصة بمنصّة النشر التي اخترتها: