Mục tiêu

Sử dụng AI Agent mode để tự động xây toàn bộ codebase từ PRD. Biết khi nào nên can thiệp và khi nào để AI tự xử lý.

Sau bài này, bạn sẽ:

• ✅ Phân biệt rõ khi nào dùng Agent Mode, khi nào dùng Chat/Compose Mode
• ✅ Biết cách đưa PRD cho Agent và scaffold toàn bộ project
• ✅ Nhận diện được dấu hiệu Agent “đi lạc” và can thiệp đúng lúc
• ✅ Nắm được workflow PRD → Agent → Review → Commit

Nội dung chính

2.1 — Agent Mode vs Compose Mode: Khi nào dùng gì?

COMPOSE MODE (Bài 3, Course 2):          AGENT MODE:
────────────────────────────────          ───────────
Bạn: "Sửa file Navbar.jsx"               Bạn: "Tạo toàn bộ hệ thống Auth"
AI: Sửa 1 file, chờ bạn review           AI: Tự tạo 5 file, sửa routing,
                                          cài thư viện, cập nhật config
Bạn kiểm soát từng bước                  AI tự xử lý chuỗi công việc

Agent Mode mạnh hơn nhưng cũng nguy hiểm hơn — AI có thể sửa nhiều file cùng lúc, đôi khi sửa cả những thứ không cần sửa.

Chi tiết so sánh:

Tiêu chí	Chat / Compose	Agent Mode
Số file sửa cùng lúc	1-2 file	5-20+ file
Tự cài thư viện	Không	Có
Tự chạy terminal command	Không	Có
Cần review sau mỗi bước	Không bắt buộc	Rất cần
Phù hợp khi	Sửa bug nhỏ, thay đổi UI	Scaffold project, tạo feature lớn
Rủi ro	Thấp	Trung bình - Cao

Mẹo: Nếu bạn chưa chắc chắn nên dùng mode nào, hãy tự hỏi: “Việc này cần sửa bao nhiêu file?” Nếu 1-2 file → Chat/Compose. Nếu 3+ file liên quan đến nhau → Agent Mode.

2.2 — Công cụ Agent mạnh nhất hiện tại

Công cụ	Đặc điểm	Giá
Cursor Agent	Tích hợp trong Cursor IDE, đọc @codebase	$20/tháng
Claude Code	Chạy trong Terminal, cực mạnh	Theo API usage
Windsurf Cascade	Agent mode của Windsurf	$10/tháng
GitHub Copilot Agent	Tích hợp VS Code	$10/tháng

2.3 — Quy trình “PRD → Code” với Agent Mode

┌──────────┐     ┌────────────────┐     ┌────────────────┐
│          │     │                │     │                │
│  PRD.md  │────▶│  Agent Mode    │────▶│  Codebase      │
│          │     │  "Đọc PRD này  │     │  hoàn chỉnh    │
│          │     │   và scaffold  │     │                │
│          │     │   toàn bộ      │     │                │
│          │     │   project"     │     │                │
└──────────┘     └────────────────┘     └────────────────┘
                        │
                        ▼
                 ┌────────────────┐
                 │  BẠN REVIEW    │
                 │  - Code đúng?  │
                 │  - Chạy được?  │
                 │  - Commit!     │
                 └────────────────┘

Prompt scaffold từ PRD (chi tiết):

Đọc file @PRD.md và thực hiện scaffold toàn bộ project.

Yêu cầu cụ thể:
1. Khởi tạo project React + Vite + Tailwind CSS
2. Tạo cấu trúc thư mục theo PRD:
   - src/pages/ — mỗi trang trong PRD = 1 file
   - src/components/ — các component dùng chung
   - src/lib/ — helper functions, supabase client
   - src/hooks/ — custom hooks (useAuth, useData...)
   - src/assets/ — hình ảnh, icons
3. Tạo tất cả các trang (pages) với layout cơ bản:
   - Mỗi trang có heading + placeholder content
   - Import sẵn các component cần dùng
4. Setup routing (React Router):
   - Tạo file routes.jsx với tất cả routes
   - Route cho mỗi trang trong PRD
   - Route /login và /register cho auth
5. Kết nối Supabase:
   - Tạo file lib/supabase.js với client config
   - Dùng biến môi trường từ .env
   - Tạo file .env.example với danh sách biến cần thiết
6. Tạo database schema trên Supabase theo PRD:
   - SQL cho mỗi bảng trong PRD
   - Bật RLS (Row Level Security) cho tất cả bảng
7. Tạo layout component chung:
   - Navbar với navigation links
   - Footer
   - AuthProvider wrapper

Chưa cần hoàn thiện logic chi tiết. Tạo skeleton (khung xương) trước.
Mỗi component chỉ cần render placeholder text cho biết đây là gì.
Đảm bảo `npm run dev` chạy được không lỗi.

Mẹo: Luôn commit ngay sau khi Agent scaffold xong và npm run dev chạy được. Đây là checkpoint an toàn — nếu sau này Agent phá hỏng gì, bạn có thể git revert về đây.

Prompt nâng cao — Scaffold từng feature một:

Tôi đã có skeleton project từ PRD.
Bây giờ hãy implement tính năng đầu tiên trong PRD: [tên tính năng].

Yêu cầu:
- Đọc @PRD.md phần tính năng [tên] để hiểu yêu cầu
- Implement đầy đủ UI + logic + kết nối database
- Thêm loading state khi đang tải dữ liệu
- Thêm error state khi có lỗi xảy ra
- Đảm bảo responsive trên mobile
- KHÔNG sửa các file không liên quan đến tính năng này

Sau khi xong, liệt kê các file đã tạo/sửa để tôi review.

2.4 — Quy tắc “Can thiệp đúng lúc”

✅ ĐỂ AI TỰ CHẠY KHI:
  - Scaffold project mới từ PRD
  - Tạo nhiều file cùng loại (ví dụ: 5 trang giống nhau)
  - Refactor (tái cấu trúc) code

⚠️  CAN THIỆP KHI:
  - AI hỏi "Bạn muốn dùng thư viện nào?" → Trả lời rõ ràng
  - AI tạo file ngoài kế hoạch → "Không, chỉ tạo các file trong PRD"
  - Thấy AI sửa file không liên quan → Dừng lại, revert

❌ DỪNG NGAY KHI:
  - Terminal hiện nhiều lỗi đỏ liên tiếp
  - AI bắt đầu xóa code cũ mà không giải thích
  - AI đi vòng lặp: sửa → lỗi → sửa → lỗi (3+ lần)

2.5 — Xử lý khi Agent “đi lạc”

Đây là các tình huống phổ biến và cách xử lý:

Agent sửa sai file:

Bạn nhờ Agent sửa trang Home nhưng nó sửa cả Navbar, Footer, và App.jsx.

Xử lý:
1. Dừng Agent (Ctrl+C hoặc nút Stop)
2. Kiểm tra git diff — xem những gì đã thay đổi
3. git checkout -- [file không muốn sửa] — revert từng file
4. Hoặc git stash → git stash pop → chọn lọc
5. Prompt lại rõ ràng hơn: "CHỈ sửa file src/pages/Home.jsx.
   KHÔNG sửa bất kỳ file nào khác."

Agent bị loop (sửa → lỗi → sửa → lỗi):

AI sửa lỗi A → phát sinh lỗi B → sửa B → lỗi A quay lại

Xử lý:
1. Dừng ngay (đừng cho nó chạy thêm)
2. Git revert về commit cuối cùng hoạt động tốt
3. Mở chat MỚI (context cũ đã "nhiễm" suy nghĩ sai)
4. Mô tả lại vấn đề từ đầu trong chat mới
5. Yêu cầu AI giải thích TRƯỚC khi sửa: "Phân tích nguyên nhân
   gốc trước, đừng sửa ngay. Giải thích cho tôi hiểu đã."

Mẹo: Đặt “checkpoint” sau mỗi tính năng hoàn thành. Workflow lý tưởng: PRD → Scaffold (commit) → Feature 1 (commit) → Feature 2 (commit)… Mỗi commit là 1 checkpoint an toàn bạn có thể quay lại.

Lỗi thường gặp

Vấn đề: Agent tạo ra quá nhiều file không cần thiết (20+ file cho 1 feature đơn giản). → Giải pháp: Thêm vào prompt: “Tạo số lượng file TỐI THIỂU cần thiết. Ưu tiên đơn giản, không tách component nhỏ quá.” Agent thường over-engineer nếu không giới hạn.

Vấn đề: Agent cài thư viện bạn không muốn hoặc không biết. → Giải pháp: Thêm vào prompt: “KHÔNG cài thêm thư viện mới ngoài: [liệt kê thư viện cho phép]. Nếu cần thư viện khác, hỏi tôi trước.” Sau đó kiểm tra package.json sau mỗi lần Agent chạy.

Vấn đề: Agent scaffold xong nhưng npm run dev bị lỗi. → Giải pháp: Copy toàn bộ lỗi từ terminal, paste cho AI: “Chạy npm run dev bị lỗi này. Sửa giúp tôi, nhưng CHỈ sửa file gây lỗi, KHÔNG refactor gì thêm.” Thường là lỗi import sai path hoặc thiếu dependency.

Vấn đề: Agent chạy xong nhưng bạn không biết nó đã sửa gì. → Giải pháp: Luôn chạy git diff sau khi Agent xong. Đọc qua danh sách file thay đổi. Nếu có file lạ → kiểm tra kỹ hoặc revert. Trong Cursor, tab Source Control hiển thị rõ các thay đổi.

Bài tập thực hành

Nhiệm vụ: Dùng Agent mode trong Cursor, đưa PRD từ Bài 1 vào, và scaffold toàn bộ project.

Các bước thực hiện:

1. Commit PRD vào repo trước (~2 phút)
2. Dùng Agent mode: “Đọc @PRD.md và scaffold project” (~15 phút)
3. Kiểm tra cấu trúc thư mục có khớp PRD không (~3 phút)
4. Chạy npm run dev kiểm tra skeleton (~5 phút)
5. Sửa lỗi nếu có (dùng Agent hoặc Chat mode) (~5 phút)
6. Commit: “Scaffold project từ PRD” (~2 phút)

Tiêu chí hoàn thành:

• Cấu trúc thư mục khớp với PRD (đúng pages, components)
• npm run dev chạy không lỗi
• Mở trình duyệt thấy skeleton app với navigation
• Đã commit lên GitHub

Gợi ý nếu bị stuck: Nếu Agent tạo lỗi, đừng sửa lỗi trên lỗi. Chạy git reset --hard HEAD để quay về trạng thái trước, rồi thử lại với prompt cụ thể hơn. Hoặc chia nhỏ: scaffold cấu trúc thư mục trước, rồi mới thêm routing, rồi mới kết nối Supabase.

Thời gian: 35 phút Deliverable: Project skeleton chạy được trên localhost, cấu trúc đúng PRD