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

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

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

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 को अपने-आप कॉन्फ़िगर करना है या नहीं, तो yes की पुष्टि करें.
   • मॉडल की सेवा देने वाली उस कंपनी को चुनें जिसका आपको इस्तेमाल करना है.

   बचे हुए प्रॉम्प्ट के लिए, डिफ़ॉल्ट सेटिंग स्वीकार करें. 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 फ़ेडरेशन (सुझाया गया) या सेवा खाते की कुंजी का इस्तेमाल करें.

      3. IAM पर इस पेज पर जाकर, Vertex AI User को ऐक्सेस करने की अनुमति दें भूमिका (roles/aiplatform.user) को उस पहचान के लिए इस्तेमाल करें जिसका इस्तेमाल Vertex AI API.

         • Cloud Functions और Cloud Run पर, यह कंप्यूट सेवा का डिफ़ॉल्ट खाता.
         • Firebase ऐप्लिकेशन होस्टिंग पर, यह आपके ऐप्लिकेशन का है बैकएंड सेवा खाता.
         • अन्य प्लैटफ़ॉर्म पर, यह वही पहचान है जिसे आपने चरण पूरा करें.

   इस ट्यूटोरियल के लिए, आपको सिर्फ़ मॉडल सेवा देने वाली कंपनी, लेकिन आम तौर पर आपको हर सेवा के लिए कुछ ऐसा करना होगा इस्तेमाल करता है.

5. अगर आपने genkit init कमांड को सैंपल फ़्लो जनरेट करने की अनुमति दी ��ै, तो genkit.ts नाम की एक फ़ाइल बनाई है, जिसमें Genkit फ़्लो है जिसे सर्वर के तौर पर इस्तेमाल किया जा सकता है कार्रवाई. इसे आजमाएं:

   1. सबसे पहले, 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