VS Code Agents Tutorial: Bốn loại agent Microsoft muốn bạn dùng

TL;DR

VS Code Agents Tutorial là cánh cửa Microsoft mở ra để dev chuyển từ workflow chat-with-LLM sang workflow agent-first. Thay vì tôn vinh một tính năng đơn lẻ, tutorial chia agent thành 4 loại theo trục vị trí + tính tương tác: Local Agent chạy ngay trong editor, Plan Agent lo lập kế hoạch, Copilot CLI chạy nền với Git worktree, Cloud Agent chạy trên hạ tầng GitHub. Bài thực hành xây todo app rồi giao mỗi giai đoạn cho một loại agent khác nhau, để dev cảm nhận chứ không chỉ đọc lý thuyết.

Vì sao tutorial này đáng đọc

Phần lớn hướng dẫn về AI coding hiện nay chỉ kể chuyện ngồi chat với một model, hỏi đáp xong copy code về. Tutorial mới của VS Code đi xa hơn: nó coi agent là một danh từ riêng có hành vi, không phải tính năng phụ trong Copilot Chat. Mỗi loại agent có tính cách khác nhau, phù hợp giai đoạn khác nhau, và dev được dạy cách chuyền tay session từ loại này sang loại khác khi nhu cầu thay đổi.

Điểm nữa là tutorial không giới thiệu chay. Nó bắt dev build một todo app HTML/CSS/JS đơn giản nhưng đủ chỗ cho 3 use case lớn: scaffold ban đầu, thêm feature có yêu cầu UX phức tạp (theme toggle persist preference), và redesign toàn bộ layout. Mỗi use case map vào một loại agent.

Bốn loại agent và khi nào dùng loại nào

Microsoft phân agent theo hai chiều: nơi agent chạy (local máy bạn, background trên máy bạn, cloud GitHub, third-party) và tính tương tác (interactive cần feedback liên tục, hay autonomous chạy nền). Từ đó ra bốn họ chính:

• Local Agent - chạy trong VS Code, có context workspace, đọc file, sửa file, chạy lệnh trong terminal tích hợp. Hợp cho việc cần feedback ngay như brainstorm, scaffold dự án mới, iterate UI. Trong Chat view có 3 sub-agent: Agent (làm task), Plan (lập kế hoạch), Ask (hỏi đáp).
• Plan Agent - một biến thể local nhưng chuyên về spec. Nó hỏi câu làm rõ trước khi viết kế hoạch, không tự ý nhảy vào sửa code. Hợp cho task có nhiều file, nhiều bước, cần thống nhất tiếp cận trước khi tốn token.
• Copilot CLI - chạy nền trên máy của bạn, sử dụng Git worktree để cô lập thay đổi. Dev không cần ngồi nhìn từng diff. Phù hợp giao task dài, định nghĩa rõ output, và không cần can thiệp giữa chừng.
• Cloud Agent - chạy trên hạ tầng GitHub, đồng bộ qua PR. Dùng cho task lớn không yêu cầu máy local bật, hoặc task cần collaborate với teammate qua review GitHub.

Bên cạnh đó còn third-party agent (Anthropic Claude, OpenAI) tiếp cận qua Agents window mới - phần này sẽ nói ngay phía dưới.

Đi qua tutorial từng bước

Tutorial chia làm 3 step lớn, mỗi step minh hoạ một loại agent.

Step 1 - Local Agent dựng todo app

Dev tạo thư mục mới rồi init git:

mkdir todo-app
cd todo-app
git init

Mở Chat view bằng phím tắt Ctrl+Alt+I (Windows/Linux) hoặc Cmd+I (macOS), chọn Agent từ dropdown, gõ prompt:

Create a simple todo app with HTML, CSS, and JavaScript. Include an input field to add todos, a list to display them, and a delete button for each item.

Agent tự lên kế hoạch tạo các file, viết HTML/CSS/JS, đề xuất từng diff. Dev xem từng thay đổi rồi bấm Keep hoặc Undo. Sau đó iterate bằng prompt thứ hai: "Mark todos as completed with a strikethrough effect." Đây là dạng workflow interactive điển hình: feedback nhanh, sửa nhỏ nhiều lần.

Step 2 - Plan + Copilot CLI thêm theme toggle

Theme toggle có nhiều quyết định: dùng CSS variable hay class? Persist ở localStorage hay cookie? Auto-detect prefers-color-scheme? Đây là chỗ Plan Agent toả sáng. Prompt:

Create a plan to add a dark/light theme toggle to the app. The toggle should switch between themes and persist the user's preference.

Plan Agent đặt câu hỏi làm rõ trước khi viết file, ra một spec có cấu trúc. Sau đó dev có thể bàn giao cho Copilot CLI chạy nền - không cần ngồi nhìn diff vì spec đã chốt. Mỗi command terminal vẫn phải bấm Approve, vì policy mặc định không cho phép tự ý rm -rf hay git push --force.

Step 3 - Cloud Agent redesign layout

Bước cuối là task lớn không cần can thiệp: redesign UI. Prompt:

Redesign the todo app layout to improve user experience. Update colors, spacing, typography, and add animations to give it a modern look.

Cloud Agent chạy trên runner GitHub, mở PR khi xong. Dev có thể đóng laptop, qua máy khác mở PR review. Đây cũng là form phù hợp khi muốn collaborate với teammate vì mọi thay đổi đều ở dạng pull request, không phải diff cục bộ.

Agent loop chuẩn: Understand - Act - Validate

Tutorial nhấn mạnh agent không phải con bot bịa code rồi xong. Mọi loại agent đều theo cùng một vòng lặp:

1. Understand - đọc file, search codebase, tra cứu doc/MCP server để hiểu context.
2. Act - sửa file, chạy lệnh terminal, gọi external service qua tool.
3. Validate - chạy test, kiểm tra compiler error, đọc lại diff vừa tạo.

Vòng lặp này lặp đến khi task xong hoặc agent gặp barrier không tự xử được. Hiểu được agent loop giúp dev viết prompt tốt hơn: thay vì hỏi cấp 1 "sửa giúp tôi", có thể cung cấp luôn cách validate ("chạy npm test sau khi sửa") để agent tự đóng vòng.

Tool integration: built-in, MCP, extension

Agent mà không có tool thì chỉ là chat. VS Code phân tool làm 3 nhóm: built-in (search code, run terminal, fetch web), MCP tool (qua Model Context Protocol server bạn cài), và extension tool (do extension third-party đóng góp). Dev có thể tham chiếu tool trực tiếp trong prompt bằng cú pháp #, ví dụ #codebase hoặc #web.

Tutorial cũng đề cập feature tool set: gom nhiều tool thành một collection, đặt tên rồi gọi như một entity duy nhất. Hợp cho team có workflow riêng - định nghĩa 1 tool set "reader" gồm grep + read + web fetch, ai cũng dùng được cùng cấu hình.

Agents window: phòng làm việc cho agent

Đi kèm tutorial là Agents window đang ở trạng thái Preview. Khác với Chat view bám theo workspace hiện tại, Agents window là một cửa sổ riêng đứng cấp cao hơn: sidebar liệt kê toàn bộ session theo workspace hoặc thời gian, panel Changes hiển thị diff, có integrated browser để test localhost ngay bên cạnh.

Agents window hỗ trợ Copilot CLI, Copilot Cloud, và Claude agent. Dev có thể chạy 3 task song song trong 3 workspace khác nhau, mỗi cái một loại agent, mà không cần mở 3 instance VS Code. Đây là tín hiệu rõ rằng Microsoft đang xây UX cho dev điều phối agent, không chỉ chat với một agent.

Setup và yêu cầu cần biết

Trước khi mở tutorial, dev cần:

• VS Code phiên bản đủ mới có Agent Mode trong Copilot Chat.
• Hai extension riêng: GitHub Copilot và GitHub Copilot Chat.
• Bật AI features trong Settings.
• Tài khoản GitHub - bắt buộc nếu dùng Cloud Agent.
• Tùy chọn: subscription Copilot hoặc dùng BYOK để cắm API key của model bất kỳ.

Lưu ý nhỏ: Edit mode cũ đã deprecate, Agent mode thay thế hoàn toàn. Một số config workspace nhạy cảm được protect khỏi sửa nhầm, và terminal command vẫn cần approve thủ công - đây là rào cản an toàn cố ý.

Khi nào dev nên thử ngay

Nếu bạn đang chỉ dùng Chat view của Copilot để hỏi đáp, tutorial này đáng làm vì 3 lý do:

1. Nó cho bạn một khung phân loại rõ ràng để chọn đúng loại agent cho từng task, thay vì luôn dùng cùng một workflow cho mọi thứ.
2. Nó dạy bạn cách chuyền session giữa các loại agent - skill cần thiết khi task phình to ngoài dự kiến.
3. Nó là cách rẻ nhất để cảm nhận Agents window mới trước khi nó GA.

Còn nếu bạn đã thoải mái với Cursor hoặc Claude Code và đang phân vân chuyển sang VS Code, hãy đọc kỹ phần Agents window và Cloud Agent. Đây là hai thứ tạo khác biệt rõ ràng so với workflow agent CLI thuần.

via VS Code Docs - Tutorial: Work with agents in VS Code