Skip to main content
Building with AI (Vibe Coding)

⏱ About 15 min15 XP

The First Working Version

There is a moment in every project that changes everything: the moment it runs. Not perfectly, not beautifully — just runs. The button does something. The page loads. The number appears. That moment, however small, proves the project is real. Everything before it is theory. Everything after it is improvement.

What an MVP Actually Means

Professional developers call this a Minimum Viable Product, or MVP. The word 'viable' is important — it means it actually works, not just that it exists. An MVP is the smallest version of your project that does the core thing you set out to do. For Marcus's reading tracker, the MVP is not the beautiful finished app. It is a page with one input box and one button that saves an entry. That is it. No colors, no polish, no error messages yet. But it saves an entry — the core function works. The MVP is not your finished project. It is the foundation that every improvement will be built on top of.

Definition: MVP (Minimum Viable Product)

An MVP is the smallest version of a product that does the one core thing it is supposed to do. It is intentionally incomplete. Its purpose is to prove the core idea works so you can build from a real foundation instead of a plan.

Here is how to use your strong prompt from Lesson 2 to get a first working version with AI. Step 1: Give the AI your full prompt. Ask for a complete, runnable version — not a partial skeleton. Step 2: Copy the output exactly into your editor or tool. Do not edit it yet. Step 3: Run it. If it works at all — even badly — you have an MVP. If it crashes, read the error message and bring it back to the AI. Step 4: Confirm the one core function works. Everything else is bonus. Priya got a running quiz app in her first prompt. It had the right questions. The styling was default and plain. The score counter did not work. That was fine — the core function, showing questions and checking answers, worked. She had an MVP.

Reading and Sharing Error Messages

Your first version will probably have something broken. That is normal and expected. The skill of reading an error message is one of the most valuable you will ever develop as a builder. An error message is not an insult. It is a clue. It usually tells you what went wrong and where. When something breaks, do this: 1. Read the error message completely. Identify the key phrase — usually near the top. 2. Copy the error message and paste it into your conversation with the AI. 3. Describe what you expected to happen versus what actually happened. 4. Ask the AI to explain and fix it. For example: 'I got this error when I clicked the Submit button: TypeError: Cannot read property length of undefined. I expected it to count the characters in the input box. Can you explain what went wrong and fix it?' That prompt will get you a real answer. 'It broke, fix it' will not.

Run Early, Run Often

Do not wait until the project is complete to run it for the first time. Run it after every meaningful change. The sooner you see a problem, the smaller and easier it is to fix. A bug discovered five minutes after it was created takes two minutes to fix. A bug discovered three hours later might take an hour.

Complete the sentence about the purpose of an MVP.

An MVP is the version of a project that proves the function works, giving you a real foundation to build on.

What to Do When the First Prompt Does Not Work

Sometimes the first output from AI is not runnable. It might be incomplete, have a bug, or use a feature that does not work in your environment. This is not failure — it is part of the process. When the first version does not run: 1. Do not panic and rewrite everything. 2. Copy the exact error into your AI chat. 3. Ask specifically: 'This code gives me [error]. What is the cause and what is the fix?' 4. Apply the fix to just that part of the code. 5. Run again. Most first-version problems are small. A missing closing bracket, a file that was not saved, a function called before it was defined. The error message almost always points directly at the problem.

Do Not Delete and Start Over on the First Error

When something breaks, the instinct is to throw it away and start fresh. Resist this. A broken first version is one small fix away from working. Starting over means repeating all the work you already did. Fix the error, run again.

Priya's quiz app shows questions correctly but the score counter shows 0 for every answer. Is this an MVP?

What is the most effective way to use an error message when your code breaks?

Launch Your MVP

  1. Step 1: Take the strong prompt you wrote in Lesson 2.
  2. Step 2: Paste it into your AI tool of choice (Claude, ChatGPT, or similar).
  3. Step 3: Copy the output code into your editor or tool and run it.
  4. Step 4: Confirm that the ONE core function from your 'done means' statement works at all — even roughly.
  5. Step 5: If something is broken, copy the error message and bring it back to the AI using the format: 'I got this error: [error]. I expected [behavior]. Can you explain and fix it?'
  6. Step 6: Record: what worked, what was broken, and what you fixed. You will track these across every lesson.
  7. Stop once the core function works. Do not improve anything yet — that is the next lesson.