1 of 12

CSE 5 Β· PRINCIPLES OF AI Β· DISCUSSION

Vibe Coding

& Coding Agents

How AI helps you make things β€” without learning to code

You drive

Vibe coding

AI drives

Coding agents

2 of 12

OVERVIEW

How this 50 minutes works

0–3 min

What's possible

3–6 min

Two paradigms, one spectrum

Vibe coding vs coding agents β€” and why it matters.

6–26 min

You drive Β· build something

20 min hands-on with Claude.ai Artifacts. Pick a project, ship it.

26–30 min

Show & tell

Each pair shares what they built.

30–37 min

AI drives Β· agent demo

Watch a coding agent take 20 steps on its own.

37–46 min

How does this actually work?

Foundation model β†’ harness β†’ agent loop.

46–50 min

Takeaway Β· what now

Three questions to take with you.

2 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

3 of 12

FRAME

What is "vibe coding"?

You describe what you want. AI writes, runs, and debugs the code. You don't read code β€” you direct.

TRADITIONAL CODING

Learn syntax, memorize APIs

Hit a bug β†’ debug yourself

Want a feature β†’ implement it

Entry barrier: months

VIBE CODING

Describe what you want

Hit a bug β†’ paste it to AI

Want a feature β†’ say it out loud

Entry barrier: an afternoon

πŸ‘‰ You don't need to learn coding. You just need to clearly describe what you want.

3 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

4 of 12

ACTIVITY Β· 20 MIN Β· CLAUDE.AI ARTIFACTS/v0.dev

Build something in 20 minutes

1

Pair up (optional)

Find a partner.

2

Pick a project

From the menu next slide, or your own.

3

Prompt

Be specific. Describe like to a freelancer.

4

Iterate

Click "send to chat" + describe what's wrong.

PRO TIPS

πŸ’ͺ

Start minimally. Polish later. "Working > pretty" for the first 10 min.

πŸ›

When stuck: copy the exact error / screenshot the bug, paste it back.

🎯

Ask it to plan first. Implementation is easy; refining is hard.

4 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

5 of 12

PICK ONE

Project ideas (or invent your own)

πŸ“Š

BUSINESS

Bill-splitter with item tagging ("Alice ate the appetizer")

Customer follow-up email generator

SWOT analysis form β†’ auto-summary

πŸ₯

HEALTHCARE

Symptom diary with weekly trend chart

Medication reminder with refill tracker

BMI / hydration / sleep dashboard

πŸ“š

HUMANITIES

URL β†’ MLA / APA citation formatter

Vocabulary trainer (input words β†’ quiz)

Quote collector that saves favorite passages from books with page numbers

🌟 UNIVERSAL

Habit tracker Β· Mood-based playlist suggester Β· Random restaurant picker Β· Personal homepage Β· Pomodoro timer

⏱ 20 minutes total

5 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

6 of 12

5 MIN

Show us what you built

SHOW

&

TELL

30–45 seconds per pair

1. What did you build?

2. What's your favorite feature?

3. What's something the coding agent/model got wrong?

6 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

7 of 12

DEMO Β· 7 MIN

Now: let AI take over

What you just did: you-prompt-AI-replies-you-react. Loop length: 1.

What we'll watch now: you-set-goal-AI-takes-20-steps. Loop length: 20.

WATCH FOR

πŸ”

Self-direction

It searches files, reads code, decides what to do next without asking you.

πŸ› οΈ

Tool use

It runs commands, edits files, runs tests.

πŸ”„

Recovery

When something breaks, it diagnoses and tries again. That's the agent loop.

7 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

8 of 12

MENTAL MODEL

Two paradigms β€” when to use which

VIBE CODING

You drive

WHO LEADS

You β€” every step

LOOP LENGTH

1 (you, AI, you, AI…)

YOUR ROLE

Designer + judge of every reply

BEST FOR

Small apps Β· prototypes Β· single file Β· learning

FAILURE MODE

You get stuck on a bug

TOOLS

Claude.ai Β· ChatGPT Canvas Β· v0.dev Β· Lovable

CODING AGENT

AI drives

WHO LEADS

Agent β€” once you set the goal

LOOP LENGTH

10–100+ (autonomous steps)

YOUR ROLE

Goal-setter + supervisor

BEST FOR

Multi-file Β· refactoring Β· long tasks Β· data work

FAILURE MODE

Agent runs off in wrong direction

TOOLS

Cursor (Agent mode) Β· Claude Code Β· Replit Agent Β· Devin

8 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

9 of 12

HOW IT WORKS Β· 1 / 3

Underneath, it's still just a model

FOUNDATION

MODEL

predicts the next token

text in

text out

This is like 2023 ChatGPT. It can write code if you ask. But you have to copy it into a file, save it, run it yourself, debug it yourself. The model is brilliant but it has no hands.

9 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

10 of 12

HOW IT WORKS Β· 2 / 3

Then we give it tools and teach it to use

MODEL

Code execution

runs Python/JS in a sandbox

File system

reads & writes your project files

Web access

fetches URLs and search results

IDE container

the home where the model lives β€” Cursor, Claude Code

πŸ‘‰ The model gets better on how to use its β€œhands”.

10 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

11 of 12

HOW IT WORKS Β· 3 / 3

Finally: let it run by itself

1. THINK

what should I do?

2. ACT

call a tool

3. OBSERVE

see what happened

4. UPDATE

rethink, decide next

repeat

10–100x

Vibe coding: you are inside this loop. Coding agent: the loop runs without you β€” you check in at the end.

11 / 12

CSE 5 β€” Discussion Β· Vibe Coding & Coding Agents

12 of 12

TAKEAWAY

Three questions for the road.

1

What did you build today that you'd actually use?

Not perfect. Working. The bar for usefulness is much lower than you think.

2

What's one task in your major you'll try this week?

Don't overthink. Pick something annoying and prototype it tonight.

3

When should you NOT vibe code?

High stakes. User data. Production. Medical, legal, financial decisions. Get a real engineer.

AI doesn't turn you into a programmer. It gives you the power to turn ideas into working things.