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 để xây dựng 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 bồi thường và sử dụng danh mục sản phẩm làm bối cảnh một cách linh hoạt.

Những việc bạn sẽ 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ừ giao diện người dùng TypeScript giống 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 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 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ủa bạn được cung cấ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 đám mây.

  • Tài khoản thanh toán trên Cloud yêu cầu bạn phải có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
  • Trong các chương trình khuyến mãi đặc biệt hoặc nếu bạn đang thực hiện lớp học lập trình này trong một sự kiện, thì có thể bạn sẽ nhận được tín dụng Google Cloud.
  • Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận khoản tín dụng trị giá 300 USD và tài khoản thanh toán trên đám mây dùng thử miễn phí hay không.

Để 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 Cloud với dự án của bạn.
    • Nếu bạn đang sử dụng tín dụng Google Cloud cho lớp học lập trình này, thì tài khoản thanh toán có thể có tên là Google Cloud Platform Trial Billing Account hoặc My Billing Account.
    • Nếu cần tạo một tài khoản thanh toán trên Cloud 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 bậc"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 mức 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 nhóm được cung cấp, 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ẻ Agent Platform 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 Gemini API của Nền tảng tác nhân.
  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, 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. 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 Firebase, hãy chuyển đến thẻ Mẫu câu lệnh trong phần Dịch vụ AI > Logic AI > .
  2. Nhấp vào Tạo mẫu rồi chọn Mẫu trống.
  3. Đặt tên mẫu thành Product Agent và mã nhận dạng thành product-agent.
  4. Đặt mô hình thành gemini-3.1-flash-lite (hoặc phiên bản mới nhất hiện có).
  5. Trong mã khởi đầu được cung cấp cho lớp học lập trình này, hãy sao chép nội dung của product-agent.prompt (tìm tệp này trong thư mục gốc). Sau đó, hãy dán nội dung này vào trường Câu lệnh và (không bắt buộc) hướng dẫn hệ thống của mẫu câu lệnh máy chủ trong bảng điều khiển của Firebase. Nội dung này hướng dẫn mô hình một cách an toàn về cách hành xử với tư cách là "Nhân viên vận hành trong môi trường khắc nghiệt" và tham khảo danh mục sản phẩm.
  6. Trong trường Test input (Kiểm thử dữ liệu đầu vào), hãy xác định giản đồ đầu vào chính xác như sau:
    {
  "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. Nhấp vào Lưu mẫu để 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

Mô hình AI rất mạnh mẽ, nhưng cũng có thể bị lợi 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 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ể đưa ra các yêu cầu thành công cho Gemini API, chặn các bot và ứng dụng trái phép.

  1. Trong Cloud Console, hãy chuyển đến phần Bảo mật > Bảo vệ chống gian lận
  2. Nhấp vào Tạo khoá rồi điền vào các trường:
    • Tên hiển thị: Codelab Key
    • Loại ứng dụng: Web
    • Danh sách miền: Thêm localhost và 127.0.0.1 để máy chủ Vite cục bộ của bạn được phép gửi yêu cầu.
  3. Nhấp vào Tạo khoá để đăng ký khoá.
  4. Ở đầu trang Chi tiết về khoá chống gian lận, hãy sao chép mã khoá trang web vào bảng nhớ tạm.
  5. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Bảo mật > Kiểm tra ứng dụng.
  6. 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.
  7. Trong trường khoá trang web reCAPTCHA Enterprise, hãy dán mã nhận dạng khoá trang web từ trang Chi tiết khoá chống gian lận rồi nhấp vào Lưu.
  8. Trong trình soạn thảo mã, hãy mở lại src/firebase.ts.
  9. Thêm các mục nhập sau vào đầu:
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  10. Thêm quy trình khởi chạy App Check ngay sau lệnh gọi initializeApp(firebaseConfig) và dán mã khoá trang web mà bạn đã sao chép:
    // Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
  isTokenAutoRefreshEnabled: true
});
  11. 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 AgentPlatformBackend(), 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ể nhận được.

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 đẩy lù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. Trong bảng điều khiển của Firebase, hãy chuyển đến thẻ Cài đặt > Chung.
  2. Đảm bảo rằng dự án bạn đang xem là dự án bạn đã dùng cho lớp học lập trình này. Nếu đó không phải là dự án của lớp học lập trình, thì bạn có thể dùng trình đơn thả xuống chọn dự án ở góc trên cùng bên trái để thay đổi dự án.
  3. Chuyển đến cuối trang, rồi nhấp vào Xoá dự án.
  4. 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ợ của Nền tảng tác nhân 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ã 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ì?