Reading AI Output

You’ll learn to verify what the AI built — the skill that separates people who use AI from people who are used by it.

Why This Matters

An AI can generate an entire project in seconds. But if you can’t tell whether it worked, you are flying blind. You will accept broken output, miss obvious errors, and waste hours going in circles.

Employers do not need people who can prompt an AI. They need people who can quality-check what the AI produces. This lesson teaches that skill.

The Mental Model: Quality Inspector

You are a quality inspector at a factory. You did not build the widget on the assembly line — the AI did. But you need to know:

• Did the right parts come out? (file tree)
• Does the widget turn on? (dev server starts)
• Does it look right? (page loads correctly)
• Are there any warning lights? (error messages)

You do not need to build. You need to verify.

Section 1: Reading a File Tree

When an AI builds a project, it creates files and folders. Your first job is to see what it made.

Here is a project the AI just generated. Use the terminal below to explore it:

What to type

ls — see what is in the project root. You should see folders like src/, public/, node_modules/ and files like package.json and README.md.

ls src/ — drill into the source folder. This is where the actual code lives. You will see index.html, style.css, and app.js.

cat package.json — read the project configuration. This tells you the project’s name, what commands you can run (dev, build), and what tools it depends on.

What each file type means

Section 2: “Does It Work?” — The 3-Check Method

After reading the file tree, you need to know if the project actually works. Here are three checks, in order:

Check 1: Does the dev server start?

npm install    # Download dependencies (skip if already done)
npm run dev

If the project is set up correctly, you will see output like this:

  VITE v6.0.0  ready in 237ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

The key line is the Local: http://localhost:5173/ URL. That means the server is running.

If you see an error instead, go to Section 3 below.

Check 2: Does the page load?

Open your browser and go to the URL from Check 1 (usually http://localhost:5173). You should see something — even if it is just a heading or some placeholder text.

Three outcomes:

Check 3: Does it look right?

This is a visual check. Compare what you see in the browser to what you asked the AI to build:

• Did it create the layout you described?
• Are the sections in the right order?
• Is text visible (not white-on-white or hidden behind something)?

You do not need to check every pixel. You need to check that the shape is correct.

Section 3: Reading Error Messages

Error messages look scary, but they follow a predictable pattern. Every error tells you three things:

Error 1: Missing file

[vite] Internal server error: Failed to resolve import
  './Button' from 'src/App.jsx'. Does the file exist?

• WHO: Vite (the build tool)
• WHAT: It cannot find a file called Button
• WHERE: The import is in src/App.jsx
• Fix: The AI forgot to create Button.jsx, or put it in the wrong folder

Error 2: Syntax error (typo in code)

SyntaxError: /src/App.jsx: Unexpected token (12:5)
  10 | function App() {
  11 |   return (
> 12 |     <div classname="app">
     |      ^
  13 |   )
  14 | }

• WHO: The JavaScript parser
• WHAT: Something unexpected in the code (a typo)
• WHERE: src/App.jsx, line 12, column 5
• Fix: In this case, classname should be className (capital N) in React

Error 3: Port already in use

Error: listen EADDRINUSE: address already in use :::3000

• WHO: Node.js (the server runtime)
• WHAT: Port 3000 is already being used by another program (the port number may vary — Vite uses 5173, Express uses 3000, etc.)
• WHERE: Not a file error — it is a system issue
• Fix: Either stop the other server or use a different port

Section 4: The Browser Console

The browser has a built-in tool for showing errors. It is called the developer console, and it is one of the most useful verification tools you have.

How to open it

Shortcuts may vary by browser (Firefox uses Ctrl + Shift + K / Cmd + Option + K). The most universal method: right-click anywhere on the page and select “Inspect,” then click the “Console” tab. This works in every browser.

What you will see

The console shows three types of messages:

• Red text = errors (something is broken)
• Yellow text = warnings (something might be wrong, but the page still works)
• White/gray text = logs (informational messages, usually fine)

The 3 things to look for

1. Red error messages — These mean something is broken. Common examples:

   • Uncaught ReferenceError: React is not defined (missing import)
   • 404 (Not Found) for a script or stylesheet (wrong file path)
   • TypeError: Cannot read properties of undefined (code bug)

2. Failed network requests — Click the Network tab and look for entries in red. A 404 status means the browser requested a file that does not exist.

3. A blank white page — If the page is completely blank, the console almost always has a red error explaining why.

Section 5: When to Ask the AI

You have verified the output and found a problem. Now what? Paste the evidence directly to the AI. Here are exact prompts you can copy:

If you see an error in the terminal

I ran npm run dev and got this error:

[paste the full error message here]

What is wrong and how do I fix it?

If the page is blank

My page at localhost:5173 shows a blank white screen. Here is my index.html:

[paste the file contents here]

What is missing?

If the page looks wrong

The page loads but the sidebar is overlapping the main content. The sidebar should be on the left and the content should be on the right. How do I fix the layout?

If the console shows red errors

I opened the browser console and see this error:

Uncaught ReferenceError: Chart is not defined
    at src/dashboard.js:23:5

What does this mean and how do I fix it?

Domain Connections

Traceback (most recent call last):
  File "scripts/analyze.py", line 42, in <module>    ← WHERE
    df = pd.read_csv("data/samples.csv")             ← WHAT it tried to do
FileNotFoundError: [Errno 2] No such file or directory: 'data/samples.csv'  ← WHAT went wrong

When Things Go Wrong

Key Takeaways

• The 3-check method: starts (dev server runs), loads (page appears in browser), looks right (visual check matches expectations)
• Error messages have a pattern: WHO complained, WHAT went wrong, WHERE it happened — learn to spot these three parts and you can diagnose any error
• The browser console is your X-ray machine: open it with Ctrl+Shift+J (or Cmd+Option+J in Chrome), or right-click and select Inspect. Prioritize red errors and failed network requests
• When in doubt, paste the error to the AI — always include the exact error message, never paraphrase