CAIL Spotlight Workshop #2
Vibe-Coding Prototypes
Tuesday, March 10, 2026 · 4:00–5:30 pm
Developed by Stefano Morello, Zach Muhlbauer, Parisa Setayesh, and Stephen Zweibel
Developed by Stefano Morello, Zach Muhlbauer, Parisa Setayesh, and Stephen Zweibel
Workshop
Agenda
Part 1 — Authentication + Setup
30m
Authenticate with GitHub CLI
Install Homebrew / Node.js
Install and Launch Gemini CLI
Establish an Agent Workflow
Part 3 — Prototype + Publish
30m
Build a Small Multi-File Web App
Push to GitHub
Enable GitHub Pages
Links & References
Part 1
Authentication + Setup
Setup
Authenticate with GitHub CLI
1
Open the terminal in VS Code
2
Run
gh auth login3
Choose GitHub.com
4
Choose HTTPS
5
Choose Login with a web browser
6
Complete authentication in the browser
7
Confirm with
gh auth statusSetup
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
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
Setup
Install and Launch Gemini CLI
1
Install Gemini CLIbrew install gemini-cli # macOS
npm install -g @google/gemini-cli # Windows
2
Run
gemini in your terminal3
Complete the Google login flow
4
Return to the terminal
5
Confirm Gemini is ready for prompts
Demo
Establish an Agent Workflow
Before making changes, the agent must propose a plan and wait for approval.
"Inspect this folder. Propose a plan before changing anything."
"Do not create, move, or delete files until I approve the plan."
Part 2
Agentic Reorganization
Tool
Create AGENTS.md
1
State the purpose of the project
2
Define file structure expectations
3
Require plan + approval before structural changes
4
Require a summary of changes after completion
Demo
Reorganize the Folder with Approval
Use Gemini to inspect the current folder, propose a cleaner structure, and wait for approval.
Then move toward a simple layout:
index.html
css/style.css
js/script.js
assets/
Part 3
Prototype + Publish
Demo
Build a Small Multi-File Web App
1
Prompt Gemini to scaffold a simple app
2
Keep HTML, CSS, and JavaScript in separate files
3
Test locally in the browser
4
Revise one change at a time
5
Keep the app simple enough to publish today
Publish
Push to GitHub
1
Stage your files:git add .
2
Commit your changes:git commit -m "first prototype"
3
Push to GitHub:git push
Publish
Enable GitHub Pages
1
Go to
github.com/USERNAME/REPO2
Click the Settings tab
3
Click Pages in the left sidebar
4
Under Source, select Deploy from a branch
5
Choose main → / (root) and click Save
6
Visit
USERNAME.github.io/REPOResources
Links & References
CAIL
-
ailab.gc.cuny.edu
CUNY AI Lab — home page, announcements, and model notes
-
ailab.gc.cuny.edu/resources
CAIL Resources — guides, readings, and workshop materials
-
chat.ailab.gc.cuny.edu
CAIL Sandbox (Open WebUI) — GLM 5, Kimi K2.5, and more
-
tools.ailab.gc.cuny.edu
CAIL Tools — additional lab utilities and experiments
GC Community
-
newmedialab.cuny.edu
CUNY New Media Lab — workshop series host
-
aitoolkit.gc.commons.edu
GC AI Toolkit — curated tools and resources for the Graduate Center
Workshops
-
github.com/cuny-ai-lab
CUNY AI Lab on GitHub — open source repos, workshop decks, datasets
-
cuny-ai-lab.github.io/gen-dev-foundations
Foundations Workshop deck — companion CAIL workshop #1
Tools & Docs
-
code.visualstudio.com/docs
VS Code documentation — setup, extensions, integrated terminal
-
github.com/google-gemini/gemini-cli
Gemini CLI — open-source AI coding agent that runs in your terminal
-
docs.github.com
GitHub documentation — repos, Pages, pull requests, Actions