[Series AI] Cursor và Windsurf – Demo agent build ChatApp AI LLM

Chào anh em! Chúng ta lại gặp nhau trong series Cursor AI for Developers.

Hai bài trước, chúng ta đã cùng nhau set up tư duy, hiểu về LLM, và học cách "mớm" Context cho AI sao cho chuẩn. Lẽ ra bài này mình sẽ đi sâu thêm vào Cursor, nhưng dạo gần đây cõi mạng dev đang rần rần vì một thế lực mới nổi: Windsurf (của nhà Codeium).

Nhiều anh em nhắn hỏi mình: "Giữa Cursor và Windsurf thì con nào ngon hơn?". Để trả lời câu hỏi này một cách khách quan nhất, hôm nay chúng ta sẽ không nói lý thuyết suông nữa. Mình sẽ đặt hai "con hàng" này lên bàn cân, và sau đó thực chiến dùng AI Agent để build một con ChatApp AI LLM từ con số 0 bằng Node.js và TypeScript luôn cho nóng!

1. Cursor vs. Windsurf: Cuộc chiến của những siêu Agent

Cả hai đều là AI-native IDE (fork từ VS Code), nhưng triết lý hoạt động của các Agent bên trong lại có chút khác biệt.

Cursor (Vũ khí: Composer)

• Phong cách: Giống như một người trợ lý đắc lực, bạn bảo gì nó làm nấy, cực kỳ ngoan và chính xác.
• Điểm mạnh: Tính năng Composer (Cmd + I) của Cursor hiện tại quản lý việc sửa nhiều file cùng lúc (multi-file edit) cực kỳ ngon. Khả năng Indexing toàn bộ project của Cursor (như mình đã nói ở bài 1) vẫn đang là top 1. Nó hiểu rất sâu sự liên kết giữa các class, interface và module.
• Điểm yếu: Đôi khi bạn vẫn phải tự tay "ấn nút" duyệt từng thay đổi, và phải chủ động mớm context liên tục nếu luồng logic quá dài.

Windsurf (Vũ khí: Cascade)

• Phong cách: Giống như một anh Senior thích tự chủ. Tính năng Cascade của Windsurf mang đậm tính "Agentic" (tự chủ hành động).
• Điểm mạnh: Bạn quăng cho nó một task lớn, Cascade sẽ tự động lập kế hoạch, tự mở file, tự viết code, tự mở terminal chạy thử, thấy lỗi báo đỏ nó tự đọc log rồi tự sửa luôn mà không cần bạn phải can thiệp từng bước. Cảm giác nhìn Windsurf tự động gõ lệnh trong terminal rất "đã".
• Điểm yếu: Vì nó quá "tự chủ", đôi khi nó sẽ... xóa nhầm hoặc đi sai hướng nếu prompt ban đầu của bạn không đủ chặt chẽ.

Chốt lại: Nếu bạn muốn một công cụ refactor an toàn, hiểu sâu hệ thống lớn -> Cursor. Nếu bạn muốn prototyping nhanh, build tính năng từ đầu và lười debug terminal -> Windsurf.

2. Thực chiến: Dùng Agent build ChatApp AI LLM (Node.js + TypeScript)

Để anh em dễ hình dung sức mạnh của AI Agent (mình sẽ dùng Cursor Composer kết hợp tư duy Prompting cho demo này), chúng ta sẽ build một Backend API đơn giản cho một ứng dụng Chat tương tự ChatGPT.

Bước 1: Khởi tạo Project bằng 1 câu lệnh

Thay vì phải tự gõ npm init, cài đặt các package loằng ngoằng, mình mở Composer lên (chế độ Agent) và quăng prompt:

"Tạo cho tôi một project Express.js sử dụng TypeScript. Cài đặt các thư viện cần thiết: express, cors, dotenv, và openai SDK. Setup sẵn cấu trúc thư mục: /src/controllers, /src/routes, /src/services. Cấu hình tsconfig.json chuẩn để build ra thư mục /dist."

Kết quả: Agent tự động tạo file package.json, chạy lệnh npm install, setup file server.ts và chia thư mục chuẩn xác chỉ trong khoảng 30 giây. Anh em backend nhìn vào là thấy ưng ngay vì không phải động tay vào boilerplate code.

Bước 2: Build luồng Core Logic tích hợp LLM

Tiếp theo, mình cần một service để gọi API của OpenAI (hoặc Gemini tùy anh em) và có tính năng Streaming (chữ nhảy ra từng từ giống ChatGPT).

Prompt cho Agent:

"Trong thư mục /services, tạo file llm.service.ts. Viết một class tích hợp OpenAI SDK. Yêu cầu có một method chatStream nhận vào history messages của user. Dùng cơ chế Server-Sent Events (SSE) để stream response về cho client. Nhớ handle try/catch và log lỗi ra console nếu thiếu API Key."

Lúc này, Agent sẽ tự động viết toàn bộ logic stream. Nếu anh em nào từng làm stream data trên Node.js sẽ biết việc setup headers Content-Type: text/event-stream đôi khi khá lắt nhắt. Nhờ AI, đoạn code này được gen ra chuẩn chỉ không sai một dấu phẩy.

Bước 3: Debug như một vị thần

Giả sử trong quá trình ghép Route và Controller, mình lỡ quên chưa parse JSON ở middleware (lỗi kinh điển req.body is undefined).

Mình khởi động server, gọi API qua Postman và server báo lỗi. Thay vì mò mẫm, mình chỉ việc bôi đen dòng lỗi trên Terminal của Cursor, bấm Cmd + Shift + L (Chat with error):

"Fix lỗi này giúp tôi. Tìm xem tôi đang cấu hình thiếu cái gì ở server.ts?"

Agent lập tức quét file server.ts, phát hiện thiếu app.use(express.json()), tự động insert code vào đúng dòng và khởi động lại server. Quá trình debug từ 10 phút rút xuống còn 10 giây!

3. Tạm kết bài 3

Anh em thấy đấy, khi kết hợp đúng Context và một tư duy hệ thống mạch lạc, Agent trong cả Cursor hay Windsurf đều biến thành một "cỗ máy cày code" khủng khiếp. Việc build một con ChatApp cơ bản giờ đây chỉ tốn của anh em vài chục phút thay vì nửa ngày hì hục set up.

Chúng ta đang dịch chuyển từ việc "gõ từng dòng code" sang việc "quản lý luồng suy nghĩ của AI".

Teaser Bài Tiếp Theo:

Ok, code bằng AI thì sướng rồi. Nhưng thực tế đi làm, anh em đâu chỉ có mở máy lên là gõ code luôn đúng không? Trước khi đụng vào code, chúng ta phải research giải pháp, so sánh công nghệ, vẽ architecture, lên plan thực thi... Đôi khi khâu này còn tốn thời gian hơn cả việc ngồi dev.

Vậy có con AI nào giúp mình làm luôn cái việc "đau não" đó không?

Câu trả lời là CÓ! Ở buổi tới, mình sẽ dắt anh em thoát ly khỏi IDE một chút, để đến với những công cụ Agentic chuyên trị việc Research và Lên Plan cực kỳ bá đạo.

👉 [Series Cursor AI - Bài 4] Buổi 4 – Manus Genspark To Research And Plan Tech Solution

Anh em nhớ đón đọc nhé! Ai đã rước Windsurf về trải nghiệm thử chưa, comment chém gió phía dưới cho xôm tụ nào!