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

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

المتطلّبات

الإصدار 20 من Node.js أو إصدار أحدث.

إجراء

1. ثبِّت واجهة سطر الأوامر Genkit من خلال تشغيل الأمر التالي:

   npm i -g genkit
   

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

   npx create-next-app@latest
   

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

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

   cd your-nextjs-project
   genkit init
   

   • اختَر Next.js كنظام أساسي للنشر.
   • اختَر مزوِّد النموذج الذي تريد استخدامه.

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

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 API، وذلك باستخدام Workload Identity Federation (يُنصَح به) أو مفتاح حساب خدمة.

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

         • في Cloud Functions وCloud Run، يمثّل هذا النوع حساب خدمة الحوسبة التلقائية.
         • في "استضافة التطبيقات في Firebase"، يكون النص حساب خدمة الخلفية لتطبيقك.
         • على الأنظمة الأساسية الأخرى، فهي الهوية التي أعددتها في الخطوة السابقة.

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

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 Developer:

   genkit start