User không tin agent? Cho họ xem trực tiếp

Agent lướt web thay user mà họ không thấy gì — trust bằng không. Cách nhúng live browser stream vào React, từ lý do đến bẫy cần tránh.

Bụi Wire

2026-04-10

5 giờ chiều, Slack kêu: "Nó đang làm gì vậy?"

Giả sử team bạn 4 người, vừa ship tính năng hot nhất quý: AI agent tự vào cổng đối tác, tra cứu đơn hàng, điền form, rồi trả kết quả về dashboard. Demo nội bộ mượt. PM gật gù. Deploy lên staging — và Slack bắt đầu nổ:

"Em bấm rồi, loading 30 giây, rồi nó báo 'không tìm thấy'. Hệ thống hỏng hả anh?"

Agent không hỏng. Nó đang mở trang, scroll, click đúng chỗ. Nhưng user chỉ thấy một spinner xoay tròn. Khoảng trống giữa "bấm nút" và "nhận kết quả" chính là nơi trust bốc hơi — giống xem trận chung kết mà chỉ được đọc tỉ số trên báo sáng hôm sau.

Cái giá của "headless": trust bay màu

Hầu hết browser agent hiện tại chạy headless — trình duyệt hoạt động ngầm, không giao diện. Với developer thì hợp lý: nhẹ hơn, nhanh hơn, dễ scale. Nhưng với user, đó là một hộp đen.

Như mình đã bàn trong bài về AI cần người trông — khi agent hành động tự chủ mà không ai thấy, rủi ro không chỉ là kết quả sai. Nó còn là user mất kiểm soát hoàn toàn.

Kịch bản 1: Một đội product ở Đà Nẵng xây agent tra cứu thông tin bảo hiểm trên cổng đối tác. Agent chạy ổn phần lớn thời gian — nhưng thỉnh thoảng nó click nhầm tab, vào trang FAQ thay vì trang tra cứu. User không biết, chỉ thấy "Không tìm thấy thông tin" và gửi ticket. Team mất hai tuần debug trước khi nhận ra lỗi UX chứ không phải lỗi logic.

Kịch bản 2: Một team e-commerce ở Sài Gòn dùng agent tự động đặt hàng trên sàn B2B. Mỗi lần agent chạy, procurement manager phải... tin. Không có bằng chứng agent đã chọn đúng SKU, đúng số lượng, đúng nhà cung cấp — cho đến khi đơn hàng thật xuất hiện. Trong ngành mà một đơn sai thiệt hại vài trăm triệu, "tin agent" không phải option.

Bật camera cho agent — như VAR trên sân cỏ

Amazon Bedrock AgentCore mới ra một component tên BrowserLiveView — cho phép nhúng video stream real-time của phiên duyệt web thẳng vào React app. Dịch sang tiếng người: user ngồi nhìn agent mở browser, click, gõ, scroll — từng thao tác hiện lên màn hình, y như camera VAR chiếu lại cho trọng tài xem.

Luồng hoạt động gồm ba phần:

Backend tạo browser session trên AgentCore, nhận về một presigned URL
Frontend render component BrowserLiveView với URL đó — chỉ vài dòng JSX
Component dùng giao thức Amazon DCV để stream video — bạn không cần tự dựng WebRTC hay streaming server

Phần thú vị hơn code là kiến trúc phía sau: presigned URL có TTL (hết hạn tự động), session tự cleanup khi xong, và stream chỉ read-only — user xem nhưng không can thiệp được vào thao tác agent.

Giá trị thật sự không nằm ở "cool tech". Nó nằm ở feedback loop: user thấy agent đang đúng trang → yên tâm chờ. Thấy agent đi lạc → cancel sớm, không phải đợi kết quả sai rồi mới biết. Trust được xây bằng transparency, không bằng lời hứa.

30 phút thử nghiệm: từ zero đến live stream

Muốn thử ngay chiều nay? Đây là flow rút gọn:

Bước 1 — Tạo browser session: Gọi API AgentCore để khởi tạo session. Bạn cần AWS account đã bật Bedrock access. Response trả về sessionId và presignedUrl.

Bước 2 — Nhúng vào React: Cài Bedrock AgentCore TypeScript SDK từ npm, import BrowserLiveView, truyền presigned URL vào props. Component tự handle connection, reconnect, và cleanup — không cần config thêm.

Bước 3 — Gắn agent logic: Dùng Bedrock agent hoặc bất kỳ framework nào để điều khiển browser session. Agent navigate, click, extract data — user xem real-time trên cùng session.

Tip thực tế: Chạy thử với task đơn giản trước — agent mở Google, search một keyword, chụp kết quả. Confirm stream hoạt động mượt rồi hãy gắn workflow phức tạp. Đừng nghe mình, thử đi rồi biết.

Ba cái bẫy mình từng thấy team dính

Bẫy 1 — Stream cả lúc agent "nghĩ". Agent đôi khi mất vài giây để quyết định bước tiếp theo — màn hình đứng im. User tưởng lag, bấm refresh, session bay. Giải pháp: thêm overlay nhỏ kiểu "Agent đang phân tích trang..." khi không có action nào trong vài giây. Nhỏ nhưng cứu cả trải nghiệm.

Bẫy 2 — Quên tắt session. Mỗi browser session ngốn resource. Giả sử 100 user đồng thời = 100 browser instance chạy song song. Không có auto-cleanup thì hóa đơn cloud cuối tháng sẽ là loại "bất ngờ" không ai muốn nhận. Luôn set TTL và cleanup hook cho mỗi session.

Bẫy 3 — Cho xem nhưng không cho dừng. Live view mà thiếu nút "Dừng lại" thì user vẫn bất lực — giống camera VAR chiếu rõ lỗi mà trọng tài phớt lờ. Luôn kèm cơ chế abort rõ ràng ngay bên cạnh stream.

Không dùng AWS? Vẫn chơi được

Nếu team bạn không ở trên AWS hoặc cần self-host:

Playwright có screencast API — record session rồi stream qua WebSocket. Cần tự build frontend player, nhưng logic không quá phức tạp.
Puppeteer hỗ trợ Page.screencast() qua Chrome DevTools Protocol — approach tương tự.
Browser Use — framework browser agent open-source đang được cộng đồng chú ý — kết hợp tốt với các giải pháp streaming trên.

Trade-off thì rõ: tự build linh hoạt hơn nhưng bạn own toàn bộ infra streaming. Managed service như BrowserLiveView thì lên nhanh nhưng gắn chặt vào ecosystem AWS. Đang prototype? Managed cho lẹ. Đã production scale? Cân nhắc self-host.

Một dòng mang về

Trust không đến từ kết quả đúng — trust đến từ quá trình được nhìn thấy. Cho user xem agent làm việc không phải feature "nice to have". Với bất kỳ workflow nào agent thao tác thay người, live view là phần cứng của UX.

Còn nếu bạn vẫn ship agent headless rồi thắc mắc sao user không chịu dùng — well, bạn đang bán vé xem bóng đá mà bịt mắt khán giả vậy đó.

---

Bụi Wire — nghiện đọc release notes lúc 2 giờ sáng