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

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

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

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

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

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

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

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 प्रोजेक्ट इस्तेमाल के हिसाब से शुल्क चुकाने वाले (ब्लेज़) प्लान पर होना चाहिए. इसका मतलब है कि यह Cloud Billing खाते से लिंक होना चाहिए.

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

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

  1. Firebase कंसोल में जाकर, अपने प्लान को अपग्रेड करें को चुनें.
  2. Blaze प्लान चुनें. किसी क्लाउड बिलिंग खाते को अपने प्रोजेक्ट से लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
    अगर आपको इस अपग्रेड के दौरान कोई क्लाउड बिलिंग खाता बनाना पड़ा है, तो अपग्रेड पूरा करने के लिए, आपको Firebase कंसोल में अपग्रेड करने की प्रोसेस पर वापस जाना पड़ सकता है.

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

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

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

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

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

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

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

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

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

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

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

import { getAI, getTemplateGenerativeModel, VertexAIBackend } 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 VertexAIBackend() });

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

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

इससे, असली उपयोगकर्ताओं को "Appeasement Budget" के सीक्रेट नियम नहीं दिखते.

  1. Firebase कंसोल में, Vertex AI या प्रॉम्प्ट मैनेजमेंट सेक्शन पर जाएं.
  2. एक नया प्रॉम्प्ट टेंप्लेट बनाएं और उसका नाम product-agent रखें.
  3. मॉडल को gemini-2.5-flash पर सेट करें.
  4. इनपुट स्कीमा को ठीक इसी तरह से तय करें:
    input:
  schema:
    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
  5. रूट डायरेक्ट्री से agent-product.prompt के कॉन्टेंट को कॉपी करके, प्रॉम्प्ट और सिस्टम के लिए वैकल्पिक निर्देश फ़ील्ड में चिपकाएं. इससे मॉडल को सुरक्षित तरीके से यह निर्देश मिलता है कि उसे "Rugged Operator" के तौर पर कैसे काम करना है. साथ ही, इसमें प्रॉडक्ट कैटलॉग भी शामिल किया जाता है.
  6. Firebase कंसोल में, 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 का इस्तेमाल करना चाहिए. इससे यह पक्का किया जा सकता है कि सिर्फ़ आपका असली वेब ऐप्लिकेशन, Vertex AI जनरेटिव मॉडल को कॉल कर सकता है. साथ ही, इससे बॉट और बिना अनुमति वाले क्लाइंट को ब्लॉक किया जा सकता है.

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

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

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

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

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

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

  1. Firebase कंसोल पर जाएं.
  2. rugged-terrain-ai प्रोजेक्ट चुनें.
  3. प्रोजेक्ट की सेटिंग (गियर आइकॉन) पर जाएं.
  4. सबसे नीचे तक स्क्रोल करें और प्रोजेक्ट मिटाएं पर क्लिक करें.
  5. मिटाने की पुष्टि करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.

10. बधाई हो!

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

आपको क्या मिला:

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

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

  • Firebase App Check: एआई एंडपॉइंट को गलत इस्तेमाल से सुरक्षित रखें.