𝗙𝗿𝗼𝗺 𝗣𝗿𝗼𝗺𝗽𝘁𝘀 𝘁𝗼 𝗔𝗜 𝗔𝗴𝗲𝗻𝘁𝘀: 𝗔 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿'𝘀 𝗚𝘂𝗶𝗱𝗲

Các nhà phát triển frontend cần phải tiến xa hơn những prompt đơn giản. Xây dựng các AI agent chính là cách để bạn tạo ra những giao diện người dùng thông minh.

Hãy coi đó như một chiếc thang:

• Prompts: Một chỉ dẫn duy nhất với một kết quả đầu ra. • Chatbots: Các mô hình có bộ nhớ cho phép hội thoại. • AI Agents: Các hệ thống biết sử dụng công cụ, lập kế hoạch các bước và hành động thay mặt bạn.

Các agent làm được nhiều việc hơn là chỉ xử lý văn bản. Chúng có thể gọi API, tìm kiếm tài liệu và chạy mã để đạt được mục tiêu.

Tại sao điều này lại quan trọng đối với công việc frontend của bạn:

  • Bạn có thể xây dựng các component có khả năng thích ứng với hành vi người dùng trong thời gian thực.
  • Bạn có thể tự động hóa việc hỗ trợ người dùng ngay trong UI.
  • Bạn có thể rút ngắn khoảng cách từ thiết kế đến mã nguồn thực tế một cách nhanh chóng hơn.

Để đạt được kết quả tốt, bạn phải ngừng viết những prompt mơ hồ. Hãy coi một prompt như một bản đặc tả kỹ thuật.

Prompt tồi: Write a function to format a date.

Prompt tốt: Write a TypeScript function that takes a JS Date. Return a string like "3 hours ago". Handle future dates by returning "just now". Do not use external libraries.

Phiên bản thứ hai xác định rõ vai trò, đầu ra, các trường hợp biên (edge cases) và các ràng buộc.

Sử dụng danh sách kiểm tra này để có kết quả tốt hơn:

  • Nêu rõ vai trò và định dạng: "Reply with code only."
  • Đưa ra ví dụ về đầu ra: Các mô hình tuân thủ các khuôn mẫu rất tốt.
  • Chỉ định stack của bạn: "Use React and Tailwind."
  • Liệt kê các trường hợp biên: "Handle null values and empty arrays."

Cách xây dựng một quy trình làm việc (workflow) cho agent:

  1. Chọn một mô hình: Sử dụng OpenAI APIs hoặc các dịch vụ tương tự thông qua các hàm backend bảo mật.
  2. Định nghĩa các prompt: Hãy rõ ràng và chi tiết.
  3. Thiết lập workflow: Đảm bảo mô hình có thể theo dõi ngữ cảnh và sử dụng các công cụ.
  4. Kết nối với UI của bạn: Sử dụng một API route để gọi agent và lấy kết quả.

Hãy giữ các logic nhạy cảm ở phía server. Không chạy các tiến trình của agent trực tiếp trên trình duyệt.

Các thách thức thường gặp cần lưu ý:

  • Độ trễ (Latency): Sử dụng các trạng thái loading hoặc cập nhật UI theo kiểu optimistic để giữ cho ứng dụng có cảm giác nhanh chóng.
  • Ảo giác (Hallucinations): Luôn gắn nhãn nội dung là do AI tạo ra để xây dựng lòng tin với người dùng.
  • Giới hạn ngữ cảnh (Context limits): Tóm tắt các tin nhắn cũ để mô hình không quên các quy tắc quan trọng.

Vai trò của một nhà phát triển frontend đang thay đổi. Bạn sẽ dành ít thời gian hơn để viết các template và dành nhiều thời gian hơn để xác định các mục tiêu cho các agent thực thi.

Hãy bắt đầu từ những việc nhỏ. Tự động hóa một tác vụ lặp đi lặp lại hoặc một component. Hãy làm chủ chiếc thang từ prompt đến agent.

Source: https://dev.to/davekurian/from-prompts-to-ai-agents-a-frontend-developers-guide-to-mastery-2mlh

Optional learning community: https://t.me/GyaanSetuAi