CAIL Spotlight Workshop #2

Vibe-Coding Prototypes

Tuesday, March 10, 2026 · 4:00–5:30 pm

QR code to follow along Scan to follow along
cuny-ai-lab.github.io/vibe-coding-prototypes
CUNY AI Lab Developed by Stefano Morello, Zach Muhlbauer, Parisa Setayesh, and Stephen Zweibel
Workshop

Agenda

Part 0 — Review + Framing 20m
Foundations Review From Chatbots to Agents
Part 1 — Setup 10m
Install Homebrew / Node.js Install and Launch Gemini CLI
Part 2 — Plan + Act 30m
Planning Stage Acting Stage Open and Test Project Create AGENTS.md
Part 3 — Prototype + Publish 30m
Customize the Focus Timer Authenticate with GitHub CLI Create Remote Repository Push to GitHub Links & References
Refresher

Foundations Review

Workshop #1 deck

How do LLMs generate code?
Code is just another language pattern. The model predicts the next token based on syntax, structure, and problem-solving patterns learned from training data.
What are the four commands we learned through the CLI?
pwd print working directory · cd change directory · cd .. go up one level · ls list files
What is git and what does it do?
A version-control system that tracks every change so you can go back in time, undo mistakes, and work in parallel.
Framing

Have you used these?

ChatGPT, Claude, Copilot, Gemini

You type something, it “types” back.

Framing

What’s happening

It’s predicting the next word over and over, very fast
Trained on a lot of text, learned patterns
Fluent but not “grounded”
Framing

Tools & Groundedness

How models connect to the real world

Sometimes it searches the web
Sometimes it reads a file you uploaded
Sometimes it runs code
A tool is a function it can call: “search this,” “fetch that,” “calculate this”
Framing

Agentic means it adapts

Regular
One shot
You ask → maybe one tool call → answer
Agentic
It keeps going
Look at the result → decide what to do next → call another tool → repeat until the task seems done
Framing

The Agentic Harness

The model doesn’t run itself

Something has to run the loop: send a prompt → check if it wants a tool → run the tool → feed the result back → repeat
Examples: Claude Code, Cursor, Gemini CLI
That’s what people mean when they say “agentic”
Example

One tool call

“What’s the most recent article in CUNY Academic Works about open access?”
Searches the repository → gets back a list
Gives you a citation
Example

A few steps

“Find recent books on music theory we don’t already own.”
Searches WorldCat → gets 25 results with ISBNs
Filters to books where held_by_institution: false
Searches Primo by ISBN to double-check holdings
Fetches publisher websites to verify ISBNs
Returns a list ready for ordering
Example

Try, fail, adjust

“Check if these 20 ILL-requested titles are available in our catalog.”
Writes a Python script to query the API
Runs it → 401 error, API key missing
Reads the error, adds authentication
Runs again → some return empty (searching by title instead of ISBN)
Adjusts the query to use ISBN
Runs again → full results → writes a CSV
Part 1

Setup

Setup

Install Homebrew / Node.js

macOS
Terminal
1. Install Homebrew from brew.sh
2. Add Homebrew to PATH: echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' \ >> ~/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)" 3. Confirm with: brew --version
Windows
PowerShell
1. Install Node.js LTS from nodejs.org
2. Reopen PowerShell
3. Confirm with: node --version
Setup

Install and Launch Gemini CLI

Install Gemini CLIbrew install gemini-cli # macOS npm install -g @google/gemini-cli # Windows
Run gemini in your terminal
Complete the Google login flow
Return to the terminal
Confirm Gemini is ready for prompts
Part 2

Plan + Act

Demo

Planning Stage

Download starter files
Download and unzip the starter files
cd into the unzipped folder from your terminal
Run gemini to start the agent
Instruct it to propose a plan and wait for approval:“Propose a plan to reorganize this directory; wait for my approval to implement it.”
Demo

Acting Stage

Review and modify the plan where relevant, then instruct the agent to act on it.
One possible result:
index.html css/ style.css js/ timer.js helpers.js app-init.js assets/ icon.svg config.json
Demo

Open and Test Project

Check the file structure in terminal or Finder: css/, js/, assets/
Double-click index.html to open in the browser
Try the focus timer. Does it start, pause, and reset?
Check the console for errors (Cmd+Option+J / Ctrl+Shift+J)
If something’s broken, ask Gemini to fix it before moving on
Demo

Create AGENTS.md

Use the /init command to capture what the agent learned during reorganization:
“/save”
Gemini writes an AGENTS.md that documents the project for future agentic use: purpose, file structure, and conventions all in one place.
Part 3

Prototype + Publish

Demo

Customize the Focus Timer

Prompt Gemini to add a feature — e.g. session history, sound alerts, or custom intervals
Keep changes in the right files: CSS in css/, JS in js/
Test locally in the browser
Revise one change at a time
Keep the app simple enough to publish today
Publish

Authenticate with GitHub CLI

Install GitHub CLIbrew install gh # macOS npm install -g gh # Windows
Run gh auth login
Choose GitHub.com → HTTPS → Login with a web browser
Complete authentication in the browser
Confirm with gh auth status
Publish

Create Remote Repository

Initialize git locally:git init
Create the repo on GitHub:gh repo create REPO --public --source=.
Confirm the remote is set:git remote -v
Publish

Push to GitHub

Stage your files:git add .
Commit your changes:git commit -m "first prototype"
Push to GitHub:git push
Publish

Enable GitHub Pages

Go to github.com/USERNAME/REPO
Click the Settings tab
Click Pages in the left sidebar
Under Source, select Deploy from a branch
Choose main → / (root) and click Save
Visit USERNAME.github.io/REPO
Resources

Links & References

CUNY AI Lab
Tools & Docs