Build Websites and Apps with AI
Hands-onIntermediate 35 min· Working skills · 20 of 21

Coding agents: Claude Code, Copilot, Gemini CLI and Cursor

Coding agents can read your project, edit files and run commands. Learn how they work, how the main tools compare, and a safe plan-first routine for giving one a real task in your coffee shop project.

A coding agent is an AI that does not only answer: it acts. It can read your project files, edit them, run commands (install packages, run tests), look at the results and try again, until the task is done or it asks you for help. This is different from a chat assistant, where you copy and paste code yourself.

In this tutorial you will learn how agents work, compare four popular tools (Claude Code, GitHub Copilot's agent mode, Gemini CLI and Cursor), and follow a safe routine for giving an agent a real task in your coffee shop project. For how agents differ from chat and autocomplete in general, see *AI coding tools compared*.

Prerequisites: Git, Node.js, VS Code, and the Brew & Bean project from earlier lessons committed in Git. You need one agent tool; you do not need all four.

How an agent works

Under the hood an agent is a loop:

1. You give a goal. 2. The model decides on an action, such as 'read src/App.jsx' or 'run npm test'. 3. The tool carries out the action and sends the result back to the model. 4. The model decides the next action, and so on, until it thinks the goal is met.

The model never touches your files directly. The tool does, and most tools ask your permission before editing files or running commands. That permission step is your safety net. Reading what the agent wants to do before you approve is the most important habit in this lesson.

The four tools

Tools change quickly: names, plans and limits move often. Treat the table as a map and check each tool's official page for what is current, including what its free plan allows.

Agent tools at a glance

ToolWhere it runsHow you use itCost (check the official page)
Claude CodeTerminal, also VS Code and other IDEsType claude in your project folder and chatNeeds a paid Claude plan or API credits; not part of the free Claude chat plan at the time of writing
GitHub Copilot (agent mode)Inside VS Code (and other IDEs)Open Copilot Chat and choose Agent modeCopilot Free has monthly limits; verified students can get free Copilot Pro through the GitHub Student Developer Pack
Gemini CLITerminalType gemini in your project folderGoogle has offered free usage with a Google account, but limits and plans have changed; check Google's page
CursorA separate editor (built on VS Code)Chat panel in Agent modeHas a free plan with limits and paid plans; check the official page

They share the same core idea, so skills transfer. A beginner on a budget can start with Copilot Free in VS Code, since you are already using VS Code. If you have access to a paid plan for any of the others, use that. Prefer whichever you can use for free and regularly.

Install and start

Each tool has its own installer, and the instructions change. Use the official docs for the exact current steps. These are the usual starting points.

Terminal
# Claude Code (needs Node.js; Anthropic also offers a native installer)
npm install -g @anthropic-ai/claude-code

# Gemini CLI
npm install -g @google/gemini-cli

# Start either one from inside your project folder
cd brew-and-bean
claude
# or
gemini

Both tools open an interactive chat in the terminal and ask you to sign in the first time. Run the command from the project folder, because that is the folder the agent will work in.

For Copilot: install the GitHub Copilot extension in VS Code, sign in to GitHub, open the Chat view, and use the mode drop-down to select Agent. For Cursor: download the editor from its website, open your project folder in it, and open the chat panel in Agent mode.

Always work in Git

Before an agent touches your project, run git status and commit your work. Then every change the agent makes shows up in git diff, and you can undo everything with git restore . (for edited files) or by going back to your last commit.

Give the agent project notes

Agents start every session knowing nothing about your project. Most tools read a notes file from your project folder: Claude Code reads CLAUDE.md, Gemini CLI reads GEMINI.md, and several tools, including Copilot, can use files such as AGENTS.md or .github/copilot-instructions.md. Check your tool's docs for the exact file name. In it you write the commands and rules the agent should always follow.

Project notes file
# Project notes for AI agents (CLAUDE.md / GEMINI.md / AGENTS.md style)

## What this is
Brew & Bean: pickup-only coffee shop website. React + Vite frontend in /web,
FastAPI backend in /api.

## Commands
- Frontend: cd web && npm install && npm run dev   (http://localhost:5173)
- Frontend tests: cd web && npm test
- Backend: cd api && uv run uvicorn main:app --reload   (http://localhost:8000)
- Backend tests: cd api && uv run pytest

## Rules
- Plain JavaScript (JSX), no TypeScript.
- Prices and totals are calculated on the server only.
- Never commit .env files. Never print secrets.
- Make small changes. Run the tests before saying a task is done.
- Ask before adding a new dependency.

Keep it short and factual. Update it when a rule is broken twice. The commands let the agent run your tests by itself; the rules stop it making choices you do not want.

Your first agent task, step by step

We will ask the agent to add a small feature: show a 'Sold out' badge on any menu item with available: false. It touches the data, a component and the styles, so it is a good size: bigger than a one-liner, small enough to review.

A safe routine

  1. 1Commit your current work: git add -A then git commit -m "Before agent task".
  2. 2Start the agent in the project folder.
  3. 3Ask it to plan first and not edit anything yet (use the prompt below).
  4. 4Read the plan. Correct it if it is wrong: wrong files, extra features, new libraries.
  5. 5Tell it to go ahead, one step at a time if the plan is long.
  6. 6Read each permission request. Approve file edits and your test commands. Refuse anything surprising, such as deleting files, installing unknown packages or reading outside the project.
  7. 7When it says it is done, run the tests and the app yourself. Do not trust 'all tests pass' without seeing it.
  8. 8Read git diff line by line. If it is good, commit. If not, undo with Git and try again with a better prompt.
Prompt · Plan before editing
Goal: on the menu page, show a 'Sold out' badge on any menu item where `available` is false, and disable its Add button.

Do not edit any files yet. First: read the relevant files and tell me (1) which files you will change, (2) what you will change in each, (3) how we will test it. Do not add new libraries. Wait for my approval.

What to expect: A good plan names real files from your project, stays small and mentions a test. If it names files that do not exist, it has not read your project properly.

Prompt · Go ahead with limits
Plan approved. Implement it now. Rules: change only the files in your plan, keep the existing code style, add or update a test, run `npm test`, and show me the result. If you need to change anything else, stop and ask first.

What to expect: The 'stop and ask' rule keeps the agent inside the scope you agreed.

What you should see
The agent lists the files it read, proposes edits as a diff, and asks 'Allow this edit?'. After you approve, it runs `npm test`, reports the result, and summarises what changed. The app on localhost shows a Sold out badge on unavailable items.

Where agents go wrong

Common problems and fixes

ProblemWhat it looks likeFix
Scope creepEdits ten files for a small taskAsk for a plan; say 'change only these files'
Fake successSays 'fixed' but the app still failsRun the app and tests yourself
Going in circlesTries the same failing fix again and againStop it, revert, give the exact error and one hint, or start a fresh session
Forgetting contextIgnores your rules in long sessionsPut rules in the project notes file; start new sessions for new tasks
Risky commandsWants to delete files, force-push or install odd packagesRefuse; read every command before approving
Invented APIsCalls functions or flags that do not existRun the code; check against official docs

Do not switch off the permission prompts

Some tools have a mode that approves everything automatically. A beginner should not use it. An agent can run any command your account can run, including deleting files. If you ever try auto-approval, use a throwaway project or a sandbox, with everything committed first, and never with real secrets in the folder.

Your code goes to the provider

Agents send your files and command output to the AI provider's servers. Do not let them read folders with secrets, customer data or your employer's private code unless your organisation allows that tool. Keep .env files out of the project folder the agent works in, or check your tool's settings for ignoring files.

Choosing between chat, IDE assistant and agent

Use chat to learn a concept or get a snippet. Use autocomplete while typing familiar code. Use an agent for tasks that span several files or need running commands, such as adding a feature, fixing a failing test or setting up a project. For a one-line change, an agent is slower than typing it yourself. And the more you hand to an agent, the more you must review.

How this comes up in interviews

Many companies now ask how you use AI tools at work. A good answer is specific: you plan first, give the agent small tasks, keep the permission checks on, run tests, and review the diff. You can also describe a time an agent was wrong and how you caught it. Some interviews are done without AI tools on purpose, to test your fundamentals; see *When not to trust AI, and why fundamentals still matter*.

Try it: Run the routine on your own project

Choose one agent tool you can use. Write a project notes file for your coffee shop repo using the example above. Then give the agent this task using the plan-first routine: 'Add a search box to the menu page that filters items by name.' Record: how many files it changed, whether the plan matched the result, and one thing you had to fix.

Try it: Compare two tools

Give the same small task to two different tools (for example Copilot agent mode and Gemini CLI) from the same Git commit. After each, save the diff, then reset with Git. Compare the plan, the code quality, the number of mistakes and how much you had to correct.

Key takeaways

  1. An agent is a loop: it reads, edits, runs commands and checks results until the goal is met.
  2. Commit to Git before every agent task so you can review the diff and undo.
  3. Ask for a plan first, then approve, then implement in small steps.
  4. Keep permission prompts on and read every command before approving.
  5. Put commands and rules in the project notes file (CLAUDE.md, GEMINI.md, AGENTS.md or your tool's equivalent).
  6. Run the tests and the app yourself. Agents can claim success when the work is wrong.
  7. Tools, plans and free limits change often; check the official pages.

Check yourself

Finishing the quiz marks the lesson as done.

1. What makes a coding agent different from a chat assistant?

2. What should you do before starting an agent task?

3. Why ask the agent for a plan before it edits files?

4. An agent says 'Done, all tests pass'. What is the right next step?

5. What is the purpose of a project notes file like CLAUDE.md or GEMINI.md?

Saved on this device. Create a free account to keep it on every device.

Practise this with Sam

A real mock interview, out loud, with an honest scorecard. Free to start.

Start free