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. Click Create project , wait for your project to provision, and then click Continue .

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

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

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

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

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

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

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

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

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

  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. Vertex AI Gemini API কার্ডে, 'Get started with this API'- তে ক্লিক করুন এবং স্ক্রিনে দেওয়া নির্দেশাবলী অনুসরণ করুন। এই প্রক্রিয়াটি আপনাকে Vertex AI Gemini API-এর সাথে Firebase AI Logic ব্যবহার করার জন্য প্রয়োজনীয় 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, 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() });

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

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

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

  1. Firebase কনসোলে, Vertex AI বা Prompt Management সেকশনে যান।
  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 ফাইলের বিষয়বস্তু "Prompt and optional system instructions" ফিল্ডে কপি করুন। এটি মডেলকে নিরাপদে নির্দেশ দেয় যে কীভাবে "Rugged Operator" হিসেবে কাজ করতে হবে এবং প্রোডাক্ট ক্যাটালগ ইনজেক্ট করতে হবে।
  6. Firebase কনসোলে 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 ব্যবহার করা উচিত, যাতে শুধুমাত্র আপনার আসল ওয়েব অ্যাপই Vertex AI জেনারেটিভ মডেলকে কল করতে পারে এবং বট ও অননুমোদিত ক্লায়েন্টদের ব্লক করা যায়।

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

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

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

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

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

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

  1. ফায়ারবেস কনসোলে যান।
  2. rugged-terrain-ai প্রজেক্টটি নির্বাচন করুন।
  3. প্রজেক্ট সেটিংসে যান (গিয়ার আইকন)।
  4. একদম নিচে স্ক্রোল করুন এবং 'ডিলিট প্রজেক্ট'-এ ক্লিক করুন।
  5. মুছে ফেলা নিশ্চিত করতে স্ক্রিনে দেওয়া নির্দেশাবলী অনুসরণ করুন।

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

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

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

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

এরপর কী?