Next.js ऐप्लिकेशन में Firebase Genkit

आपके पास अपने Next.js ऐप्लिकेशन में, सर्वर ऐक्शन के तौर पर Firebase Genkit फ़्लो का इस्तेमाल करने का विकल्प होता है. इस पेज के बाकी हिस्से में इसे करने का तरीका बताया गया है.

ज़रूरी शर्तें

Node.js 20 या उसके बाद का वर्शन.

काम का तरीका

1. इस कमांड की मदद से, Genkit CLI इंस्टॉल करें:

   npm i -g genkit
   

2. अगर आपके पास पहले से कोई Next.js ऐप्लिकेशन नहीं है, तो उसे बनाएं:

   npx create-next-app@latest
   

   अपनी पसंदीदा भाषा के रूप में TypeScript चुनें.

3. अपने Next.js प्रोजेक्ट में Genkit को शुरू करें:

   cd your-nextjs-project
   genkit init
   

   • डिप्लॉयमेंट प्लैटफ़ॉर्म के तौर पर Next.js चुनें.
   • वह मॉडल प्रोवाइडर चुनें जिसका आपको इस्तेमाल करना है.

   बाकी बचे प्रॉम्प्ट के लिए, डिफ़ॉल्ट सेटिंग स्वीकार करें. genkit टूल कुछ सैंपल सोर्स फ़ाइलें बनाएगा, ताकि आप अपने एआई फ़्लो डेवलप करना शुरू कर सकें.

4. अपने डिप्लॉय किए गए फ़ंक्शन के लिए, एपीआई क्रेडेंशियल उपलब्ध कराएं. आपने मॉडल प्रोवाइडर को जो चुना है उसके हिसाब से, इनमें से कोई एक काम करें:

   Gemini (Google का एआई)

   1. पक्का करें कि Google का एआई आपके इलाके में उपलब्ध हो.

   2. Google AI Studio का इस्तेमाल करके, Gemini API के लिए एपीआई पासकोड जनरेट करें.

   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 Console के IAM पेज पर, Vertex AI User की भूमिका (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 डेवलपर यूज़र इंटरफ़ेस (यूआई) में जाकर भी, अपने फ़्लो चलाए और उसके बारे में जाना जा सकता है:

   genkit start