Firebase AI Logic ব্যবহার করে একটি এআই-চালিত কাস্টমার সাপোর্ট এজেন্ট তৈরি করুন

১. ভূমিকা

এই কোডল্যাবে, আপনি 'Rugged Terrain Guide' নামক একটি আউটডোর গিয়ার ই-কমার্স শপে একটি স্মার্ট কাস্টমার সাপোর্ট চ্যাট উইজেট যুক্ত করবেন। এই এজেন্টটি তৈরি করতে আপনি Firebase AI Logic ব্যবহার করবেন এবং শিখবেন কীভাবে একটি সার্ভার-সাইড প্রম্পট টেমপ্লেট ( product-agent ) কনফিগার করতে হয়, যা এআই-এর পার্সোনা, কঠোর আপোসমেন্ট বাজেট নিয়মাবলী পরিচালনা করে এবং ডাইনামিকভাবে প্রোডাক্ট ক্যাটালগকে কনটেক্সট হিসেবে ব্যবহার করে।

আপনাকে যা করতে হবে:

  • এই কোডল্যাবের ওয়েব অ্যাপটির জন্য স্টার্টার কোডটি নিন।
  • একটি ফায়ারবেস প্রজেক্ট সেট আপ করুন।
  • একটি ওয়েব অ্যাপে ফায়ারবেস সার্ভিসগুলো (যেমন ফায়ারবেস এআই লজিক) সেট আপ এবং ইনিশিয়ালাইজ করুন।
  • ফায়ারবেস কনসোলে একটি সার্ভার-সাইড প্রম্পট টেমপ্লেট কনফিগার করুন।
  • React-সদৃশ TypeScript ফ্রন্টএন্ড থেকে জেনারেটিভ এআই সার্ভিসে কল করার মাধ্যমে টেমপ্লেটটি অ্যাক্সেস করুন।

আপনার যা যা লাগবে:

  • ক্রোমের মতো একটি ওয়েব ব্রাউজার।
  • টাইপস্ক্রিপ্ট এবং নোড.জেএস সম্পর্কে প্রাথমিক ধারণা।
  • আপনার পছন্দের একটি IDE বা টেক্সট এডিটর। Antigravity একটি ভালো পছন্দ।

২. স্টার্টার কোডটি নিন

  1. আপনার টার্মিনালে, স্টার্টার রিপোজিটরিটি ক্লোন করুন: 
    git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
  2. কোড ডিরেক্টরিতে যান এবং ডিপেন্ডেন্সিগুলো ইনস্টল করুন: 
    cd devrel-demos/codelabs/firebase-server-prompt-templates-codelab
npm install

৩. একটি ফায়ারবেস প্রজেক্ট সেট আপ করুন।

একটি ফায়ারবেস প্রজেক্ট তৈরি করুন

  1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
  2. নতুন প্রজেক্ট তৈরি করতে বাটনটিতে ক্লিক করুন এবং তারপর একটি প্রজেক্টের নাম লিখুন (উদাহরণস্বরূপ, rugged-terrain-ai )।
  3. চালিয়ে যান-এ ক্লিক করুন।
  4. অনুরোধ করা হলে, Firebase-এর শর্তাবলী পর্যালোচনা করে গ্রহণ করুন এবং তারপর 'চালিয়ে যান' (Continue ) বোতামে ক্লিক করুন।
  5. (ঐচ্ছিক) Firebase কনসোলে AI সহায়তা সক্রিয় করুন (Firebase-এ এটিকে "Gemini" বলা হয়)।
  6. এই কোডল্যাবের জন্য আপনার গুগল অ্যানালিটিক্স-এর প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স অপশনটি বন্ধ করে দিন ।
  7. Create project-এ ক্লিক করুন, আপনার প্রজেক্টটি প্রস্তুত হওয়া পর্যন্ত অপেক্ষা করুন, এবং তারপর Continue-তে ক্লিক করুন।

আপনার ফায়ারবেস প্রাইসিং প্ল্যান আপগ্রেড করুন

এই কোডল্যাবে ফায়ারবেস পরিষেবাগুলি ব্যবহার করার জন্য, আপনার ফায়ারবেস প্রজেক্টটিকে পে-অ্যাজ-ইউ-গো (ব্লেজ) প্রাইসিং প্ল্যানে থাকতে হবে, যার অর্থ এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

  • ক্লাউড বিলিং অ্যাকাউন্টের জন্য ক্রেডিট কার্ডের মতো একটি পেমেন্ট পদ্ধতি প্রয়োজন।
  • বিশেষ প্রচারণার সময় অথবা কোনো ইভেন্টের অংশ হিসেবে এই কোডল্যাবটি করলে, গুগল ক্লাউড ক্রেডিট পাওয়া যেতে পারে।
  • আপনি যদি Firebase এবং Google Cloud-এ নতুন হন, তাহলে যাচাই করে দেখুন আপনি $300 ক্রেডিট এবং একটি ফ্রি ট্রায়াল ক্লাউড বিলিং অ্যাকাউন্টের জন্য যোগ্য কিনা।

আপনার প্রজেক্টটি ব্লেজ প্ল্যানে আপগ্রেড করতে, এই ধাপগুলো অনুসরণ করুন:

  1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
  2. ব্লেজ প্ল্যানটি নির্বাচন করুন। আপনার প্রোজেক্টের সাথে একটি ক্লাউড বিলিং অ্যাকাউন্ট লিঙ্ক করতে স্ক্রিনে দেওয়া নির্দেশাবলী অনুসরণ করুন।
    • আপনি যদি এই কোডল্যাবের জন্য গুগল ক্লাউড ক্রেডিট ব্যবহার করে থাকেন, তাহলে বিলিং অ্যাকাউন্টটির নাম সম্ভবত Google Cloud Platform Trial Billing Account বা My Billing Account হবে।
    • এই আপগ্রেডের অংশ হিসেবে যদি আপনার একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়ে থাকে, তাহলে আপগ্রেডটি সম্পন্ন করার জন্য আপনাকে ফায়ারবেস কনসোলের আপগ্রেড ফ্লো-তে ফিরে যেতে হতে পারে।

৪. ফায়ারবেস পরিষেবাগুলি সেট আপ করুন এবং আপনার অ্যাপ সংযুক্ত করুন

এই কোডল্যাবের জন্য, আপনাকে আপনার ফায়ারবেস প্রজেক্টে ক্লাউড স্টোরেজ ফর ফায়ারবেস এবং ফায়ারবেস এআই লজিক সেট আপ করতে হবে। এছাড়াও, আপনাকে আপনার অ্যাপের সোর্স কোড আপনার ফায়ারবেস প্রজেক্টের সাথে সংযুক্ত করতে হবে।

ফায়ারবেসের জন্য ক্লাউড স্টোরেজ সেট আপ করুন

এই কোডল্যাবে পণ্যের বিবরণ সংরক্ষণের জন্য ফায়ারবেসের ক্লাউড স্টোরেজ ব্যবহার করা হয়েছে।

  1. Firebase কনসোলে, Databases & Storage > Storage- এ যান।
  2. শুরু করতে ক্লিক করুন।
  3. আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি অবস্থান নির্বাচন করুন।
    US-WEST1 , US-CENTRAL1 , এবং US-EAST1 এর বাকেটগুলো গুগল ক্লাউড স্টোরেজের 'অলওয়েজ ফ্রি' টায়ারের সুবিধা নিতে পারবে। অন্য সব অবস্থানের বাকেটগুলো গুগল ক্লাউড স্টোরেজের মূল্য এবং ব্যবহারবিধি অনুসরণ করবে।
  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 সার্ভিসটি ব্যবহার করবেন।

  1. Firebase কনসোলে, AI Services > AI Logic- এ যান।
  2. শুরু করতে ক্লিক করুন।
  3. এজেন্ট প্ল্যাটফর্ম জেমিনি এপিআই কার্ডে, ‘Get started with this API’-এ ক্লিক করুন এবং স্ক্রিনে দেওয়া নির্দেশাবলী অনুসরণ করুন। এই প্রক্রিয়াটি আপনাকে এজেন্ট প্ল্যাটফর্ম জেমিনি এপিআই-এর সাথে ফায়ারবেস এআই লজিক ব্যবহার করার জন্য প্রয়োজনীয় এপিআইগুলো সক্রিয় করবে।
  4. (ঐচ্ছিক) এআই মনিটরিং সক্ষম করতে নির্বাচন করুন, যাতে আপনি ফায়ারবেস এআই লজিকের মাধ্যমে আপনার অনুরোধগুলির বিষয়ে ব্যাপক ধারণা পেতে বিভিন্ন অ্যাপ-স্তরের মেট্রিক এবং ব্যবহার পর্যবেক্ষণ করতে পারেন।

আপনার কোডকে আপনার ফায়ারবেস প্রজেক্টের সাথে সংযুক্ত করুন।

Firebase AI Logic সেট আপ করার অংশ হিসেবে, আপনাকে একটি Firebase Web App তৈরি করতে এবং আপনার সোর্স কোডে কনফিগারেশন যোগ করতে বলা হবে।

  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() });

৫. সার্ভার-সাইড প্রম্পট টেমপ্লেট তৈরি করুন

ক্লায়েন্ট অ্যাপে জটিল এআই প্রম্পটগুলো হার্ডকোড করার পরিবর্তে, আপনি সার্ভারে নিরাপদে নির্দেশনাগুলো পরিচালনা করতে ডটপ্রম্পট সিনট্যাক্স ব্যবহার করবেন।

এর ফলে সাধারণ ব্যবহারকারীরা গোপন 'তুষ্টি বাজেট' সংক্রান্ত নিয়মাবলী দেখতে পায় না।

  1. Firebase কনসোলে, AI Services > AI Logic > Prompt templates ট্যাবে যান।
  2. Create template-এ ক্লিক করুন এবং Blank template বেছে নিন।
  3. টেমপ্লেটের নাম Product Agent এবং আইডি product-agent হিসেবে সেট করুন।
  4. মডেলটি gemini-3.1-flash-lite (অথবা উপলব্ধ সর্বশেষ সংস্করণ)-এ সেট করুন।
  5. এই কোডল্যাবের জন্য প্রদত্ত স্টার্টার কোড থেকে product-agent.prompt ফাইলের বিষয়বস্তু কপি করুন (ফাইলটি রুট ডিরেক্টরিতে পাবেন)। তারপর, এই বিষয়বস্তুটি Firebase কনসোলের সার্ভার প্রম্পট টেমপ্লেটের ' Prompt and (optional) system instructions' ফিল্ডে পেস্ট করুন। এই বিষয়বস্তুটি মডেলকে নিরাপদে নির্দেশ দেয় যে কীভাবে 'Rugged Operator' হিসেবে কাজ করতে হবে এবং প্রোডাক্ট ক্যাটালগকে রেফারেন্স করতে হবে।
  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 টেমপ্লেটটি সংরক্ষণ ও প্রকাশ করতে সেভ টেমপ্লেট-এ ক্লিক করুন।

৬. এআই মডেলটিকে ডাকুন

যেহেতু টেমপ্লেটটি সার্ভারে নিরাপদে সংজ্ঞায়িত করা হয়েছে, এখন আপনাকে শুধু আপনার অ্যাপের ফ্রন্টএন্ড থেকে এটিকে কল করতে হবে।

  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();
}

৭. ফায়ারবেস অ্যাপ চেকের মাধ্যমে এজেন্টকে সুরক্ষিত করুন

এআই মডেলগুলো শক্তিশালী, কিন্তু পাবলিক এন্ডপয়েন্টগুলো অরক্ষিত থাকলে এগুলোর অপব্যবহারও হতে পারে। আপনার সর্বদা Firebase App Check ব্যবহার করা উচিত, যাতে শুধুমাত্র আপনার আসল ওয়েব অ্যাপই Gemini API-তে সফল রিকোয়েস্ট পাঠাতে পারে এবং বট ও অননুমোদিত ক্লায়েন্টদের ব্লক করা যায়।

  1. Google Cloud কনসোলে, Security > Fraud Defense- এ যান।
  2. Create Key-তে ক্লিক করুন এবং ক্ষেত্রগুলি পূরণ করুন:
    • প্রদর্শনের নাম : Codelab Key
    • অ্যাপ্লিকেশনের ধরণ : ওয়েব
    • ডোমেইন তালিকা : localhost এবং 127.0.0.1 যোগ করুন, যাতে আপনার স্থানীয় ভাইট সার্ভার অনুরোধ পাঠানোর অনুমতি পায়।
  3. কী-টি নিবন্ধন করতে 'Create key'-তে ক্লিক করুন।
  4. ফ্রড ডিফেন্স কী ডিটেইলস পেজের শীর্ষ থেকে সাইট কী আইডিটি আপনার ক্লিপবোর্ডে কপি করুন।
  5. Firebase কনসোলে, Security > App Check- এ যান।
  6. অ্যাপস ট্যাবে ক্লিক করুন, আপনার ওয়েব অ্যাপ ( Rugged Web ) প্রসারিত করুন এবং reCAPTCHA এন্টারপ্রাইজ প্রোভাইডারে ক্লিক করুন।
  7. reCAPTCHA Enterprise সাইট কী ফিল্ডে, Fraud Defense Key Details পেজ থেকে সাইট কী আইডিটি পেস্ট করুন এবং Save-এ ক্লিক করুন।
  8. আপনার কোড এডিটরে src/firebase.ts আবার খুলুন।
  9. শীর্ষে নিম্নলিখিত ইম্পোর্টগুলো যোগ করুন: 
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  10. আপনার initializeApp(firebaseConfig) কলটির ঠিক পরেই অ্যাপ চেক ইনিশিয়ালাইজেশন যোগ করুন, এবং আপনার কপি করা সাইট কী আইডিটি পেস্ট করুন: 
    // 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 এর মান `true` সেট করার মাধ্যমে, আপনি নিশ্চিত করছেন যে স্বল্পস্থায়ী টোকেন প্রয়োগ করা হবে, যা আপনার ব্যাকএন্ডের সম্ভাব্য অপব্যবহার সীমিত করতে সাহায্য করবে।

৮. অ্যাপটি চালান।

আপনার Firebase কনফিগারেশন সম্পন্ন হলে এবং সাপোর্ট চ্যাট উইজেটটি সংযুক্ত হয়ে গেলে, এবার অ্যাপটি চালানোর পালা।

  1. আপনার টার্মিনালে Vite ডেভেলপমেন্ট সার্ভারটি চালান: 
    npm run dev
  2. প্রদত্ত স্থানীয় URL-টি খুলুন (সাধারণত http://localhost:5173/ )।
  3. নিচের ডান কোণায় থাকা ট্যাকটিক্যাল সাপোর্ট ফ্লোটিং অ্যাকশন বাটন (FAB)-এ ক্লিক করুন।
  4. পণ্যগুলো সম্পর্কে প্রশ্ন করে দেখতে পারেন, যেমন:
    • আমি একটি আবহাওয়া-প্রতিরোধী খোলস খুঁজছি।
    • আমার সাব-জিরো বিনিটা নষ্ট হয়ে গেছে, আমি কী করতে পারি?
    • এআই-এর "আপিসমেন্ট বাজেট" লজিকটি সক্রিয় করতে ক্রমাগত বাধা দিতে থাকুন!

৯. (ঐচ্ছিক) কোডল্যাব থেকে রিসোর্সগুলো পরিষ্কার করুন।

আপনার গুগল ক্লাউড বিলিং অ্যাকাউন্টে সম্ভাব্য চার্জ এড়াতে, আপনি এই কোডল্যাব চলাকালীন তৈরি করা রিসোর্সগুলো মুছে ফেলতে পারেন।

  1. Firebase কনসোলে, সেটিংস > সাধারণ ট্যাবে যান।
  2. নিশ্চিত করুন যে আপনি যে প্রজেক্টটি দেখছেন, সেটিই এই কোডল্যাবের জন্য ব্যবহৃত প্রজেক্ট। যদি এটি আপনার কোডল্যাবের প্রজেক্ট না হয়, তাহলে প্রজেক্ট পরিবর্তন করার জন্য আপনি উপরের বাম কোণায় থাকা প্রজেক্ট পিকার ড্রপডাউনটি ব্যবহার করতে পারেন।
  3. পেজের একদম নিচে যান এবং তারপরে 'ডিলিট প্রজেক্ট'-এ ক্লিক করুন।
  4. মুছে ফেলা নিশ্চিত করতে স্ক্রিনে দেওয়া নির্দেশাবলী অনুসরণ করুন।

১০. অভিনন্দন!

🎊 মিশন সম্পন্ন! আপনি সফলভাবে একটি শক্তিশালী, টেমপ্লেট-চালিত এআই কাস্টমার সাপোর্ট এজেন্ট সংযুক্ত করেছেন।

আপনি যা অর্জন করেছেন:

  • একটি ক্লায়েন্ট অ্যাপে ফায়ারবেস এবং এজেন্ট প্ল্যাটফর্ম ব্যাকএন্ড চালু করা হয়েছে ।
  • এজেন্টের জটিল আচরণ নির্ধারণ করতে হ্যান্ডেলবারস এবং কঠোর ইনপুট স্কিমা ব্যবহার করে একটি সুরক্ষিত সার্ভার-সাইড প্রম্পট টেমপ্লেট কনফিগার করা হয়েছে ।
  • ক্লায়েন্টের কাছে অভ্যন্তরীণ প্রম্পট লজিক প্রকাশ না করেই, চ্যাট হিস্ট্রি এবং প্রাসঙ্গিক প্রোডাক্ট আইডি নিরাপদে প্রেরণ করে একটি এলএলএম (LLM) ডায়নামিকভাবে কল করা হয় ।

এরপর কী?