8 mẫu giao diện mà AI agent nào cũng cần
Chatbot thì trả lời. Agent thì làm việc: tìm kiếm, gọi API, sửa file, gửi email. Vì vậy giao diện cũng phải đổi vai. Người dùng không còn chỉ đọc câu trả lời, họ đang giám sát một "nhân viên" mà họ không nhìn thấy.
Sau khi làm khá nhiều giao diện cho agent, mình thấy lúc nào cũng quay về 8 mẫu dưới đây. Mẫu nào cũng phục vụ một mục tiêu: giúp người dùng tin vào việc agent đang làm.
1. Trạng thái "đang nghĩ" không phải spinner
Khoảng lặng giữa lúc bấm gửi và token đầu tiên là lúc người dùng quyết định app có bị treo không. Spinner chỉ nói "đang tải". Trạng thái "đang nghĩ" thì nói "đang làm việc của bạn". Chuyển động chậm, nhãn ngắn có thể đổi ("Đang tìm trên web…"), và tôn trọng prefers-reduced-motion.
2. Stream chữ mà không nhảy layout
Stream là chuyện bắt buộc, còn layout nhảy liên tục thì không nên có. Giữ chỗ cho tin nhắn, render markdown dần dần, đừng re-flow code block sau mỗi token.
3. Tool call mà người dùng đọc được
Khi agent gọi tool, hãy hiện ra: tên tool, tham số đang stream vào, trạng thái đang chạy, rồi kết quả. Gập các lần gọi đã xong lại để một lượt dài không thành bức tường chữ. Đây là cách tăng độ tin cậy mạnh nhất.
Tool call, nhận thẳng tool part của Vercel AI SDK:
{message.parts.map((part, i) =>
part.type.startsWith("tool-") ? <ToolCall key={i} part={part} /> : null
)}
4. Xin phép trước khi làm việc khó hoàn tác
Gửi, thanh toán, xoá, đăng bài: phải dừng lại và hỏi. Hiện đúng tham số sẽ chạy (gửi cho ai, tiêu đề gì, đính kèm file nào), không phải một câu tóm tắt. Hai nút, kết quả rõ ràng.
5. Kế hoạch có tiến độ trực tiếp
Với việc nhiều bước, hiện kế hoạch trước rồi đánh dấu từng bước khi xong. Người dùng biết trước "có 4 bước", và chờ lâu cũng thấy nhanh hơn.
6. Nguồn và trích dẫn ngay trong câu
Agent đã đọc gì thì cho thấy ở đâu: chip trích dẫn cạnh câu khẳng định, kèm danh sách nguồn mở được. Agent rõ ràng đã duyệt web mà không trích nguồn thì trông như đang giấu gì đó.
7. Khung artifact riêng
Khi kết quả là một "thứ" (tài liệu, biểu đồ, code), đặt nó vào khung riêng cạnh khung chat, có lịch sử phiên bản. Chat dùng để bàn về artifact, không phải để cuộn qua nó.
8. Voice cho thấy nó đang nghe
Voice agent cần một máy trạng thái nhìn thấy được: chờ, đang nghe, đang nghĩ, đang nói. Một quả cầu hoặc vòng tròn đổi chuyển động theo trạng thái dễ hiểu hơn bốn icon khác nhau.
Điểm chung
Mỗi mẫu trả lời trước một câu người dùng sẽ hỏi: Nó có đang chạy không? Nó đang làm gì? Nó có sắp làm điều mình không muốn không? Thông tin này lấy từ đâu? Trả lời những câu đó ngay trên giao diện thì agent đáng tin hơn, kể cả khi thỉnh thoảng nó sai.
Mình đang gom các mẫu này thành component React + Tailwind copy-paste tại nextui.dev. Code nằm trong repo của bạn, không phụ thuộc package runtime. Bạn thấy mẫu nào khó làm cho đúng nhất? Comment cho mình biết nhé.
All rights reserved
