Dùng Composer để viết code

Định nghĩa

Composer là chế độ đa file của Cursor, cho phép AI đọc, sửa và tạo mới nhiều file cùng lúc để hoàn thành tính năng phức tạp. Khác với AI Chat chỉ tập trung vào file đang mở, Composer hoạt động như một lập trình viên thực thụ có thể thay đổi cấu trúc toàn bộ project chỉ qua một yêu cầu bằng ngôn ngữ tự nhiên.

Giải thích chi tiết

Mở Composer và chọn chế độ

Nhấn tổ hợp Ctrl/⌘ + I để kích hoạt. Giao diện chia đôi: bên trái là ô nhập yêu cầu, bên phải là diff preview (xem trước thay đổi). Ở góc dưới bên trái, bạn chọn một trong hai chế độ:

• Normal: AI phân tích và đề xuất code, nhưng bạn phải bấm Accept từng file mới áp dụng. Chế độ này an toàn, phù hợp khi làm việc với codebase quan trọng.
• Agent (chế độ mới): AI tự động chạy terminal, cài đặt thư viện (npm install), tạo folder, thậm chí chạy test và sửa lỗi nếu thất bại. Dùng khi bạn muốn "Tạo cho tôi một ứng dụng React từ con số không".

Cách đọc diff preview

Bên phải màn hình, Composer hiển thị:

• File mới: Tên file màu xanh lá, bạn sẽ thấy toàn bộ nội dung được đề xuất
• File sửa: Tên file màu vàng, hiển thị từng dòng xóa (đỏ) và thêm (xanh)
• Context: AI giải thích lý do sửa đổi bằng văn bản

Bạn có thể bấm Accept All để áp dụng toàn bộ, hoặc xem từng file riêng lẻ để quyết định.

Kỹ thuật mention file và context

Khi project có nhiều file trùng tên hoặc cấu trúc phức tạp, dùng ký hiệu @ để chỉ định file cụ thể: @utils/helpers.py hoặc @components/Header.tsx. Composer sẽ ưu tiên đọc kỹ những file này trước khi đưa ra quyết định sửa đổi.

Ngoài ra, AI tự động include các file liên quan trong cùng folder hoặc có import liên kết, nhưng bạn nên chủ động mention nếu muốn AI tham khảo pattern từ file khác.

Workflow làm việc chuẩn

1. Mô tả đầy đủ: Viết yêu cầu như đang giao việc cho lập trình viên cấp dưới — bao gồm input, output mong đợi, và ràng buộc (ví dụ: "dùng thư viện có sẵn, không cài thêm")
2. Chờ phân tích: Composer liệt kê danh sách file cần đụng tới
3. Review từng bước: Xem diff preview, kiểm tra logic đặc biệt ở các hàm quan trọng
4. Accept và test: Chạy thử, nếu lỗi thì quay lại Composer, paste lỗi vào và yêu cầu sửa

Ví dụ thực tế

Tạo landing page cho người không biết code

Bạn có template website cũ, muốn thêm một trang giới thiệu sản phẩm mới nhưng không rành HTML.

Thao tác: Mở Composer, chọn chế độ Normal, nhập:

"Tạo file product.html trong thư mục pages/, copy layout từ @index.html nhưng thay hero section thành tiêu đề 'Ứng dụng Quản lý Chi tiêu', thêm nút Download màu xanh. Style dùng CSS giống @style.css hiện tại."

Kết quả: Composer đọc index.html để lấy cấu trúc, đọc style.css để lấy class CSS, tạo file mới với nội dung đồng nhất thiết kế. Bạn chỉ cần mở file trong trình duyệt là thấy ngay, không cần viết một dòng code.

Thêm API endpoint vào Python project

Bạn đang có sẵn Flask app, cần thêm chức năng upload ảnh avatar.

Thao tác: Chọn chế độ Agent, nhập:

"Thêm route POST /api/upload-avatar trong @app.py. Route nhận file ảnh, kiểm tra định dạng jpg/png và kích thước dưới 2MB, lưu vào thư mục static/uploads/. Trả về JSON chứa URL file. Nếu cần validation logic phức tạp thì tạo file @utils/image_validator.py riêng."

Kết quả: Composer tự động sửa app.py, tạo folder utils/ nếu chưa có, viết hàm validate kích thước và định dạng, cài thư viện Pillow nếu thiếu (ở chế độ Agent), và thêm xử lý lỗi trả về status code 400 nếu file không hợp lệ.

Refactor React component tách logic

Component UserDashboard.tsx dài 300 dòng, bạn muốn tách phần fetch data ra hook riêng để dễ bảo trì.

Thao tác: Mention @UserDashboard.tsx, nhập:

"Refactor component này. Tách toàn bộ logic gọi API /api/user/stats và xử lý caching ra hook mới tên useUserStats đặt trong @hooks/useUserStats.ts. Component gốc chỉ giữ lại phần render UI. Đảm bảo import đúng path và giữ nguyên TypeScript interfaces."

Kết quả: Composer tạo file hooks/useUserStats.ts với đầy đủ type definitions, sửa UserDashboard.tsx để import hook mới, xóa code cũ dư thừa, và tự động cập nhật các import liên quan nếu có file khác dùng chung types.

Ứng dụng

Người không biết code (Non-developer)

Dùng Composer để can thiệp vào website template hoặc tool có sẵn:

• Sửa website bán hàng: Thay đổi màu sắc brand, thêm section testimonial, đổi text trong nhiều file HTML cùng lúc
• Tạo script xử lý file: "Viết Python script đọc file Excel data.xlsx, lọc cột 'Status' bằng 'Active', xuất ra file CSV" — Composer tạo file .py và hướng dẫn chạy
• Sửa cấu hình: Chỉnh sửa file config.yaml hoặc .env mà không sợ sai cú pháp khoảng trắng

Developer và Freelancer

Tăng tốc độ xây dựng sản phẩm:

• Xây MVP nhanh: "Tạo tôi REST API bằng Express.js với CRUD cho model Product, kết nối MongoDB, có validation cơ bản" — Composer tạo cả folder models/, routes/, controllers/ với code chuẩn
• Thêm tính năng vào codebase lạ: Khi nhận dự án cũ, dùng Composer đọc hiểu pattern rồi implement tính năng mới theo đúng style code hiện có
• Viết test automation: Tạo file test cho nhiều module cùng lúc, đảm bảo coverage các edge cases

Team kỹ thuật và DevOps

Duy trì và scale hệ thống:

• Đồng bộ hóa schemas: Khi thay đổi database schema, Composer sẽ sửa cả model backend, API types, và frontend interfaces trong một lượt
• Migration và refactoring: Chuyển đổi từ thư viện cũ sang thư viện mới (ví dụ: từ Moment.js sang Day.js) trên toàn bộ project chỉ bằng một yêu cầu
• Thêm logging/monitoring: Chèn code logging vào tất cả API endpoints để đo hiệu năng, không sót file nào

So sánh

Composer vượt trội khi cần thay đổi liên quan nhiều file — ví dụ thêm một trường dữ liệu phải sửa cả database schema, API, và frontend. Trong khi đó, AI Chat phù hợp để "hỏi tại sao đoạn code này lỗi". Claude Artifacts (trong Claude AI) tốt cho việc thử nghiệm code độc lập, nhưng Composer mạnh hơn vì tích hợp trực tiếp vào project thực tế của bạn, giữ nguyên context và cấu trúc folder.

Bài viết liên quan

Cùng cụm Cursor:

• Bắt đầu với Cursor — Cài đặt và thiết lập ban đầu trước khi dùng Composer
• Làm quen giao diện Cursor — Hiểu rõ các panel và phím tắt để điều hướng nhanh
• Sử dụng AI Chat trong Cursor — So sánh chi tiết khi nào dùng Chat thay vì Composer
• Dùng Cursor khi không biết code — Hướng dẫn đặc biệt cho người mới làm quen với coding

Đọc tiếp:

• Debug code với Cursor — Kết hợp Composer để fix bug liên quan nhiều file cùng lúc
• Claude AI — Cursor sử dụng Claude model bên dưới, hiểu rõ để viết prompt cho Composer hiệu quả hơn
• Automation Platforms — Sau khi code xong với Composer, tự động hóa testing và deploy để hoàn thiện workflow