Chuyển đến nội dung chính

Lesson 5: Agent Mode — Let AI write code for you

What is an Agent, how does an Agent work (plan → execute → verify), Agent Loop, Chat view (Ctrl+Cmd+I), compare Agent vs Ask vs Plan mode. Permission levels: Default, Bypass Approvals, Autopilot. Hands-on: building the first web app with Agent.

💻 Programming — Lesson 5 Lesson 5: Agent Mode — Let AI write the code itself you

Vibe Coding with GitHub Copilot: From Basics to Advanced

Part 2: Agent Mode — AI automatically writes code

xdev.asia

1. What is an agent?

In GitHub Copilot, one Agent is an active AI assistant autonomously to complete a complete programming task. Unlike inline suggestions that only suggest a few lines, Agent has the ability to:

  • 📋 Make a plan (break down tasks into steps)
  • 📝 Create and edit multiple files at the same time
  • 💻 Run terminal commands (install packages, build, test)
  • 🔄 Self-correction when encountering error (self-correct)
  • 🔧 Use tools (read files, search, web, extensions)

This is the foundation of Real Vibe Coding — you describe the request, the Agent executes it all.

2. Agent Loop — How Agents work

┌─────────────────────────────────────────────────┐
│              AGENT LOOP                          │
├─────────────────────────────────────────────────┤
│                                                  │
│  User Prompt: "Build a REST API for blog posts"  │
│           ↓                                      │
│  ┌─── PLAN ───┐                                  │
│  │ 1. Setup project                              │
│  │ 2. Create models                              │
│  │ 3. Create routes                              │
│  │ 4. Add middleware                             │
│  │ 5. Test                                       │
│  └────────────┘                                  │
│           ↓                                      │
│  ┌─── EXECUTE ──┐                                │
│  │ Create files  │ ←─ Tool: createFile           │
│  │ Write code    │ ←─ Tool: editFile             │
│  │ Run commands  │ ←─ Tool: runInTerminal        │
│  └──────────────┘                                │
│           ↓                                      │
│  ┌─── VERIFY ───┐                                │
│  │ Check errors  │ ←─ Tool: getErrors            │
│  │ Run tests     │ ←─ Tool: runInTerminal        │
│  │ Self-correct  │ → Quay lại EXECUTE nếu fail   │
│  └──────────────┘                                │
│           ↓                                      │
│  ✅ Complete → User review                       │
│                                                  │
└─────────────────────────────────────────────────┘

3. Three Built-in Agents

3.1. Agent (default)

Autonomy to plan and implement changes, create files, run commands, use tools. This is the agent you use the most for Vibe Coding.

3.2. Plan

Create a structured implementation plan but don't write code. After the plan is OK, you hand off to Agent to execute.

3.3. Ask

Answer questions about code, concepts, codebase do not change files. Use when you need to understand before coding.

Chọn agent trong Chat view:

┌────────────────────────────┐
│  Agent ▼                   │  ← Click dropdown
├────────────────────────────┤
│  ● Agent    (implement)    │
│  ○ Plan     (plan only)    │
│  ○ Ask      (Q&A only)     │
│  ○ Reviewer (custom)       │
└────────────────────────────┘

4. Permission Levels — Control Agent permissions

The agent needs to run commands and change files — you decide the level of autonomy:

Level Description suitable when
Default Approvals Ask for confirmation for write/run tools First time using, production code
Bypass Approvals Auto-approve all tool calls Trusted tasks, prototype
Autopilot (Preview) Auto-approve + auto-respond questions Fully autonomous, side projects

⚠️ Security note: At the Autopilot level, the Agent can run any command — only used for trusted projects on the local machine.

5. Hands-on: Build Web App with Agent Mode

Step 1: Open Chat View

Press Ctrl+Cmd+I (macOS) or Ctrl+Alt+I (Windows/Linux)

Step 2: Select Agent mode

From the dropdown, select "Agent"

Step 3: Write prompt

Create a modern expense tracker web application with:
- Add expenses with amount, category, and date
- View expenses in a table with sorting
- Dashboard with summary charts (total by category)
- Filter expenses by date range and category
- Local storage to persist data
- Modern dark theme UI with smooth animations
- Responsive design for mobile

Use vanilla HTML, CSS, and JavaScript. No frameworks needed.

Step 4: Observe Agent working

Agent will:

  1. Analyze requirements
  2. Create file structure: index.html, styles.css, app.js
  3. Write HTML semantic structure
  4. Write CSS with dark theme and responsive
  5. Write JavaScript for CRUD logic, charts, filters
  6. Can run preview

Step 5: Review and Accept

View diff for each file → press "Keep" to accept, or request changes.

Step 6: Iterate

Continue the conversation to add features:

Add an export to CSV button and a monthly budget feature with progress bar

6. Agent Session Management

Each task runs in one session. session separate:

  • Sessions List: view all sessions (active, paused, completed) in Chat panel
  • Multiple sessions: run multiple sessions in parallel for many different tasks
  • Resume sessions: return to the old session to continue iterate
  • Review changes: view all file changes in a session

7. Tools that Agent uses

Agent has access to built-in tools:

Tools Function
read Read files in workspace
editFile Create/edit files
runInTerminal Run shell commands
search. search Search in codebase
listDir List files in directory
getErrors Get compile/lint errors
web Search the web
usages Find references of symbols

8. Best Practices for Agent Mode

✅ Should:

  • Description is clear and detailed: include tech stack, patterns, constraints
  • Break large tasks into small pieces: "Add auth" first, "Add CRUD" later, instead of "Build everything"
  • Review each step: Read the generated Agent code, especially important logic
  • Use /init first: create custom instructions so that Agent understands the conventions
  • Iterate, not redo: continue the session instead of starting over

❌ Should not:

  • Use Autopilot for production code
  • Accept all without reviewing any files
  • Prompt is too vague: "Make it better"
  • Let Agent install packages without your knowledge
  • Skip error messages — read and provided to Agent

9. Debugging with Agent Mode

The agent is especially powerful for debugging because it can:

  1. Read the error message
  2. Trace root cause across multiple files
  3. Apply fix
  4. Re-run test to verify
// Prompt ví dụ:
The test in tests/auth.test.ts is failing with "TypeError: Cannot read properties
of undefined (reading 'token')". Find the root cause and fix it.

10. Summary

Concept Key Takeaway
Agent Autonomous AI assistant: plan → execute → verify
3 built-in agents Agent (implement), Plan (plan), Ask (Q&A)
Permission levels Default → Bypass → Autopilot (increasing autonomy)
Agent Loop Repeat execute + verify until the task is completed
Sessions Each task = 1 session, can run in parallel
Best practices Clear prompt + review code + iterate

The next article will go deeper Plan Agent — planning techniques before coding, giving you better control over AI output.