Firebase AI Logic का इस्तेमाल करके, एआई की मदद से काम करने वाला ग्राहक सहायता एजेंट बनाना

1. शुरुआती जानकारी

इस कोडलैब में, आपको रग्ड टेरेन गाइड नाम के आउटडोर गियर ई-कॉमर्स स्टोर में, स्मार्ट कस्टमर सपोर्ट चैट विजेट जोड़ना होगा. इस एजेंट को बनाने के लिए, आपको Firebase AI Logic का इस्तेमाल करना होगा. साथ ही, आपको सर्वर-साइड प्रॉम्प्ट टेंप्लेट (product-agent) को कॉन्फ़िगर करने का तरीका भी सीखना होगा. यह टेंप्लेट, एआई के पर्सोना, बजट के सख्त नियमों को मैनेज करता है. साथ ही, प्रॉडक्ट कैटलॉग को कॉन्टेक्स्ट के तौर पर डाइनैमिक तरीके से इस्तेमाल करता है.

आपको क्या करना होगा:

  • इस कोडलैब के वेब ऐप्लिकेशन के लिए, स्टार्टर कोड पाना.
  • Firebase प्रोजेक्ट सेट अप करना.
  • किसी वेब ऐप्लिकेशन में Firebase AI Logic जैसी Firebase सेवाओं को सेट अप और शुरू करना.
  • Firebase कंसोल में, सर्वर-साइड प्रॉम्प्ट टेंप्लेट कॉन्फ़िगर करना.
  • React जैसे TypeScript फ़्रंटएंड से, जनरेटिव एआई सेवा को कॉल करके टेंप्लेट को ऐक्सेस करना.

आपको क्या चाहिए:

  • Chrome जैसा कोई वेब ब्राउज़र.
  • TypeScript और Node.js की बुनियादी जानकारी.
  • अपनी पसंद का आईडीई या टेक्स्ट एडिटर. Antigravity एक अच्छा विकल्प है.

2. स्टार्टर कोड पाना

  1. अपने टर्मिनल में, स्टार्टर रिपॉज़िटरी क्लोन करें:
    git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
  2. कोड डायरेक्ट्री पर जाएं और डिपेंडेंसी इंस्टॉल करें:
    cd devrel-demos/codelabs/firebase-server-prompt-templates-codelab
npm install

3. Firebase प्रोजेक्ट सेट अप करना

Firebase प्रोजेक्ट बनाना

  1. अपने Google खाते का इस्तेमाल करके, Firebase कंसोल में साइन इन करें.
  2. नया प्रोजेक्ट बनाने के लिए बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. जैसे, rugged-terrain-ai.
  3. जारी रखें पर क्लिक करें.
  4. अगर आपसे अनुरोध किया जाता है, तो Firebase की शर्तें देखें और उन्हें स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
  5. (ज़रूरी नहीं) Firebase कंसोल में, एआई की मदद से काम करने की सुविधा चालू करें. इसे "Firebase में Gemini" कहा जाता है.
  6. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल ऑफ़ करें.
  7. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, अपने प्रोजेक्ट के लिए ज़रूरी संसाधन उपलब्ध होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.

Firebase के लिए कीमत तय करने वाले प्लान को अपग्रेड करना

इस कोडलैब में Firebase की सेवाओं का इस्तेमाल करने के लिए, आपका Firebase प्रोजेक्ट, इस्तेमाल के हिसाब से पैसे चुकाने वाले (Blaze) प्लान पर होना चाहिए. इसका मतलब है कि यह किसी क्लाउड बिलिंग खाते से लिंक होना चाहिए.

  • क्लाउड बिलिंग खाते के लिए, क्रेडिट कार्ड जैसे किसी पेमेंट मेथड की ज़रूरत होती है.
  • खास प्रमोशन के दौरान या किसी इवेंट के हिस्से के तौर पर इस कोडलैब को करने पर, Google Cloud के क्रेडिट उपलब्ध हो सकते हैं.
  • अगर आपने Firebase और Google Cloud का इस्तेमाल पहली बार किया है, तो देखें कि क्या आपके पास 300 डॉलर का क्रेडिट और मुफ़्त में आज़माने के लिए Cloud बिलिंग खाता पाने की ज़रूरी शर्तें पूरी होती हैं.

अपने प्रोजेक्ट को Blaze प्लान में अपग्रेड करने के लिए, यह तरीका अपनाएं:

  1. Firebase कंसोल में, अपना प्लान अपग्रेड करने के लिए चुनें.
  2. Blaze प्लान चुनें. अपने प्रोजेक्ट को क्लाउड बिलिंग खाते से लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
    • अगर इस कोडलैब के लिए, Google Cloud के क्रेडिट का इस्तेमाल किया जा रहा है, तो बिलिंग खाते को Google Cloud Platform Trial Billing Account या My Billing Account कहा जा सकता है.
    • अगर इस अपग्रेड के हिस्से के तौर पर, आपको Cloud बिलिंग खाता बनाना पड़ा है, तो अपग्रेड पूरा करने के लिए, आपको Firebase कंसोल में अपग्रेड फ़्लो पर वापस जाना पड़ सकता है.

4. Firebase की सेवाएं सेट अप करना और अपने ऐप्लिकेशन को कनेक्ट करना

इस कोडलैब के लिए, आपको अपने Firebase प्रोजेक्ट में Firebase के लिए Cloud Storage और Firebase AI Logic सेट अप करना होगा. आपको अपने ऐप्लिकेशन के सोर्स कोड को अपने Firebase प्रोजेक्ट से भी कनेक्ट करना होगा.

Firebase के लिए Cloud Storage सेट अप करना

यह कोडलैब, प्रॉडक्ट की जानकारी सेव करने के लिए, Firebase के लिए Cloud Storage का इस्तेमाल करता है.

  1. Firebase कंसोल में, डेटाबेस और स्टोरेज > स्टोरेज पर जाएं.
  2. शुरू करें पर क्लिक करें.
  3. डिफ़ॉल्ट स्टोरेज बकेट के लिए कोई जगह चुनें.
    US-WEST1, US-CENTRAL1, और US-EAST1 में मौजूद बकेट, Google Cloud Storage के लिए "हमेशा मुफ़्त" टियर का फ़ायदा उठा सकती हैं. अन्य सभी जगहों पर मौजूद बकेट के लिए, Google Cloud Storage की कीमत और इस्तेमाल के नियम लागू होते हैं.
  4. प्रोडक्शन मोड पर क्लिक करें. ठीक नीचे दिए गए चरणों में, आपको इन सुरक्षा नियमों को इस कोडलैब के हिसाब से अपडेट करना होगा.
  5. बनाएं पर क्लिक करें.
  6. अपने सुरक्षा नियम अपडेट करें:
    1. बकेट के लिए ज़रूरी संसाधन उपलब्ध होने के बाद, नियम टैब पर जाएं.
    2. यहां दिए गए नियमों को कॉपी करें और फिर चिपकाएं:
      rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /products.txt {
      allow read;
    }
  }
}
    3. पब्लिश करें पर क्लिक करें.
  7. स्टार्टर कोड से, प्रॉडक्ट की जानकारी अपलोड करें:
    1. अपनी स्टोरेज बकेट के लिए, फ़ाइलें टैब पर क्लिक करें.
    2. **फ़ाइल अपलोड करें** पर क्लिक करें. इसके बाद, स्टार्टर कोड से products.txt फ़ाइल अपलोड करें. यह फ़ाइल यहां मौजूद है: src/data/products.txt.

Firebase AI Logic कॉन्फ़िगर करना

Firebase AI Logic, Firebase की मुख्य सेवा है. इस कोडलैब में आपको इसका इस्तेमाल करना होगा.

  1. Firebase कंसोल में, एआई सेवाएं > एआई लॉजिक पर जाएं.
  2. शुरू करें पर क्लिक करें.
  3. एजेंट प्लैटफ़ॉर्म Gemini API कार्ड पर, इस एपीआई का इस्तेमाल शुरू करें पर क्लिक करें और स्क्रीन पर दिए गए निर्देशों का पालन करें. इस फ़्लो से, आपके लिए ज़रूरी एपीआई चालू हो जाएंगे. इसके बाद, एजेंट प्लैटफ़ॉर्म Gemini API के साथ Firebase AI Logic का इस्तेमाल किया जा सकेगा.
  4. (ज़रूरी नहीं) एआई मॉनिटरिंग चालू करें को चुनें, ताकि ऐप्लिकेशन के लेवल पर अलग-अलग मेट्रिक और इस्तेमाल के आंकड़े देखे जा सकें. इससे, Firebase AI Logic के ज़रिए किए गए अनुरोधों के बारे में पूरी जानकारी मिल सकती है.

अपने कोड को Firebase प्रोजेक्ट से कनेक्ट करना

Firebase AI Logic सेट अप करने के दौरान, आपसे Firebase वेब ऐप्लिकेशन बनाने और अपने सोर्स कोड में कॉन्फ़िगरेशन जोड़ने के लिए कहा जाएगा.

  1. Firebase AI Logic के सेटअप फ़्लो में, अनुरोध किए जाने पर, नया वेब ऐप्लिकेशन रजिस्टर करने के लिए, वेब () आइकॉन पर क्लिक करें.
  2. ऐप्लिकेशन को नाम दें. जैसे, Rugged Web.
  3. सेटअप के निर्देशों से, firebaseConfig ऑब्जेक्ट को कॉपी करें.

इसके बाद, स्टार्टर कोड अपडेट करें:

  1. अपने कोड एडिटर में, src/firebase.ts खोलें.
  2. मौजूदा firebaseConfig की जगह, वह ऑब्जेक्ट डालें जिसे आपने Firebase कंसोल से कॉपी किया है.

आपकी फ़ाइल ऐसी दिखनी चाहिए:

import { getAI, getTemplateGenerativeModel, AgentPlatformBackend } from "firebase/ai";
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

const ai = getAI(app, { backend: new AgentPlatformBackend() });

5. सर्वर-साइड प्रॉम्प्ट टेंप्लेट बनाना

क्लाइंट ऐप्लिकेशन में, एआई के मुश्किल प्रॉम्प्ट को हार्डकोड करने के बजाय, आपको सर्वर पर निर्देशों को सुरक्षित तरीके से मैनेज करने के लिए, Dotprompt सिंटैक्स का इस्तेमाल करना होगा.

इससे, एंड-यूज़र को "बजट के रियायती नियम" नहीं दिखेंगे.

  1. Firebase कंसोल में, एआई सेवाएं > एआई लॉजिक > प्रॉम्प्ट टेंप्लेट टैब पर जाएं.
  2. **टेंप्लेट बनाएं** पर क्लिक करें और **खाली टेंप्लेट** चुनें.
  3. टेंप्लेट का नाम Product Agent और आईडी product-agent सेट करें.
  4. मॉडल को gemini-3.1-flash-lite (या उपलब्ध सबसे नए वर्शन) पर सेट करें.
  5. इस कोडलैब के लिए दिए गए स्टार्टर कोड से, product-agent.prompt का कॉन्टेंट कॉपी करें. यह फ़ाइल, रूट डायरेक्ट्री में मौजूद है. इसके बाद, इस कॉन्टेंट को Firebase कंसोल में, सर्वर प्रॉम्प्ट टेंप्लेट के प्रॉम्प्ट और (ज़रूरी नहीं) सिस्टम के निर्देश फ़ील्ड में चिपकाएं. इस कॉन्टेंट से, मॉडल को सुरक्षित तरीके से निर्देश मिलते हैं कि उसे "हर स्थिति में काम करने वाला ऑपरेटर" के तौर पर कैसे काम करना है और प्रॉडक्ट कैटलॉग को कैसे रेफ़र करना है.
  6. टेस्ट इनपुट फ़ील्ड में, इनपुट स्कीमा को ठीक इस तरह से तय करें:
    {
  "type": "object",
  "required": [
    "query"
  ],
  "properties": {
    "query": {
      "type": "string",
      "description": "the customers ask of the robot"
    },
    "productId": {
      "type": "string",
      "description": "the product the customer is looking at right now"
    },
    "history": {
      "type": "array",
      "description": "list of previous history between the user and system",
      "items": {
        "type": "object",
        "required": [
          "role",
          "contents"
        ],
        "properties": {
          "role": {
            "type": "string"
          },
          "contents": {
            "type": "string"
          }
        }
      }
    }
  }
}
  7. product-agent टेंप्लेट को सेव और पब्लिश करने के लिए, टेंप्लेट सेव करें पर क्लिक करें.

6. एआई मॉडल को कॉल करना

अब टेंप्लेट को सर्वर पर सुरक्षित तरीके से तय कर दिया गया है. अब आपको इसे अपने ऐप्लिकेशन के फ़्रंटएंड से कॉल करना है.

  1. अपने कोड एडिटर में, src/firebase.ts पर वापस जाएं.
  2. शुरू करने के बाद, टेंप्लेट से कनेक्ट करने के लिए, getTemplateGenerativeModel का इस्तेमाल करें:
    const model = getTemplateGenerativeModel(ai);

export const callCustomerSupportModel = async (query: string, productId?: string, history?: { role: string, contents: string }[]) => {
    // Generate content using the published 'product-agent' template
    const result = await model.generateContent('product-agent', {
        query,
        productId,
        history,
    });
    return result.response.text();
}

7. Firebase App Check की मदद से, एजेंट को सुरक्षित करना

एआई मॉडल बहुत काम के होते हैं. हालांकि, अगर सार्वजनिक एंडपॉइंट को सुरक्षित नहीं किया जाता है, तो उनका गलत इस्तेमाल भी किया जा सकता है. आपको हमेशा Firebase App Check का इस्तेमाल करना चाहिए, ताकि यह पक्का किया जा सके कि Gemini API को सिर्फ़ आपका असली वेब ऐप्लिकेशन ही अनुरोध भेज सके. इससे, बॉट और बिना अनुमति वाले क्लाइंट को ब्लॉक किया जा सकता है.

  1. Google Cloud Console में, सुरक्षा > धोखाधड़ी से बचाव पर जाएं
  2. कुंजी बनाएं पर क्लिक करें और फ़ील्ड भरें:
    • डिसप्ले नेम: Codelab Key
    • ऐप्लिकेशन का टाइप: वेब
    • डोमेन की सूची: localhost और 127.0.0.1 जोड़ें, ताकि आपके लोकल Vite सर्वर को अनुरोध भेजने की अनुमति मिल सके.
  3. कुंजी रजिस्टर करने के लिए, कुंजी बनाएं पर क्लिक करें.
  4. धोखाधड़ी से बचाव के लिए कुंजी की ज़्यादा जानकारी वाले पेज पर सबसे ऊपर, साइट कुंजी आईडी को क्लिपबोर्ड पर कॉपी करें.
  5. Firebase कंसोल में, सुरक्षा > App Check पर जाएं.
  6. ऐप्लिकेशन टैब पर क्लिक करें, अपना वेब ऐप्लिकेशन (Rugged Web) बड़ा करें, और reCAPTCHA Enterprise प्रोवाइडर पर क्लिक करें.
  7. reCAPTCHA Enterprise साइट कुंजी फ़ील्ड में, धोखाधड़ी से बचाव के लिए कुंजी की ज़्यादा जानकारी वाले पेज से साइट कुंजी आईडी चिपकाएं और सेव करें पर क्लिक करें.
  8. अपने कोड एडिटर में, src/firebase.ts को फिर से खोलें.
  9. सबसे ऊपर, ये इंपोर्ट जोड़ें:
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  10. initializeApp(firebaseConfig) कॉल के ठीक बाद, App Check को शुरू करने की प्रोसेस जोड़ें. इसके बाद, कॉपी किया गया साइट कुंजी आईडी चिपकाएं:
    // Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
  isTokenAutoRefreshEnabled: true
});
  11. इन टोकन का इस्तेमाल करने के लिए, getAI() फ़ंक्शन कॉल अपडेट करें. यह बदलाव करें:
    const ai = getAI(app, { backend: new AgentPlatformBackend(), useLimitedUseAppCheckTokens: true });
    useLimitedUseAppCheckTokens की वैल्यू को 'सही' पर सेट करने से, यह पक्का होता है कि कम समय के लिए मान्य टोकन लागू किए जाएं. इससे, आपके बैकएंड के गलत इस्तेमाल को सीमित करने में मदद मिलती है.

8. ऐप्लिकेशन चलाना

Firebase का कॉन्फ़िगरेशन सेट अप हो गया है और सहायता चैट विजेट कनेक्ट हो गया है. अब ऐप्लिकेशन चलाने का समय आ गया है.

  1. अपने टर्मिनल में, Vite डेवलपमेंट सर्वर चलाएं:
    npm run dev
  2. दिए गए लोकल यूआरएल को खोलें. आम तौर पर, यह http://localhost:5173/ होता है.
  3. सबसे नीचे दाएं कोने में मौजूद, टैक्टिकल सपोर्ट फ़्लोटिंग ऐक्शन बटन (एफ़एबी) पर क्लिक करें.
  4. प्रॉडक्ट के बारे में सवाल पूछकर देखें. उदाहरण के लिए:
    • "मुझे हर मौसम में पहनने लायक जैकेट चाहिए"
    • "मेरी सब-ज़ीरो बीनी खराब है. मैं क्या कर सकती हूं?"
    • एआई के "बजट के रियायती नियम" लॉजिक को ट्रिगर करने के लिए, बार-बार सवाल पूछें!

9. (ज़रूरी नहीं) कोडलैब से संसाधन हटाना

Google Cloud के बिलिंग खाते पर शुल्क लगने से बचने के लिए, इस कोडलैब के दौरान बनाए गए संसाधन मिटाए जा सकते हैं.

  1. Firebase कंसोल में, सेटिंग > सामान्य टैब पर जाएं.
  2. पक्का करें कि आपने जिस प्रोजेक्ट को देखा है वह वही प्रोजेक्ट है जिसका इस्तेमाल आपने इस कोडलैब के लिए किया था. अगर यह आपके कोडलैब का प्रोजेक्ट नहीं है, तो प्रोजेक्ट बदलने के लिए, सबसे ऊपर बाएं कोने में मौजूद प्रोजेक्ट पिकर ड्रॉपडाउन का इस्तेमाल किया जा सकता है.
  3. पेज पर सबसे नीचे जाएं. इसके बाद, प्रोजेक्ट मिटाएं पर क्लिक करें.
  4. मिटाने की पुष्टि करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.

10. बधाई हो!

🎊 मिशन पूरा हुआ! आपने टेंप्लेट पर आधारित, एआई की मदद से काम करने वाला एक मज़बूत कस्टमर सपोर्ट एजेंट इंटिग्रेट कर लिया है.

आपने क्या किया:

  • क्लाइंट ऐप्लिकेशन पर, Firebase और एजेंट प्लैटफ़ॉर्म बैकएंड को शुरू किया.
  • एजेंट के मुश्किल व्यवहार को तय करने के लिए, Handlebars और सख्त इनपुट स्कीमा का इस्तेमाल करके, सर्वर-साइड प्रॉम्प्ट टेंप्लेट को सुरक्षित तरीके से कॉन्फ़िगर किया.
  • क्लाइंट को इंटरनल प्रॉम्प्ट लॉजिक दिखाए बिना, चैट इतिहास और कॉन्टेक्चुअल प्रॉडक्ट आईडी को सुरक्षित तरीके से पास करके, एलएलएम को डाइनैमिक तरीके से कॉल किया.

आगे क्या करना है?

  • Firebase App Check: एआई एंडपॉइंट को गलत इस्तेमाल से बचाएं.