Firebase Genkit في تطبيقات Next.js

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

المتطلّبات

Node.js 20 أو أحدث.

الإجراء

1. ثبِّت Genkit CLI من خلال تشغيل الأمر التالي:

   npm i -g genkit
   

2. إذا لم يكن لديك تطبيق Next.js تريد استخدامه، يمكنك إنشاء تطبيق:

   npx create-next-app@latest
   

   حدّد TypeScript كلغة من اختيارك.

3. إعداد Genkit في مشروعك Next.js:

   cd your-nextjs-project
   genkit init
   

   • أكِّد نعم عندما يُطلَب منك ما إذا كنت تريد إعداد Genkit تلقائيًا لـ Next.js.
   • اختَر موفِّر الطراز الذي تريد استخدامه.

   اقبل الإعدادات التلقائية للطلبات المتبقية. ستنشئ أداة genkit بعض نماذج الملفات المصدر لتبدأ في تطوير مسارات الذكاء الاصطناعي (AI) الخاصة بك.

4. إتاحة بيانات اعتماد واجهة برمجة التطبيقات للدالة المنشورة نفِّذ أحد الإجراءات التالية بناءً على موفر النموذج الذي اخترته:

   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
      

   3. عند نشر تطبيقك، عليك تنفيذ ما يلي:

      1. اضبط المتغيّرات GCLOUD_PROJECT وGCLOUD_LOCATION في والبيئة المنشورة خطوات دقيقة تعتمد على نظام التشغيل.

      2. إذا لم يكن يتم النشر في بيئة Firebase أو Google Cloud، لإعداد التفويض لواجهة برمجة تطبيقات Vertex AI، باستخدام Workload Identity Federation (يُنصح به) أو مفتاح حساب الخدمة.

      3. في إدارة الهوية وإمكانية الوصول في وحدة التحكّم في Google Cloud، امنح مستخدم Vertex AI الدور (roles/aiplatform.user) إلى الهوية التي تستخدمها لاستدعاء Vertex AI API

         • في دوال السحابة وتشغيل السحابة الإلكترونية، يكون هذا حساب خدمة Compute Engine التلقائي
         • في منصّة Firebase App Hosting، إنّ لحساب خدمة الخلفية.
         • وعلى الأنظمة الأساسية الأخرى، إنها الهوية التي أعددتها في .

   السر الوحيد الذي تحتاج إلى إعداده لهذا البرنامج التعليمي هو النموذج المستخدم، ولكن عليك بشكل عام تنفيذ إجراء مماثل لكل خدمة التي يستخدمها التدفق.

5. إذا سمحت للأمر genkit init بإنشاء نموذج تدفق، لن تم إنشاء ملف genkit.ts، به مسار Genkit يمكنك استخدامه كخادم اتخاذ القرار. جرّب هذه الميزة:

   1. أولاً، عليك إجراء تغيير بسيط على الدالة tbe callMenuSuggestionFlow:

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

   2. يمكنك الوصول إلى هذه الوظيفة كإجراء للخادم. على سبيل المثال، يُرجى استبدال محتوى page.tsx بما يلي:

      '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. شغّله في بيئة تطوير Next.js:

      npm run dev
      

6. يمكنك أيضًا تشغيل التدفقات واستكشافها في واجهة مستخدم مطوّري Genkit:

   genkit start