Xây dựng một trợ lý hỗ trợ khách hàng dựa trên AI bằng Firebase AI Logic

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ thêm một tiện ích trò chuyện hỗ trợ khách hàng thông minh vào một cửa hàng thương mại điện tử bán thiết bị ngoài trời có tên là Rugged Terrain Guide. Bạn sẽ dùng Firebase AI Logic để tạo tác nhân này và tìm hiểu cách định cấu hình mẫu câu lệnh phía máy chủ (product-agent) xử lý vai trò của AI, các quy tắc nghiêm ngặt về ngân sách xoa dịu và sử dụng danh mục sản phẩm làm bối cảnh một cách linh động.

Những việc bạn cần làm:

  • Tải mã khởi đầu cho ứng dụng web của lớp học lập trình này.
  • Thiết lập một dự án Firebase.
  • Thiết lập và khởi chạy các dịch vụ Firebase (chẳng hạn như Firebase AI Logic) trong một ứng dụng web.
  • Định cấu hình mẫu câu lệnh phía máy chủ trong bảng điều khiển của Firebase.
  • Truy cập vào mẫu từ một lệnh gọi đến dịch vụ AI tạo sinh từ một giao diện người dùng TypeScript tương tự như React.

Những gì bạn cần:

  • Một trình duyệt web như Chrome.
  • Hiểu biết cơ bản về TypeScript và Node.js.
  • Một IDE hoặc trình chỉnh sửa văn bản mà bạn chọn. Antigravity (Chống trọng lực) là một lựa chọn phù hợp.

2. Lấy đoạn mã khởi đầu

  1. Trong thiết bị đầu cuối, hãy sao chép kho lưu trữ khởi đầu:
    git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
  2. Chuyển đến thư mục mã và cài đặt các phần phụ thuộc:
    cd devrel-demos/codelabs/firebase-server-prompt-templates-codelab
npm install

3. Thiết lập dự án Firebase

Tạo một dự án Firebase

  1. Đăng nhập vào bảng điều khiển của Firebase bằng Tài khoản Google của bạn.
  2. Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ: rugged-terrain-ai).
  3. Nhấp vào Tiếp tục.
  4. Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, rồi nhấp vào Tiếp tục.
  5. (Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
  6. Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy hãy tắt lựa chọn Google Analytics.
  7. Nhấp vào Tạo dự án, đợi dự án được cấp phép rồi nhấp vào Tiếp tục.

Nâng cấp gói giá của Firebase

Để sử dụng các dịch vụ Firebase trong lớp học lập trình này, dự án Firebase của bạn cần phải sử dụng gói giá trả theo mức sử dụng (Blaze), tức là dự án đó được liên kết với một tài khoản thanh toán trên Cloud.

Để nâng cấp dự án lên gói Blaze, hãy làm theo các bước sau:

  1. Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
  2. Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết một tài khoản thanh toán trên đám mây với dự án của bạn.
    Nếu cần tạo một tài khoản thanh toán trên đám mây trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển của Firebase để hoàn tất quá trình nâng cấp.

4. Thiết lập các dịch vụ Firebase và kết nối ứng dụng của bạn

Đối với lớp học lập trình này, bạn cần thiết lập Cloud Storage cho Firebase và Firebase AI Logic trong dự án Firebase của mình. Bạn cũng cần kết nối mã nguồn của ứng dụng với dự án Firebase.

Thiết lập Cloud Storage cho Firebase

Lớp học lập trình này sử dụng Cloud Storage cho Firebase để lưu trữ nội dung mô tả sản phẩm.

  1. Trong bảng điều khiển của Firebase, hãy chuyển đến Cơ sở dữ liệu và bộ nhớ > Bộ nhớ.
  2. Nhấp vào Bắt đầu.
  3. Chọn một vị trí cho bộ chứa lưu trữ mặc định.
    Các bộ chứa ở US-WEST1, US-CENTRAL1 và US-EAST1 có thể tận dụng cấp"Luôn miễn phí" của Google Cloud Storage. Các bộ chứa ở tất cả những vị trí khác đều tuân theo giá và mức sử dụng của Google Cloud Storage.
  4. Nhấp vào Chế độ phát hành công khai. Trong các bước ngay bên dưới, bạn sẽ cập nhật các Quy tắc bảo mật này cho phù hợp với lớp học lập trình này.
  5. Nhấp vào Tạo.
  6. Cập nhật Quy tắc bảo mật:
    1. Sau khi bạn cung cấp vùng lưu trữ, hãy chuyển đến thẻ Quy tắc.
    2. Sao chép rồi dán các quy tắc sau:
      rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /products.txt {
      allow read;
    }
  }
}
    3. Nhấp vào Xuất bản.
  7. Tải nội dung mô tả sản phẩm lên từ mã khởi đầu:
    1. Nhấp vào thẻ Tệp cho Nhóm lưu trữ của bạn.
    2. Nhấp vào Tải tệp lên, rồi tải tệp products.txt lên từ mã khởi đầu. Bạn có thể tìm thấy tệp này tại: src/data/products.txt.

Định cấu hình Firebase AI Logic

Firebase AI Logic là dịch vụ chính của Firebase mà bạn sẽ dùng trong lớp học lập trình này.

  1. Trong bảng điều khiển của Firebase, hãy chuyển đến Dịch vụ AI > AI Logic.
  2. Nhấp vào Bắt đầu.
  3. Trên thẻ Vertex AI Gemini API, hãy nhấp vào Bắt đầu sử dụng API này rồi làm theo hướng dẫn trên màn hình. Quy trình này sẽ cho phép các API bắt buộc để bạn sử dụng Firebase AI Logic với Vertex AI Gemini API.
  4. (Không bắt buộc) Chọn Bật tính năng giám sát bằng AI để có thể quan sát nhiều chỉ số và mức sử dụng ở cấp ứng dụng nhằm có được thông tin chi tiết toàn diện về các yêu cầu của bạn thông qua Firebase AI Logic.

Kết nối mã của bạn với dự án Firebase

Trong quá trình thiết lập Firebase AI Logic, bạn sẽ được nhắc tạo một Ứng dụng web Firebase và thêm cấu hình vào mã nguồn.

  1. Khi được nhắc trong quy trình thiết lập Firebase AI Logic, hãy nhấp vào biểu tượng Web () để đăng ký một ứng dụng web mới.
  2. Đặt tên cho ứng dụng (ví dụ: Rugged Web).
  3. Sao chép đối tượng firebaseConfig trong hướng dẫn thiết lập.

Tiếp theo, hãy cập nhật mã khởi đầu:

  1. Trong trình soạn thảo mã, hãy mở src/firebase.ts.
  2. Thay thế firebaseConfig hiện có bằng firebaseConfig mà bạn đã sao chép từ bảng điều khiển của Firebase.

Tệp của bạn sẽ có dạng như sau:

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. Tạo mẫu câu lệnh phía máy chủ

Thay vì mã hoá cứng các câu lệnh phức tạp cho AI trong ứng dụng khách, bạn sẽ sử dụng cú pháp Dotprompt để quản lý các chỉ dẫn một cách an toàn trên máy chủ.

Điều này ngăn người dùng cuối nhìn thấy các quy tắc bí mật về "Ngân sách xoa dịu".

  1. Trong bảng điều khiển của Firebase, hãy chuyển đến mục Vertex AI hoặc Quản lý câu lệnh.
  2. Tạo một mẫu câu lệnh mới và đặt tên là product-agent.
  3. Đặt mô hình thành gemini-2.5-flash.
  4. Xác định giản đồ đầu vào chính xác như sau:
    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. Sao chép nội dung của agent-product.prompt từ thư mục gốc vào trường Câu lệnh và hướng dẫn hệ thống không bắt buộc. Điều này hướng dẫn mô hình một cách an toàn về cách hành xử như "Nhân viên vận hành có độ bền cao" và chèn danh mục sản phẩm.
  6. Trong bảng điều khiển của Firebase, hãy lưu và xuất bản mẫu product-agent.

6. Gọi mô hình AI

Giờ đây, khi mẫu đã được xác định một cách an toàn trên máy chủ, bạn chỉ cần gọi mẫu đó từ giao diện người dùng của ứng dụng.

  1. Trong trình soạn thảo mã, hãy quay lại src/firebase.ts.
  2. Bên dưới quá trình khởi tạo, hãy dùng getTemplateGenerativeModel để kết nối với mẫu:
    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. Bảo mật tác nhân bằng tính năng Kiểm tra ứng dụng Firebase

Các mô hình AI rất mạnh mẽ, nhưng cũng có thể bị lạm dụng nếu các điểm cuối công khai không được bảo vệ. Bạn nên luôn sử dụng tính năng Kiểm tra ứng dụng Firebase để đảm bảo chỉ ứng dụng web thực tế của bạn mới có thể gọi mô hình tạo sinh Vertex AI, chặn các bot và ứng dụng trái phép.

  1. Trong bảng điều khiển của Firebase, hãy chuyển đến mục Tạo > Kiểm tra ứng dụng.
  2. Nhấp vào thẻ Ứng dụng, mở rộng ứng dụng web của bạn (Rugged Web) rồi nhấp vào nhà cung cấp reCAPTCHA Enterprise.
  3. Chọn Tạo khoá reCAPTCHA Enterprise mới rồi điền thông tin vào lời nhắc:
    • Tên: Codelab Key
    • Miền: Thêm localhost và 127.0.0.1 để máy chủ Vite cục bộ của bạn được phép đưa ra yêu cầu.
  4. Nhấp vào Lưu để đăng ký ứng dụng.
  5. Sau khi đăng ký, bảng điều khiển của Firebase sẽ hiển thị Khoá trang web của bạn. Sao chép chuỗi này.
  6. Trong trình soạn thảo mã, hãy mở lại src/firebase.ts.
  7. Thêm các mục nhập sau vào đầu:
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  8. Thêm quy trình khởi tạo Kiểm tra ứng dụng ngay sau lệnh gọi initializeApp(firebaseConfig) và dán khoá trang web mà bạn đã sao chép:
    // Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
  useLimitedUseAppCheckTokens: true
});
  9. Cập nhật lệnh gọi hàm getAI() để sử dụng các mã thông báo này. Thực hiện thay đổi sau:
    const ai = getAI(app, { backend: new VertexAIBackend(), useLimitedUseAppCheckTokens: true });
    Bằng cách đặt giá trị của useLimitedUseAppCheckTokens thành true, bạn đang đảm bảo rằng các mã thông báo có thời gian tồn tại ngắn được áp dụng để giúp hạn chế hành vi sai trái mà phần phụ trợ của bạn có thể gặp phải.

8. Chạy ứng dụng

Sau khi bạn thiết lập cấu hình Firebase và kết nối tiện ích trò chuyện hỗ trợ, đã đến lúc chạy ứng dụng.

  1. Trong thiết bị đầu cuối, hãy chạy máy chủ phát triển Vite:
    npm run dev
  2. Mở URL cục bộ được cung cấp (thường là http://localhost:5173/).
  3. Nhấp vào nút hành động nổi (FAB) Hỗ trợ chiến thuật ở góc dưới cùng bên phải.
  4. Hãy thử đặt câu hỏi về sản phẩm, ví dụ:
    • Tôi đang tìm một chiếc áo khoác chống chịu thời tiết
    • Mũ len của tôi bị lỗi, tôi có thể làm gì?
    • Hãy tiếp tục phản đối để kích hoạt logic "Ngân sách xoa dịu" của AI!

9. (Không bắt buộc) Dọn dẹp tài nguyên trong lớp học lập trình

Để tránh bị tính phí vào tài khoản thanh toán Google Cloud, bạn có thể xoá các tài nguyên đã tạo trong lớp học lập trình này.

  1. Truy cập vào bảng điều khiển của Firebase.
  2. Chọn dự án rugged-terrain-ai.
  3. Chuyển đến phần Cài đặt dự án (biểu tượng bánh răng).
  4. Di chuyển xuống dưới cùng rồi nhấp vào Xoá dự án.
  5. Làm theo hướng dẫn trên màn hình để xác nhận việc xoá.

10. Xin chúc mừng!

🎊 Hoàn thành nhiệm vụ! Bạn đã tích hợp thành công một nhân viên hỗ trợ khách hàng dựa trên AI mạnh mẽ và theo mẫu.

Những gì bạn đã đạt được:

  • Khởi động Firebase và phần phụ trợ Vertex AI trên một ứng dụng khách.
  • Đã định cấu hình một mẫu câu lệnh an toàn phía máy chủ bằng cách sử dụng Handlebars và các giản đồ đầu vào nghiêm ngặt để xác định hành vi phức tạp của tác nhân.
  • Tự động gọi một LLM một cách an toàn bằng cách truyền nhật ký trò chuyện và mã nhận dạng sản phẩm theo bối cảnh mà không để lộ logic câu lệnh nội bộ cho ứng dụng.

Bước tiếp theo là gì?