Mục tiêu

Sử dụng thành thạo 3 chế độ chat AI trong Cursor. Biết cách cung cấp “context” (ngữ cảnh) để AI hiểu chính xác bạn muốn sửa file nào, phần nào.

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

• ✅ Biết khi nào dùng Chat, Compose, hay Agent mode
• ✅ Sử dụng dấu @ để cung cấp context chính xác cho AI
• ✅ Viết prompt theo tư duy Component (chia nhỏ, tái sử dụng)

Nội dung chính

3.1 — Ba chế độ AI trong Cursor

┌────────────────────────────────────────────────────────────────────┐
│                     3 CHẾ ĐỘ AI TRONG CURSOR                      │
│                                                                    │
│  💬 CHAT MODE (Cmd/Ctrl + L)                                      │
│  │  Hỏi đáp, giải thích code, hỏi ý tưởng                       │
│  │  "Giải thích file App.jsx này làm gì?"                        │
│  │  → AI trả lời nhưng KHÔNG tự sửa code                        │
│  │                                                                │
│  ✏️  COMPOSE MODE (Cmd/Ctrl + I)                                  │
│  │  Yêu cầu AI sửa/thêm code vào file cụ thể                   │
│  │  "Thêm nút dark mode vào Navbar.jsx"                          │
│  │  → AI sửa code, bạn review rồi Accept/Reject                 │
│  │                                                                │
│  🤖 AGENT MODE (trong Compose, chọn Agent)                        │
│  │  Cho AI tự xử lý nhiều file cùng lúc                         │
│  │  "Tạo trang About gồm giới thiệu team và form liên hệ"      │
│  │  → AI tự tạo file mới, sửa routing, cập nhật menu            │
│                                                                    │
└────────────────────────────────────────────────────────────────────┘

Khi nào dùng chế độ nào?

Tình huống	Chế độ	Ví dụ cụ thể
Muốn hiểu đoạn code	Chat	”Giải thích hàm fetchProducts này làm gì?”
Sửa 1 file cụ thể	Compose	”Đổi màu nền Navbar từ trắng sang xanh đậm”
Tạo tính năng mới liên quan nhiều file	Agent	”Thêm trang sản phẩm chi tiết với giỏ hàng”
Không biết bắt đầu từ đâu	Chat trước → Agent sau	”Tôi muốn thêm tính năng X, nên bắt đầu từ đâu?”
Debug lỗi	Chat (paste lỗi vào)	“Tôi gặp lỗi này: [paste lỗi], cách sửa?”

Mẹo: Khi Agent mode sửa nhiều file cùng lúc, hãy đọc qua danh sách file bị thay đổi trước khi bấm Accept All. Nếu thấy file không liên quan bị sửa, hãy Reject file đó.

3.2 — Kỹ thuật cung cấp Context: Dấu @

Trong Cursor, dấu @ là “siêu năng lực” giúp AI hiểu đúng ngữ cảnh:

@file           → Tham chiếu đến 1 file cụ thể
@folder         → Tham chiếu cả thư mục
@codebase       → AI đọc toàn bộ project
@web            → AI tìm kiếm trên web
@docs           → AI đọc tài liệu kỹ thuật

So sánh prompt có và không có context:

Prompt KHÔNG có @	Prompt CÓ @	Kết quả
”Đổi màu nút bấm"	"Đổi màu nút bấm trong @ProductCard.jsx”	Có @: AI sửa đúng file. Không @: AI có thể sửa sai file
”Làm cho giống nhau"	"Xem @Navbar.jsx và @Footer.jsx, thống nhất style”	Có @: AI so sánh 2 file. Không @: AI không biết so sánh cái gì
”Thêm chức năng tìm kiếm"	"Thêm ô tìm kiếm vào @pages/Home.jsx, lọc từ @components/ProductCard.jsx”	Có @: AI biết thêm ở đâu, lọc gì. Không @: AI đoán lung tung

Ví dụ prompt có context đầy đủ:

Xem @Navbar.jsx và @Footer.jsx, hai component này đang dùng
màu khác nhau. Hãy thống nhất lại cùng bảng màu:
- Primary: #2563EB (xanh dương)
- Secondary: #1E293B (xám đậm)
- Accent: #F59E0B (vàng cam)

Đồng thời kiểm tra @index.css xem có biến CSS nào
cần cập nhật không.

Prompt nâng cao — sử dụng @codebase:

Xem @codebase, tìm tất cả component đang hard-code màu sắc
(ví dụ: color: "#333", background: "white").

Hãy tạo file src/styles/colors.js chứa bảng màu chung:
- primary, secondary, accent, background, text
Rồi cập nhật tất cả component sử dụng bảng màu từ file này.

Liệt kê danh sách file sẽ thay đổi trước khi sửa.

Mẹo: Câu cuối “Liệt kê danh sách file sẽ thay đổi trước khi sửa” rất hữu ích. AI sẽ liệt kê trước, bạn kiểm tra, rồi mới cho AI sửa. Giảm rủi ro AI sửa sai file.

3.3 — Tư duy Component: “Lắp ghép Lego”

Khái niệm CS lồng ghép: Component Component = khối giao diện tái sử dụng. Giống miếng Lego — bạn xây 1 miếng, rồi dùng lại nhiều lần.

TRANG CHỦ = Lắp ghép từ các Component:

┌─────────────────────────────────┐
│  <Navbar />                     │  ← Component 1: Dùng lại ở mọi trang
├─────────────────────────────────┤
│  <HeroBanner />                 │  ← Component 2: Chỉ trang chủ có
├─────────────────────────────────┤
│  <ProductCard /> <ProductCard />│  ← Component 3: Dùng lại cho mỗi
│  <ProductCard /> <ProductCard />│     sản phẩm, chỉ đổi nội dung
├─────────────────────────────────┤
│  <Footer />                     │  ← Component 4: Dùng lại ở mọi trang
└─────────────────────────────────┘

Cách prompt theo tư duy Component:

❌ "Tạo cho tôi trang chủ hoàn chỉnh"

✅ "Tạo component Navbar với các yêu cầu sau:

LAYOUT:
- Logo text "MyShop" bên trái, font bold, size 24px
- Menu ngang: Trang chủ, Sản phẩm, Giới thiệu, Liên hệ
- Nút "Đăng nhập" bên phải, màu primary #2563EB
- Cố định trên đầu trang (sticky), có shadow nhẹ khi scroll

RESPONSIVE:
- Desktop: hiện đầy đủ menu ngang
- Mobile (dưới 768px): thu gọn thành hamburger icon
- Hamburger menu slide từ phải sang

STYLE:
- Nền trắng, chữ đen
- Menu item hover: underline animation
- Active page: màu primary, font bold

File: src/components/Navbar.jsx
Dùng Tailwind CSS."

Tạo từng component → test → rồi ghép lại.

Mẹo: Mỗi prompt nên tạo 1 component duy nhất. Đừng nhồi 3-4 component vào 1 prompt — AI sẽ dễ bị nhầm lẫn. Tạo xong cái này, test OK, rồi tạo cái tiếp theo.

Lỗi thường gặp

Vấn đề: “AI sửa sai file” — bạn muốn sửa Navbar nhưng AI sửa Footer → Luôn dùng @file để chỉ rõ file cần sửa. Ví dụ: “Sửa @Navbar.jsx, thêm nút dark mode”. Nếu AI vẫn sửa sai, chuyển sang Compose mode và mở đúng file đó trước khi gõ prompt.

Vấn đề: “AI tạo code nhưng không chạy được — toàn lỗi đỏ” → Copy lỗi từ Terminal → paste vào Chat mode → hỏi AI: “Tôi gặp lỗi này khi chạy npm run dev: [paste lỗi]. Cách sửa?”. AI sẽ phân tích và hướng dẫn sửa.

Vấn đề: “Compose mode không thấy nút Accept/Reject” → Đảm bảo bạn đã mở file cần sửa trong editor (tab bên phải). Compose mode chỉ hiện Accept/Reject khi file đang mở.

Vấn đề: “Agent mode sửa quá nhiều file, app chạy sai” → Trước khi dùng Agent mode cho thay đổi lớn, hãy commit code hiện tại (git commit). Nếu Agent sửa sai, bạn có thể quay lại bản cũ.

Vấn đề: “AI không hiểu bảng màu/style mình muốn” → Tạo 1 file RULES.md hoặc .cursorrules ở thư mục gốc, ghi rõ bảng màu, font, style guidelines. Sau đó dùng @RULES.md trong mọi prompt liên quan đến giao diện.

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

Nhiệm vụ: Trong project Cursor, tạo 3 component riêng biệt bằng 3 prompt khác nhau:

Bước 1 (8 phút): Tạo Navbar dùng Compose mode

• Tiêu chí: có logo, menu, nút đăng nhập, responsive
• Gợi ý nếu bị stuck: sử dụng prompt mẫu ở phần 3.3

Bước 2 (8 phút): Tạo ProductCard dùng Compose mode

• Tiêu chí: hiển thị ảnh, tên, giá, nút thêm giỏ hàng
• Gợi ý nếu bị stuck: mô tả rõ layout (ảnh trên, text dưới) và size (width 250px)

Bước 3 (9 phút): Tạo trang hiển thị grid 6 ProductCard dùng Agent mode

• Tiêu chí: grid 3 cột trên desktop, 1 cột trên mobile. Dùng @ProductCard.jsx để AI tham chiếu
• Gợi ý nếu bị stuck: nói rõ “import ProductCard từ @components/ProductCard.jsx và hiển thị 6 card dạng grid”

Lưu ý: Sử dụng @file khi cần AI tham chiếu đến component đã tạo

Thời gian: 25 phút Deliverable: Screenshot 3 component + trang hoàn chỉnh chạy trên localhost

Tổng kết bài 3

Bạn đã học được	Chi tiết
3 chế độ AI	Chat (hỏi), Compose (sửa file), Agent (tự xử lý)
Dấu @ context	@file, @folder, @codebase để AI hiểu đúng
Tư duy Component	Chia giao diện thành khối nhỏ, tái sử dụng
Prompt chi tiết	Mô tả layout, style, responsive cụ thể cho từng component