What AI coding tools can and cannot do
AI coding tools can turn a plain description into a working screen in minutes. They can also hand you a beautiful app that saves nothing and shows every customer's data to everyone. This lesson explains how the tools work, the three kinds you can choose from, what they are good and bad at, and how to pick one for the reorder app you will build in this course.
By the end you can
- Say what vibe coding means, and how the careful version in this course is different
- Explain in plain words how an AI tool decides what code to write, and why it can be confidently wrong
- Compare browser app builders, AI code editors and coding agents: what each sees and controls, where your code lives and how you leave
- Pick a tool for a clickable prototype, a real app with sign-in, or a change to existing code
- Write a first prompt for a prototype of Ravi's "my usual order" screen and check the result
The everyday picture
Imagine you want a new kitchen and you can't build one yourself. You have three ways to get help. A showroom will build a full kitchen inside its own building by the end of the day; you walk around it, ask for changes, and later they ship it to your home. A carpenter can come to your house and build what you point at, one cupboard at a time, while you watch. Or you can give a contractor your house keys and a list, and come back in the evening to see what they did.
All three are fast and skilled. None of them knows what you did not say: that your family is tall, that the tap must connect to the old water pipe, that the left cupboard holds medicine and needs a lock. Each fills the gaps with the most common choice, and the result looks finished either way. A showroom kitchen can have a beautiful tap that is connected to no water at all. AI coding tools are these three helpers. This course teaches you to choose the right helper, say what matters, and check that the water runs.
What vibe coding means
On 2 February 2025, Andrej Karpathy, a well-known AI researcher and a co-founder of OpenAI, posted about a new way of working he called vibe coding. You describe what you want, accept whatever the AI writes, paste error messages back when something breaks, and, in his words, "forget that the code even exists". He said it was fine for throwaway weekend projects. The term spread fast, and Collins Dictionary named it its word of the year for 2025.
People now use the term for two different things. The programmer Simon Willison draws the line clearly. Vibe coding is building software with an AI without reviewing the code it writes. Using AI while you still read, test and understand the result is AI-assisted programming. Both are useful. The first is fine for a toy you will throw away. It is risky for anything that holds other people's data or money.
This course teaches a careful version. You can remember it as describe, check, keep control:
- Describe. Write down what you want before you ask, in a form the AI can follow: who uses it, which screens, what data, which rules (A spec the AI can follow).
- Check. After each change, test it yourself the way a user would, and ask the AI to explain anything you don't understand (Reading and fixing what the AI wrote).
- Keep control. Work in small steps you can undo, keep a copy of the code that you own, and decide yourself on anything that touches data, money or security (Building in small steps, Data and security basics).
You do not need to write code to work this way. You need to know what to ask for, what to check, and when to stop and call an engineer.
Quick check
Which of these is vibe coding in the original sense?
Vibe coding means accepting the AI's code without reviewing it. The first option is the careful version this course teaches, and the third is ordinary programming with a helper. The difference is not the tool; it is whether anyone checks the result.
How the tools work, in plain words
Every tool in this lesson runs on a large language model. A model reads text and predicts the most likely text to come next, one small piece at a time. It learned this from a huge amount of public text and code. When you ask for "a screen with a list of products and a plus button", it writes code that looks like the thousands of similar screens it has seen.
The model only sees what is sent to it with each request. This is called its context: your message (the prompt), earlier messages in the same chat, and the files the tool chooses to show it. Some tools also let it run commands and read what comes back. Three things follow from this, and they explain most AI mistakes:
- It does not know your business. Nobody told it that Ravi buys on 30 days' credit, or that rice is sold only in full bags. It fills the gap with the most common answer it has seen.
- It can be confidently wrong. A prediction comes with no warning label. Code that uses a feature that does not exist looks exactly like code that works, and an explanation of a bug can sound sure and still be a guess. People call this a hallucination.
- It forgets what it was not shown. A new chat starts empty. In a long chat, early details may be summarised or dropped to make room (how this works varies by tool). If a rule matters, write it in a file the tool reads every time, or repeat it.
So the quality of what you get depends on two things you control: what you describe, and what the tool can see. That is why the next lesson is about writing a spec. Developers who want the deeper version, with completion, chat and agents inside a team's workflow, instruction files and reviewing AI pull requests, can read Working with AI coding assistants. Designing AI features explains the models themselves.
Quick check
Imran shows an AI tool the order screen, but not the part of the project that saves orders. He asks why orders are not saved, and it gives a confident, detailed answer. What should he take from that?
A model predicts from its context. A detailed answer is not proof that it saw the right file. It is not lying either; it has no way to know what it was not given. Show it the relevant part, then test the result yourself.
Three kinds of tools
Tools change every few months, but in 2026 they fall into three groups. The names below are examples to help you recognise them, not recommendations. Most have a free tier with a daily or monthly limit, and paid plans for one person commonly start at around $10 to $25 a month at the time of writing. Prices, credits and limits change often, so check each tool's current pricing page before you start.
Browser app builders, such as Lovable, Bolt, v0 and Replit. You type what you want into a chat on a website. The builder creates the whole app and shows a live preview next to the chat. Most can also host the app on a public link and connect a database. The builder sees your chat and the whole project, because it made it, and it controls everything, including where the app runs. Your code lives on the builder's servers. To leave, most can connect to GitHub or let you download the code; check how before you build anything you care about. Cost is usually credits per message, so a long afternoon of changes can use up a month's free allowance.
AI code editors, such as Cursor, Windsurf, or VS Code with GitHub Copilot. A code editor is an app on your computer for working with code files, and the AI sits in a side panel. It sees the files you open or point to, and it suggests changes that you accept or reject. Most editors also have an agent mode that makes larger changes and runs commands, usually after asking you. Your code lives in a folder on your laptop, and you can send a copy to GitHub. You install things and run the app yourself, which later lessons show step by step.
Coding agents, such as Claude Code, OpenAI Codex CLI and Gemini CLI. These work in your project folder through the terminal. You give a task in plain words. The agent reads the files it needs, edits several of them, runs commands (install a package, start the app, run checks), reads the result and tries again. It can do a lot in one go, so it needs the most supervision: work on a copy you can throw away, and read its summary of what changed. Many agents now also run inside editors or on the web, so the lines between the three groups keep blurring.
| Kind | What it sees | What it controls | Where code lives | How you leave |
|---|---|---|---|---|
| Browser app builder | Your chat and the project it made | Everything, including hosting | The builder's servers | GitHub sync or download, if offered |
| AI code editor | Files you open or point to | File changes you accept | A folder on your laptop | You already have the files |
| Coding agent | Any file in the project folder | Files and terminal commands | A folder on your laptop | You already have the files |
Quick check
You build a prototype in a browser app builder. Where is the code, and how do you make sure you keep it?
A browser builder stores the project on its own servers. If your account, plan or the builder changes, your only safe copy is one you exported. The model does not store your project; it only sees what the builder sends it with each request.
Good at, bad at
The tools are strong where the internet has thousands of examples and where a mistake is easy to spot:
- Screens and forms: a product list, a sign-up form with required fields, a confirmation screen.
- Standard CRUD work, such as adding an item to a usual order, changing its quantity or removing it.
- Wiring well-known services together, such as a common sign-in service or a payment provider's test mode, following that service's public instructions.
- Explaining code in plain words, line by line.
- Fixing errors you paste in, when the error message points at the problem.
They are weak where the answer is not written anywhere they can see, or where a small error costs real money:
- Business rules nobody wrote down. A tool can't know that Ravi's order must stay under his credit limit, or that a shop can only order full cartons, unless you say so.
- Security and access rules. Who may see and change which data is easy to leave out, and the app still looks finished. Data and security basics covers sign-in and access rules.
- Data that must be exactly right, like money and stock. Rounding a price, adding up an order, or taking stock off twice can go wrong in ways a screen never shows.
- Big changes in one go. "Rebuild the order flow with a new design" changes so much at once that you can't check it. Small steps are easier to check and to undo.
- Keeping a big project consistent. The tool sees only part of a large project at a time, so it may add a second way of doing something that already exists.
- Knowing what is current. The model learned from text up to a certain date. It may suggest an old version of a tool or a setting that has since changed.
The pattern behind both lists: an AI tool produces what is likely, and you check what is true. The more an error would cost, the more you check. This is not only theory. In 2025 a security researcher scanned 1,645 apps from one popular builder's public showcase and reported that 170 of them let anyone read personal data from their databases. Their screens worked. Their access rules were missing.
Quick check
Which request is an AI tool most likely to get right the first time?
A form with required fields is a common pattern with thousands of examples, and you can see at a glance whether it works. Ravi's credit terms are a rule nobody gave the tool, and exact stock needs careful logic that a screen won't reveal when it is wrong.
Picking a tool, and the risks you own
Choose by the job in front of you. Most beginners meet three jobs:
| Job | Good first choice | Watch out for |
|---|---|---|
| A clickable prototype to show Ravi | A browser app builder: fastest from words to something on a phone, nothing to install | Use sample data only, label it as a prototype, and remember that nothing is saved |
| A real app with sign-in and a database, used by a few real shops | An app builder or an AI editor, with the code in GitHub from day one | The parts that look done and aren't: saving, access rules, secrets. Have an engineer review before real data goes in |
| Changing an existing project someone else built | An AI editor or a coding agent, working on a separate copy of the code where you see every change | Most builders can't open an existing project. Never let an agent change the live app directly |
Whatever tool you use, four risks stay yours. The tool's company does not own them, and neither does the AI.
- Secrets. An API key works like the key to a building. Never paste one into a chat, and never let it end up in code that runs in the browser, where anyone can read it. Data and security basics shows where keys belong.
- Other people's data. Build with sample data. Real shop names, phone numbers and orders go in only after access rules are checked. Also read what the tool's company keeps from your chats and files, and don't paste a company's private data into a tool the company has not approved.
- Licences. Code and packages the AI adds come with a licence that sets the rules for reuse. Ask the tool to list every package it added and its licence, and check the list before you share the app.
- Cost overruns. Credits, hosting and AI usage can all grow quickly. Set a spending limit where the tool allows one, and look at the bill every week in the first month.
Quick check
The builder asks for a payment provider's secret key so it can "make payments work". What do you do?
A secret pasted into a chat may be stored, logged or written straight into code anyone can read. Deleting the message does not undo any of that. A prototype does not need real payments, and later lessons show the safe place for keys.
Build it
Set up a tool and make a first clickable prototype of Ravi's "my usual order" screen, then check it like a careful reviewer.
Pick a tool and make an account
For a first prototype, pick any browser app builder with a free tier. Before you type anything, find two things in its help pages: how to connect GitHub or download the code, and how many free messages or credits you get. Write both down. If you are a developer and prefer an editor or agent, that works too; the prompt below is the same.
Write a short, specific first prompt
Say who it is for, what is on the screen, the sample data, and what is out of scope. Paste this, or your own version of it:
MarkdownBuild a clickable prototype of one phone screen called "My usual order". It is for Ravi, who owns a small corner shop and reorders the same items every week. Show: - The title "My usual order" and the shop name "Ravi's Corner Store". - A list of 6 items. Each row shows name, pack size, price per pack and quantity: Rice 5 kg bag, $6.50, qty 4 Cooking oil 1 L, $2.80, qty 6 Sugar 1 kg, $1.10, qty 10 Tea 100 bags, $2.40, qty 3 Instant noodles 30-pack, $7.20, qty 2 Dish soap 500 ml, $1.30, qty 5 - A minus and a plus button next to each quantity. Quantity never goes below 0. - The order total at the bottom, updated when any quantity changes. - A big "Send order" button that opens a second screen saying the order was sent. Rules: - Prototype with sample data only. No sign-in, no database, no payments. - Show a small "Prototype - sample data" label on both screens. - Large text and buttons that are easy to tap on a small phone. - Only these two screens.Run it and compare with what you expect
Send the prompt and wait for the preview. Your screen will look different from anyone else's, even with the same prompt, because the model predicts a fresh answer each time. The behaviour should match this:
OutputScreen 1 "My usual order": 6 rows, minus and plus buttons, label "Prototype - sample data" Starting total: $81.90 Tap + on Rice: quantity 5, total $88.40 Tap - on Tea four times: quantity 0, total $81.20 (the fourth tap does nothing) Tap "Send order": screen 2 says the order was sent Reload the page: quantities go back to the sample data (nothing is saved, as asked)Check the result with a checklist
Go through every line yourself on a phone, or in the preview at phone size. Write down each line that fails.
MarkdownPrototype check - [ ] Every item, price and starting quantity matches the prompt - [ ] The total is right at the start ($81.90) and after each change - [ ] Quantities cannot go below 0 - [ ] The prototype label shows on both screens - [ ] No sign-in, database or payment was added that I did not ask for - [ ] I can name what is fake: sample data, and a Send button that saves nothing - [ ] I know how to get the code out (GitHub or download) and I have tried it onceFix one thing with a small follow-up
Pick the first failed line and ask for that one fix only, for example: "The total does not change when I tap minus on Tea. Fix only that, and tell me what you changed." Check the whole list again afterwards, because a fix in one place can break another.
Bring it to your team
Ask these before anyone builds on an AI-made prototype.
- Where does the code live today, and do we have a full copy in a GitHub account we control?
- Which parts are fake: sample data, buttons that only change the screen, sign-in that lets anyone in?
- Which business rules are in it, who decided them, and where are they written down?
- What does the tool's company keep from our chats and files?
- What will this cost per month at the pace we are building?
Red flags
- A demo where "Send" shows a success message and nobody has looked at where the order went.
- Real customer or shop data in a prototype.
- An API key in a chat message or in the app's browser code.
- "The AI said it's secure" as the only security check.
- No one has tried exporting the code.
Practice
Pick the tool for three situations
For each situation, pick a kind of tool (browser app builder, AI code editor or coding agent) and explain your choice in two or three sentences. Name one thing you would check or protect in each.
- Tomorrow at 10 am Imran visits Ravi and two other shop owners. He wants something they can tap on a phone to react to the reorder idea. No real data is needed.
- After good feedback, five partner shops will use the app for real for four weeks. Each shop signs in, its usual order is saved, orders reach a sales rep's list, and one shop must never see another shop's orders.
- Tomás has a small existing web page, stored in a GitHub repository, that lists phone orders by sales rep. He wants a filter by city added without breaking what is there.
- Situation 1 uses a browser app builder, with sample data and a prototype label
- Situation 2 keeps the code in GitHub and names access rules (one shop cannot see another's orders) and secrets as things to check, with an engineer's review before real data
- Situation 3 uses an AI editor or a coding agent on a separate copy of the code, and says how the change is checked before it reaches the live page
- Each answer explains the choice by what the tool sees, controls or where the code lives, not by brand
Show a model answer
1. A browser app builder. It is the fastest way from a description to something on a phone, and nothing needs to be saved. I would use sample data only, put a "Prototype" label on every screen, and tell the shop owners that the Send button does nothing yet.
2. An app builder or an AI editor is fine for the screens, but the code goes into GitHub from the first day so we own a copy. The parts that matter are invisible on screen: orders must really be saved, and the database must only let each shop read its own orders. I would test that with two test shops, keep keys out of the browser code, and ask an engineer to review before any real shop signs in.
3. An AI editor or a coding agent, because the code already exists in a repository and a builder can't open it. Work on a separate copy, ask for only the city filter, read the summary of what changed, and have Tomás test the page with real-looking data before the change goes live.
Write the prompt for a second screen
Write a first prompt, 10 to 20 lines, for a prototype of Ravi's "Past orders" screen: his last four orders, each with a date, the number of items and the total, and a "Reorder this" button on each. Then write three checks you will do on the result.
- The prompt says who it is for and that it is a phone screen
- It gives concrete sample data (dates, item counts, totals in dollars)
- It says what is out of scope: no sign-in, database or payments, and a prototype label
- The three checks can be tested by tapping, including what "Reorder this" should do
Show a model answer
Build a clickable prototype of one phone screen called "Past orders".
It is for Ravi, who owns a small corner shop and reorders most weeks.
Show his last 4 orders, newest first. Each row: date, number of items, total.
12 Oct: 6 items, $81.90
5 Oct: 6 items, $79.40
28 Sep: 5 items, $64.20
21 Sep: 6 items, $81.90
Each row has a "Reorder this" button. It opens the "My usual order" screen
with that order's quantities filled in. Nothing is sent from this screen.
Rules:
- Sample data only. No sign-in, no database, no payments.
- Show a "Prototype - sample data" label.
- Large text and buttons for a small phone.
My checks:
1. The four orders show newest first with the dates and totals above.
2. "Reorder this" on 28 Sep opens the order screen with 5 items, not 6.
3. Nothing on this screen sends an order.Check yourself
Imran's prototype shows "Order sent!" and Ravi loves it. Imran wants to tell Ken that sending works. What should he do first?
A success message only proves the screen changed. Following the data to where it should land is the real test. Asking the tool gets another prediction, not a check, and repeating the same tap repeats the same blind spot.
Yesterday, in a long chat, Imran told the builder that partner orders get 5% off above $200. Today he opens a new chat and asks it to "add the discount rule". It adds 10% off every order. What best explains this?
The model only knows what is in its context, and a new chat starts empty. It did not choose against the rule; it never saw it. Writing rules down where the tool reads them is the fix, and the discount itself is still something to check by hand.
Which of these jobs needs the most checking by a person, even when the AI's result looks right?
Money that must be exactly right, under a business rule the tool cannot know by itself, is where AI errors are both likely and invisible. A form layout or a button colour is easy to check by looking, and an explanation can be checked by trying it.
Flashcards
Key takeaways
- Vibe coding means accepting AI code without reviewing it. This course teaches the careful version: describe, check, keep control.
- The model predicts likely code from what it is shown. It does not know your business, it can be confidently wrong, and it forgets what is not in its context.
- Browser builders are fastest for prototypes and keep the code on their servers; editors and agents work on a folder you own. Know how you will leave before you start.
- AI tools are good at screens, forms, standard CRUD and explaining code, and weak at unwritten rules, access rules, exact money and stock, and big changes.
- Secrets, other people's data, licences and cost stay your responsibility. Follow the data before you call anything done.
Sources and further reading
- The post that coined "vibe coding", Andrej Karpathy on X, 2 February 2025
- Not all AI-assisted programming is vibe coding (but vibe coding rocks), Simon Willison, 2025
- Vibe coding, Wikipedia (history of the term, Collins word of the year 2025, the 2025 scan of builder-made apps), read in 2026
- GitHub integration, Lovable documentation: one example of how a browser builder exports code, read in 2026
- Codex CLI and Gemini CLI, two open-source coding agents on GitHub, read in 2026
- Row Level Security, Supabase documentation: the kind of database access rule that was missing in Imran's app, read in 2026