สร้างเอเจนต์ฝ่ายสนับสนุนลูกค้าที่ทำงานด้วยระบบ AI โดยใช้ Firebase AI Logic

1. บทนำ

ใน Codelab นี้ คุณจะได้เพิ่มวิดเจ็ตแชทฝ่ายสนับสนุนลูกค้าอัจฉริยะลงในร้านค้าอีคอมเมิร์ซอุปกรณ์กลางแจ้งชื่อ Rugged Terrain Guide คุณจะใช้ Firebase AI Logic เพื่อสร้าง Agent นี้ และจะได้เรียนรู้วิธีกำหนดค่าเทมเพลตพรอมต์ฝั่งเซิร์ฟเวอร์ (product-agent) ที่จัดการลักษณะตัวตนของ AI, กฎงบประมาณค่าชดเชยที่เข้มงวด และใช้แคตตาล็อกสินค้าเป็นบริบทแบบไดนามิก

สิ่งที่คุณต้องดำเนินการมีดังต่อไปนี้

  • รับโค้ดเริ่มต้นสำหรับเว็บแอปของ Codelab นี้
  • ตั้งค่าโปรเจ็กต์ Firebase
  • ตั้งค่าและเริ่มต้นบริการ Firebase (เช่น Firebase AI Logic) ในเว็บแอป
  • กำหนดค่าเทมเพลตพรอมต์ฝั่งเซิร์ฟเวอร์ในคอนโซล Firebase
  • เข้าถึงเทมเพลตจากการเรียกใช้บริการ Generative AI จากฟรอนท์เอนด์ TypeScript ซึ่งมีลักษณะคล้าย React

สิ่งที่คุณต้องมี ได้แก่

  • เว็บเบราว์เซอร์ เช่น Chrome
  • ความคุ้นเคยกับ TypeScript และ Node.js ในระดับพื้นฐาน
  • IDE หรือโปรแกรมแก้ไขข้อความที่คุณเลือก Antigravity เป็นตัวเลือกที่ดี

2. รับโค้ดเริ่มต้น

  1. ในเทอร์มินัล ให้โคลนที่เก็บเริ่มต้นโดยใช้คำสั่งต่อไปนี้
    git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
  2. ไปที่ไดเรกทอรีโค้ดและติดตั้งทรัพยากร Dependency โดยใช้คำสั่งต่อไปนี้
    cd devrel-demos/codelabs/firebase-server-prompt-templates-codelab
npm install

3. ตั้งค่าโปรเจ็กต์ Firebase

สร้างโปรเจ็กต์ Firebase

  1. ลงชื่อเข้าใช้คอนโซล Firebaseด้วยบัญชี Google
  2. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น rugged-terrain-ai)
  3. คลิกต่อไป
  4. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
  5. (ไม่บังคับ) เปิดใช้การช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
  6. สำหรับ Codelab นี้ คุณไม่ จำเป็นต้องใช้ Google Analytics ดังนั้นให้ปิด ตัวเลือก Google Analytics
  7. คลิกสร้างโปรเจ็กต์ รอให้ระบบจัดสรรโปรเจ็กต์ แล้วคลิกต่อไป

อัปเกรดแพ็กเกจราคาของ Firebase

หากต้องการใช้บริการ Firebase ใน Codelab นี้ โปรเจ็กต์ Firebase ของคุณต้องใช้แพ็กเกจราคาแบบ จ่ายตามการใช้งาน (Blaze) ซึ่งหมายความว่าโปรเจ็กต์ต้องลิงก์กับบัญชีสำหรับการเรียกเก็บเงินใน Cloud

หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้

  1. ในคอนโซล Firebase ให้เลือกเพื่อ อัปเกรดแพ็กเกจ
  2. เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
    • หากคุณใช้เครดิต Google Cloud สำหรับ Codelab นี้ บัญชีสำหรับการเรียกเก็บเงินน่าจะมีชื่อว่า Google Cloud Platform Trial Billing Account หรือ My Billing Account
    • หากคุณต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud เป็นส่วนหนึ่งของการอัปเกรดนี้ คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดในคอนโซล Firebase เพื่อทำการอัปเกรดให้เสร็จสมบูรณ์

4. ตั้งค่าบริการ Firebase และเชื่อมต่อแอป

สำหรับ Codelab นี้ คุณต้องตั้งค่า Cloud Storage for Firebase และ Firebase AI Logic ในโปรเจ็กต์ Firebase นอกจากนี้ คุณยังต้องเชื่อมต่อซอร์สโค้ดของแอปกับโปรเจ็กต์ Firebase ด้วย

ตั้งค่า Cloud Storage for Firebase

Codelab นี้ใช้ Cloud Storage for Firebase เพื่อจัดเก็บรายละเอียดสินค้า

  1. ในคอนโซล Firebase ให้ไปที่ฐานข้อมูลและพื้นที่เก็บข้อมูล > พื้นที่เก็บข้อมูล
  2. คลิกเริ่มต้นใช้งาน
  3. เลือกตำแหน่งสำหรับ Bucket พื้นที่เก็บข้อมูลเริ่มต้น
    Bucket ใน US-WEST1, US-CENTRAL1 และ US-EAST1 สามารถใช้ประโยชน์จากระดับ "ใช้งานฟรีตลอดไป" สำหรับ Google Cloud Storage ได้ Bucket ในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage
  4. คลิกโหมดการใช้งานจริง ในขั้นตอนด้านล่าง คุณจะอัปเดตกฎความปลอดภัยเหล่านี้ให้เฉพาะเจาะจงสำหรับ Codelab นี้
  5. คลิกสร้าง
  6. อัปเดตกฎความปลอดภัยโดยทำดังนี้
    1. หลังจากจัดสรร Bucket แล้ว ให้ไปที่แท็บกฎ
    2. คัดลอกกฎต่อไปนี้แล้ววาง
      rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /products.txt {
      allow read;
    }
  }
}
    3. คลิกเผยแพร่
  7. อัปโหลดรายละเอียดสินค้าจากโค้ดเริ่มต้นโดยทำดังนี้
    1. คลิกแท็บไฟล์ สำหรับ Bucket พื้นที่เก็บข้อมูล
    2. คลิกอัปโหลดไฟล์ แล้วอัปโหลดไฟล์ products.txt จากโค้ดเริ่มต้น คุณจะพบไฟล์นี้ได้ที่ src/data/products.txt

กำหนดค่า Firebase AI Logic

Firebase AI Logic เป็นบริการหลักของ Firebase ที่คุณจะได้ใช้ใน Codelab นี้

  1. ในคอนโซล Firebase ให้ไปที่ บริการ AI > AI Logic
  2. คลิกเริ่มต้นใช้งาน
  3. ในการ์ด Agent Platform Gemini API ให้คลิก Get started with this API แล้วทำตามวิธีการบนหน้าจอ ขั้นตอนการทำงานนี้จะเปิดใช้ API ที่จำเป็นเพื่อให้คุณใช้ Firebase AI Logic กับ Agent Platform Gemini API ได้
  4. (ไม่บังคับ) เลือกเปิดใช้การตรวจสอบ AI เพื่อให้คุณสังเกตเมตริกและการใช้งานต่างๆ ระดับแอปได้ เพื่อให้เห็นภาพรวมที่ครอบคลุมเกี่ยวกับคำขอผ่าน Firebase AI Logic

เชื่อมต่อโค้ดกับโปรเจ็กต์ Firebase

เมื่อตั้งค่า Firebase AI Logic ระบบจะแจ้งให้คุณสร้าง Firebase Web App และเพิ่มการกำหนดค่าลงในซอร์สโค้ด

  1. เมื่อได้รับแจ้งในขั้นตอนการตั้งค่า Firebase AI Logic ให้คลิกไอคอนเว็บ () เพื่อลงทะเบียนเว็บแอปใหม่
  2. ตั้งชื่อแอป (เช่น Rugged Web)
  3. คัดลอกออบเจ็กต์ firebaseConfig จากวิธีการตั้งค่า

จากนั้นให้อัปเดตโค้ดเริ่มต้นโดยทำดังนี้

  1. เปิด src/firebase.ts ในตัวแก้ไขโค้ด
  2. แทนที่ firebaseConfig ที่มีอยู่ด้วย 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. สร้างเทมเพลตพรอมต์ฝั่งเซิร์ฟเวอร์

แทนที่จะฮาร์ดโค้ดพรอมต์ AI ที่ซับซ้อนในแอปไคลเอ็นต์ คุณจะใช้ไวยากรณ์ Dotprompt เพื่อจัดการคำแนะนำอย่างปลอดภัยบนเซิร์ฟเวอร์

ซึ่งจะป้องกันไม่ให้ผู้ใช้ปลายทางเห็นกฎลับ "งบประมาณค่าชดเชย"

  1. ในคอนโซล Firebase ให้ไปที่แท็บบริการ AI > AI Logic > เทมเพลตพรอมต์
  2. คลิกสร้างเทมเพลต แล้วเลือกเทมเพลตเปล่า
  3. ตั้งชื่อเทมเพลตเป็น Product Agent และรหัสเป็น product-agent
  4. ตั้งค่าโมเดลเป็น gemini-3.1-flash-lite (หรือเวอร์ชันล่าสุดที่พร้อมใช้งาน)
  5. จากโค้ดเริ่มต้นที่ให้ไว้สำหรับ Codelab นี้ ให้คัดลอกเนื้อหาของ product-agent.prompt (ค้นหาไฟล์นี้ในไดเรกทอรีราก) จากนั้นวางเนื้อหานี้ลงในช่องพรอมต์และ (ไม่บังคับ) คำแนะนำระบบ ของเทมเพลตพรอมต์เซิร์ฟเวอร์ในคอนโซล Firebase เนื้อหานี้จะแนะนำโมเดลอย่างปลอดภัยถึงวิธีทำงานในฐานะ "ผู้ให้บริการ Rugged" และอ้างอิงแคตตาล็อกสินค้า
  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. เรียกใช้โมเดล AI

เมื่อกำหนดเทมเพลตอย่างปลอดภัยบนเซิร์ฟเวอร์แล้ว คุณเพียงแค่ต้องเรียกใช้เทมเพลตจากฟรอนท์เอนด์ของแอป

  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. รักษาความปลอดภัยให้ Agent ด้วย Firebase App Check

โมเดล AI มีประสิทธิภาพสูง แต่ก็อาจถูกนำไปใช้ในทางที่ผิดได้หากไม่มีการป้องกันปลายทางสาธารณะ คุณควรใช้ Firebase App Check เสมอเพื่อให้แน่ใจว่าเฉพาะเว็บแอปจริงของคุณเท่านั้นที่จะส่งคำขอไปยัง Gemini API ได้สำเร็จ โดยจะบล็อกบ็อตและไคลเอ็นต์ที่ไม่ได้รับอนุญาต

  1. ในคอนโซล Google Cloud ให้ไปที่ความปลอดภัย > การป้องกันการฉ้อโกง
  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. เพิ่มการเริ่มต้น App Check ทันทีหลังจากการเรียกใช้ 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 เป็น "จริง" จะช่วยให้มั่นใจได้ว่าระบบจะใช้โทเค็นที่มีอายุสั้นเพื่อช่วยจำกัดการละเมิดที่แบ็กเอนด์อาจได้รับ

8. เรียกใช้แอป

เมื่อกำหนดค่า Firebase เรียบร้อยแล้วและเชื่อมต่อวิดเจ็ตแชทฝ่ายสนับสนุนแล้ว ก็ถึงเวลาเรียกใช้แอป

  1. ในเทอร์มินัล ให้เรียกใช้เซิร์ฟเวอร์การพัฒนา Vite โดยใช้คำสั่งต่อไปนี้
    npm run dev
  2. เปิด URL ในเครื่องที่ระบบให้ไว้ (โดยปกติคือ http://localhost:5173/)
  3. คลิกปุ่มการทำงานแบบลอย (FAB) Tactical Support ที่มุมขวาล่าง
  4. ลองถามคำถามเกี่ยวกับผลิตภัณฑ์ เช่น
    • "ฉันกำลังมองหาเสื้อแจ็กเก็ตกันลมและกันฝน"
    • "หมวกบีนนี่กันหนาวของฉันมีข้อบกพร่อง ฉันต้องทำอย่างไร"
    • ลองถามคำถามต่อไปเรื่อยๆ เพื่อกระตุ้นตรรกะ "งบประมาณค่าชดเชย" ของ AI

9. (ไม่บังคับ) ล้างข้อมูลทรัพยากรจาก Codelab

คุณสามารถลบทรัพยากรที่สร้างขึ้นระหว่าง Codelab นี้เพื่อหลีกเลี่ยงการเรียกเก็บเงินจากบัญชีสำหรับการเรียกเก็บเงินใน Cloud ของ Google

  1. ในคอนโซล Firebase ให้ไปที่แท็บการตั้งค่า > ทั่วไป
  2. ตรวจสอบว่าโปรเจ็กต์ที่คุณกำลังดูเป็นโปรเจ็กต์ที่คุณใช้สำหรับ Codelab นี้ หากไม่ใช่โปรเจ็กต์ของ Codelab คุณสามารถใช้เมนูแบบเลื่อนลงของเครื่องมือเลือกโปรเจ็กต์ที่มุมซ้ายบนเพื่อเปลี่ยนโปรเจ็กต์
  3. ไปที่ด้านล่างของหน้า แล้วคลิกลบโปรเจ็กต์
  4. ทำตามวิธีการบนหน้าจอเพื่อยืนยันการลบ

10. ยินดีด้วย

🎊 ภารกิจสำเร็จ! คุณได้ผสานรวม Agent ฝ่ายสนับสนุนลูกค้าที่ทำงานด้วยระบบ AI ที่มีประสิทธิภาพสูงและขับเคลื่อนด้วยเทมเพลตเรียบร้อยแล้ว

สิ่งที่คุณทำสำเร็จมีดังนี้

  • เริ่มต้น Firebase และแบ็กเอนด์ Agent Platform ในแอปไคลเอ็นต์
  • กำหนดค่าเทมเพลตพรอมต์ฝั่งเซิร์ฟเวอร์ที่ปลอดภัย โดยใช้ Handlebars และสคีมาอินพุตที่เข้มงวดเพื่อกำหนดลักษณะการทำงานที่ซับซ้อนของ Agent
  • เรียกใช้ LLM แบบไดนามิก โดยส่งประวัติการแชทและรหัสสินค้าตามบริบทอย่างปลอดภัยโดยไม่เปิดเผยตรรกะพรอมต์ภายในต่อไคลเอ็นต์

ขั้นตอนต่อไปคืออะไร

  • Firebase App Check: รักษาความปลอดภัยปลายทาง AI จากการละเมิด