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

1. บทนำ

ใน Codelab นี้ คุณจะได้เพิ่มวิดเจ็ตแชทสำหรับฝ่ายสนับสนุนลูกค้าอัจฉริยะลงในร้านค้าอีคอมเมิร์ซอุปกรณ์กลางแจ้งที่ชื่อว่า Rugged Terrain Guide คุณจะใช้ Firebase AI Logic เพื่อสร้างเอเจนต์นี้ และจะได้เรียนรู้วิธีกำหนดค่าเทมเพลตข้อความแจ้งฝั่งเซิร์ฟเวอร์ (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 กับโปรเจ็กต์
    หากคุณต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน 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. เลือกตำแหน่งสำหรับที่เก็บข้อมูลเริ่มต้น
    ที่เก็บข้อมูลใน US-WEST1, US-CENTRAL1 และ US-EAST1 สามารถใช้ประโยชน์จากระดับ "ใช้งานฟรีตลอดไป" สำหรับ Google Cloud Storage ได้ ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตาม ราคาและการใช้งาน Google Cloud Storage
  4. คลิกโหมดการใช้งานจริง ในขั้นตอนด้านล่าง คุณจะอัปเดตกฎความปลอดภัยเหล่านี้ให้เฉพาะเจาะจงสำหรับ Codelab นี้
  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 ที่คุณจะได้ใช้ใน Codelab นี้

  1. ในคอนโซล Firebase ให้ไปที่ บริการ AI > AI Logic
  2. คลิกเริ่มต้นใช้งาน
  3. ในการ์ด Vertex AI Gemini API ให้คลิกเริ่มต้นใช้งาน API นี้ แล้วทำตามวิธีการบนหน้าจอ ขั้นตอนการทำงานนี้จะเปิดใช้ API ที่จำเป็นเพื่อให้คุณใช้ Firebase AI Logic กับ Vertex AI 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, 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. สร้างเทมเพลตข้อความแจ้งฝั่งเซิร์ฟเวอร์

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

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

  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" และแทรกแคตตาล็อกสินค้าอย่างปลอดภัย
  6. ในคอนโซล Firebase ให้บันทึกและเผยแพร่เทมเพลต 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. รักษาความปลอดภัยให้เอเจนต์ด้วย Firebase App Check

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

  1. ในคอนโซล Firebase ให้ไปที่สร้าง > App Check
  2. คลิกแท็บแอป ขยายเว็บแอป (Rugged Web) แล้วคลิกผู้ให้บริการ reCAPTCHA Enterprise
  3. เลือกสร้างคีย์ reCAPTCHA Enterprise ใหม่ แล้วกรอกข้อมูลในข้อความแจ้งโดยทำดังนี้
    • ชื่อ: Codelab Key
    • โดเมน: เพิ่ม 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. เปิด URL ในเครื่องที่ระบบให้ไว้ (โดยปกติคือ http://localhost:5173/)
  3. คลิกปุ่มการทำงานแบบลอย (FAB) Tactical Support ที่มุมขวาล่าง
  4. ลองถามคำถามเกี่ยวกับผลิตภัณฑ์ เช่น
    • ฉันกำลังมองหาเสื้อแจ็กเก็ตที่ทนต่อทุกสภาพอากาศ
    • หมวกไหมพรมกันหนาวของฉันมีตำหนิ ฉันควรทำอย่างไร
    • ลองถามคำถามต่อไปเรื่อยๆ เพื่อเรียกใช้ตรรกะ "งบประมาณการประนีประนอม" ของ AI

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

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

  1. ไปที่คอนโซล Firebase
  2. เลือกโปรเจ็กต์ rugged-terrain-ai
  3. ไปที่การตั้งค่าโปรเจ็กต์ (ไอคอนรูปเฟือง)
  4. เลื่อนลงไปที่ด้านล่างแล้วคลิกลบโปรเจ็กต์
  5. ทำตามวิธีการบนหน้าจอเพื่อยืนยันการลบ

10. ยินดีด้วย

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

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

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

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

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