Hugging Face's logo

Spaces:
CUNY-Builders
/
course-material
Running

App Files Community
course-material / Builders-Class-6-Slides.html
fdaudens's picture
fdaudens
feat: add Class 6 slides and activate link on homepage
642b9cb
raw
history blame contribute delete
45.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Agents & Autonomous Workflows, Part 2 — CUNY AI J Labs Builders Class 6</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css">
<style>
 @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 :root {
 --bg-light: #e8e6e1;
 --bg-dark: #1a1a1a;
 --bg-blue: #2563b8;
 --bg-red: #dc2626;
 --text-dark: #1a1a1a;
 --text-light: #e8e6e1;
 --pill-bg: #d8d5ce;
 --pill-border: #c5c2bb;
 --circle-light: #e0ddd7;
 --circle-mid: #c8c4bc;
 --circle-dark: #b0aca4;
 --r-background-color: var(--bg-light);
 --r-main-font: 'Inter', -apple-system, sans-serif;
 --r-heading-font: 'Anton', 'Impact', sans-serif;
 --r-main-color: var(--text-dark);
 --r-heading-color: var(--text-dark);
 --r-link-color: var(--bg-blue);
 }
 .reveal { font-weight: 400; font-size: 22px; }
 .reveal .slides { text-align: left; }
 .reveal .slides section {
 padding: 60px 60px 50px;
 text-align: left;
 height: 700px;
 box-sizing: border-box;
 }
 .reveal h1, .reveal h2, .reveal .mega, .reveal .giga {
 font-family: 'Anton', 'Impact', sans-serif;
 text-transform: uppercase;
 letter-spacing: -0.02em;
 line-height: 0.92;
 margin: 0;
 }
 .reveal h1 { font-size: 5em; }
 .reveal h2 { font-size: 3.2em; }
 .reveal h3 {
 font-family: 'Inter', sans-serif;
 font-weight: 600;
 font-size: 1.1em;
 letter-spacing: -0.01em;
 text-transform: none;
 margin: 0;
 }
 .reveal p { font-size: 0.95em; line-height: 1.5; margin: 0.6em 0; }
 .reveal li { font-size: 0.9em; line-height: 1.5; margin-bottom: 0.3em; }
 .reveal ul, .reveal ol { margin-left: 1em; }
 .reveal strong { font-weight: 700; }
 .mega { font-size: 6em !important; }
 .giga { font-size: 8em !important; }
 .slide-header {
 position: absolute; top: 0; left: 0; right: 0;
 display: flex; justify-content: space-between; align-items: center;
 padding: 8px 0; font-family: 'Inter', sans-serif; font-size: 0.65em;
 font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
 z-index: 10; border-bottom: 1.5px solid currentColor;
 }
 .slide-footer {
 position: absolute; bottom: 0; left: 0; right: 0;
 display: flex; justify-content: flex-end; padding: 8px 0;
 font-family: 'Inter', sans-serif; font-size: 0.6em; font-weight: 500;
 letter-spacing: 0.06em; text-transform: uppercase; z-index: 10;
 border-top: 1.5px solid currentColor;
 }
 .reveal .slides section { background: var(--bg-light); color: var(--text-dark); }
 .reveal .slides section .slide-header,
 .reveal .slides section .slide-footer { color: var(--text-dark); border-color: rgba(26,26,30,0.25); }
 .reveal .slides section.dark { background: var(--bg-dark); color: var(--text-light); }
 .reveal .slides section.dark h1,
 .reveal .slides section.dark h2,
 .reveal .slides section.dark .mega,
 .reveal .slides section.dark .giga { color: var(--text-light); }
 .reveal .slides section.dark .slide-header,
 .reveal .slides section.dark .slide-footer { color: var(--text-light); border-color: rgba(232,230,225,0.25); }
 .reveal .slides section.blue { background: var(--bg-blue); color: white; }
 .reveal .slides section.blue h1,
 .reveal .slides section.blue h2,
 .reveal .slides section.blue .mega,
 .reveal .slides section.blue .giga { color: white; }
 .reveal .slides section.blue .slide-header,
 .reveal .slides section.blue .slide-footer { color: white; border-color: rgba(255,255,255,0.3); }
 .reveal .slides section.red { background: var(--bg-red); color: white; }
 .reveal .slides section.red h1,
 .reveal .slides section.red h2,
 .reveal .slides section.red .mega,
 .reveal .slides section.red .giga { color: white; }
 .reveal .slides section.red .slide-header,
 .reveal .slides section.red .slide-footer { color: white; border-color: rgba(255,255,255,0.3); }
 .reveal .title-slide {
 display: flex !important; flex-direction: column; justify-content: center;
 }
 .reveal .title-slide h1 { font-size: 4.5em; line-height: 0.95; margin-bottom: 0.2em; }
 .reveal .title-slide .meta {
 font-family: 'Inter', sans-serif; font-size: 0.75em; margin-top: 0.3em;
 }
 .pill {
 display: inline-block; padding: 10px 24px; border-radius: 50px;
 font-family: 'Inter', sans-serif; font-size: 0.75em; font-weight: 500;
 letter-spacing: 0.04em; text-transform: uppercase;
 background: var(--pill-bg); color: var(--text-dark); border: 1.5px solid var(--pill-border);
 }
 .dark .pill { background: rgba(232,230,225,0.12); color: var(--text-light); border-color: rgba(232,230,225,0.2); }
 .blue .pill { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.25); }
 .red .pill { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.25); }
 .circle {
 display: inline-flex; align-items: center; justify-content: center;
 text-align: center; border-radius: 50%;
 font-family: 'Inter', sans-serif; font-size: 0.7em; font-weight: 500;
 letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; padding: 12px;
 }
 .circle-sm { width: 100px; height: 100px; }
 .circle-md { width: 140px; height: 140px; }
 .circle-lg { width: 160px; height: 160px; }
 .slide-grid { height: 100%; }
 .slide-grid.g-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; height: 100%; }
 .slide-grid.g-2-3 { display: grid; grid-template-columns: 2fr 3fr; gap: 40px; height: 100%; }
 .slide-grid .col-heading { display: flex; flex-direction: column; justify-content: flex-end; }
 .slide-grid .col-body { display: flex; flex-direction: column; justify-content: center; }
 .reveal table { border-collapse: collapse; font-size: 0.78em; width: 100%; margin: 0.8em 0; }
 .reveal table th {
 background: var(--text-dark); color: var(--bg-light); font-weight: 600;
 padding: 10px 14px; text-align: left; font-family: 'Inter', sans-serif;
 text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85em;
 }
 .reveal table td { padding: 10px 14px; border-bottom: 1px solid rgba(26,26,30,0.12); vertical-align: top; }
 .dark table th { background: var(--text-light); color: var(--text-dark); }
 .dark table td { border-bottom-color: rgba(232,230,225,0.15); }
 .callout {
 background: rgba(26,26,30,0.06); border-left: 3px solid var(--text-dark);
 padding: 14px 18px; margin: 0.8em 0; font-size: 0.88em;
 }
 .dark .callout { background: rgba(232,230,225,0.08); border-left-color: var(--text-light); }
 .blue .callout { background: rgba(255,255,255,0.1); border-left-color: rgba(255,255,255,0.5); }
 .layer-stack { display: flex; flex-direction: column; gap: 8px; }
 .layer-card { padding: 16px 20px; border-radius: 4px; position: relative; }
 .layer-card .layer-num {
 font-family: 'Anton', sans-serif; font-size: 1.4em; opacity: 0.2;
 position: absolute; right: 14px; top: 10px;
 }
 .layer-card h3 { font-size: 0.95em; margin-bottom: 2px; }
 .layer-card p { font-size: 0.78em; opacity: 0.7; margin: 0; }
 .code-block {
 font-family: 'JetBrains Mono', monospace; font-size: 0.75em;
 background: rgba(26,26,30,0.06); border: 1.5px solid rgba(26,26,30,0.1);
 border-radius: 4px; padding: 16px 20px; line-height: 1.7;
 white-space: pre; overflow-x: auto;
 }
 .dark .code-block { background: rgba(232,230,225,0.06); border-color: rgba(232,230,225,0.1); }
 .reveal .progress { color: var(--bg-blue); height: 3px; }
 .reveal .slide-number { display: none; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- ============================================================ -->
<!-- TITLE -->
<!-- ============================================================ -->
<section class="dark title-slide">
 <h1>Build,<br>Code<br>&amp; Ship</h1>
 <div class="meta" style="color: rgba(232,230,225,0.4);">CUNY AI Journalism Lab: Builders &nbsp;&middot;&nbsp; Class 6 &nbsp;&middot;&nbsp; April 9, 2026</div>
 <div class="slide-footer">FLORENT DAUDENS</div>
</section>
<!-- ============================================================ -->
<!-- AGENDA -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div class="slide-grid g-1-1">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 <h2 style="font-size: 2.8em; margin-bottom: 0.6em;">Today</h2>
 <ul style="list-style: none; margin: 0; padding: 0;">
 <li style="margin-bottom: 0.5em;"><strong>0:00</strong> &nbsp; Show &amp; tell</li>
 <li style="margin-bottom: 0.5em;"><strong>0:15</strong> &nbsp; Codex writes code (app + VS Code)</li>
 <li style="margin-bottom: 0.5em;"><strong>0:35</strong> &nbsp; MCP: giving your assistant new powers</li>
 <li style="margin-bottom: 0.5em;"><strong>1:00</strong> &nbsp; Subagents: parallel autonomous work</li>
 <li style="margin-bottom: 0.5em;"><strong>1:25</strong> &nbsp; Your capstone + discussion</li>
 <li style="margin-bottom: 0.5em;"><strong>1:45</strong> &nbsp; Wrap-up</li>
 </ul>
 </div>
 <div style="display: flex; flex-direction: column; justify-content: center;">
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
</section>
<!-- ============================================================ -->
<!-- SHOW & TELL -->
<!-- ============================================================ -->
<section class="blue">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <h2 style="font-size: 3.6em; margin-bottom: 0.8em;">Show<br>&amp; Tell</h2>
 <div class="layer-stack" style="max-width: 680px;">
 <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);">
 <h3 style="color: white;">What did you use your assistant for this week?</h3>
 </div>
 <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);">
 <h3 style="color: white;">What worked? What was missing?</h3>
 </div>
 <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);">
 <h3 style="color: white;">Did you improve your AGENTS.md?</h3>
 </div>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">2-3 volunteers. Keep it short — one thing that worked, one thing that didn't. The "what was missing" answers will shape the rest of today: if everyone says "it doesn't know current events," that's our MCP segue. If they say "I can't get it to format things right," that's an AGENTS.md issue.</aside>
</section>
<!-- ============================================================ -->
<!-- CODEX AS CODE BUILDER -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div class="slide-grid g-2-3">
 <div class="col-heading">
 <h2 style="font-size: 2.8em;">Codex<br>Writes<br>Code</h2>
 </div>
 <div class="col-body">
 <p>Two ways to use Codex for coding:</p>
 <div style="display: flex; gap: 14px; margin: 0.8em 0;">
 <div style="flex: 1; background: rgba(37,99,184,0.06); border: 1.5px solid rgba(37,99,184,0.15); border-radius: 4px; padding: 14px;">
 <h3 style="color: var(--bg-blue); font-size: 0.9em;">Codex App</h3>
 <p style="font-size: 0.78em; opacity: 0.7; margin: 4px 0 0;">Upload files, run code in a sandbox, schedule tasks. Quick and self-contained.</p>
 </div>
 <div style="flex: 1; background: rgba(22,163,74,0.06); border: 1.5px solid rgba(22,163,74,0.15); border-radius: 4px; padding: 14px;">
 <h3 style="color: #16a34a; font-size: 0.9em;">VS Code Extension</h3>
 <p style="font-size: 0.78em; opacity: 0.7; margin: 4px 0 0;">Sees your whole workspace: AGENTS.md, context files, source lists. Builds where your context lives.</p>
 </div>
 </div>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">Two paths, same capability. The Codex app at codex.openai.com is great for quick tasks — upload a CSV, run analysis, schedule a daily prompt. Self-contained, no setup. The VS Code extension is the power move: it sees your entire workspace — your AGENTS.md, your beat notes, your source list. When you say "build a script that monitors my beat," it actually knows what your beat is. Use the app for one-off tasks, VS Code for workspace-aware work.</aside>
</section>
<!-- ============================================================ -->
<!-- BUILD: THE PROMPT -->
<!-- ============================================================ -->
<section class="blue">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <span class="pill" style="margin-bottom: 1em; width: fit-content;">Build together</span>
 <h2 style="font-size: 2.8em; margin-bottom: 0.8em;">Beat Monitor<br>Script</h2>
 <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 20px 24px; max-width: 720px; font-family: 'JetBrains Mono', monospace; font-size: 0.82em; line-height: 1.7;">
 "Look at my context/beat-notes.md and build a Python script that checks the RSS feeds listed there for new articles in the last 24 hours, filters for articles mentioning my key topics, and saves a summary to daily-report.md"
 </div>
 <div style="display: flex; gap: 8px; margin-top: 1.2em;">
 <span class="pill">watch it write</span>
 <span class="pill">run together</span>
 <span class="pill">iterate</span>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">Copy this prompt exactly — or adapt it to your beat. Watch Codex read your beat-notes.md, then write the script referencing your actual sources. Run it: python beat-monitor.py. Then iterate: "Add a section that flags articles I should fact-check." Key mindset shift: you don't need to know Python. You need to know what you want. The best prompts describe outcomes, not implementation — "a script that does X" beats "a script using library Y that calls function Z." Trust the AI to make the technical choices; you make the editorial choices.</aside>
</section>
<!-- ============================================================ -->
<!-- MCP: WHAT IS IT -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div class="slide-grid g-2-3">
 <div class="col-heading">
 <h2 style="font-size: 3em;">MCP<br>Servers</h2>
 <p style="opacity: 0.5; margin-top: 0.4em;">Your assistant<br>isn't limited to<br>what's in your<br>folder.</p>
 </div>
 <div class="col-body">
 <p>MCP (Model Context Protocol) = a standard for connecting AI assistants to external tools. Think of it as <strong>apps for your assistant</strong>.</p>
 <div style="display: flex; gap: 14px; margin: 1em 0; align-items: center;">
 <div style="text-align: center; opacity: 0.5;">
 <div style="font-size: 0.8em;">Without MCP</div>
 <div style="font-family: 'Anton'; font-size: 1.4em;">Your folder</div>
 </div>
 <div style="font-family: 'Anton'; font-size: 2em; opacity: 0.2;">&rarr;</div>
 <div style="text-align: center;">
 <div style="font-size: 0.8em;">With MCP</div>
 <div style="font-family: 'Anton'; font-size: 1.4em; color: var(--bg-blue);">The world</div>
 </div>
 </div>
 <div class="callout">
 Today: install one MCP server together and watch it work.
 </div>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">MCP is the protocol that Anthropic open-sourced and the industry adopted. It's how both Claude and Codex connect to external services. One standard, works across tools. Today we install, we don't build. The ecosystem has hundreds of ready-made servers.</aside>
</section>
<!-- ============================================================ -->
<!-- MCP: A FEW EXAMPLES -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; height: 100%;">
 <h2 style="font-size: 2.4em; margin-bottom: 0.6em;">A Few Examples</h2>
 <table>
 <thead>
 <tr>
 <th>MCP Server</th>
 <th>What it does</th>
 <th>Newsroom use case</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><strong>Chrome DevTools</strong></td>
 <td>Navigate, click, screenshot, inspect DOM &amp; network</td>
 <td>Capture &amp; inspect how a page loads, debug a prototype</td>
 </tr>
 <tr>
 <td><strong>Playwright</strong></td>
 <td>Automate browsers via accessibility tree</td>
 <td>Collect data from public websites on a schedule</td>
 </tr>
 <tr>
 <td><strong>YouTube Transcript</strong></td>
 <td>Pull transcripts from any YouTube video</td>
 <td>Get full text of a press conference or hearing</td>
 </tr>
 <tr>
 <td><strong>NotebookLM</strong></td>
 <td>Query your notebooks, get citation-backed answers</td>
 <td>Research a document trove with grounded citations</td>
 </tr>
 <tr>
 <td><strong>WhatsApp</strong></td>
 <td>Read, search, send messages &amp; media</td>
 <td>Send story alerts to a group, search past conversations</td>
 </tr>
 <tr>
 <td><strong>Google Drive</strong></td>
 <td>Search, read, create files; Docs &rarr; markdown, Sheets &rarr; CSV</td>
 <td>Pull a shared doc, read a spreadsheet, update a brief</td>
 </tr>
 <tr style="background: rgba(37,99,184,0.08);">
 <td><strong>UNHCR</strong> &larr; today</td>
 <td>Query refugee stats by country, year, demographics</td>
 <td>Get displacement data for a story without manual download</td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">These all exist today. Chrome DevTools gives your assistant 26 tools — navigate, click, screenshot, inspect network traffic, read the DOM. Playwright does similar but via the accessibility tree, which is more reliable for automation. YouTube Transcript pulls the full text of any video — no need to watch a 2-hour hearing, just pull the transcript and ask questions. NotebookLM MCP lets Claude query your notebook collections and get citation-backed answers grounded in your documents. WhatsApp reads, searches, and sends messages and media — all local. Google Drive converts Docs to markdown and Sheets to CSV so your assistant can actually work with the content. UNHCR queries live refugee statistics by country, year, and demographics — that's the one we'll install together.</aside>
</section>
<!-- ============================================================ -->
<!-- MCP: LIVE INSTALL -->
<!-- ============================================================ -->
<section class="blue">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <span class="pill" style="margin-bottom: 1em; width: fit-content;">Live install</span>
 <h2 style="font-size: 3.6em; margin-bottom: 0.6em;">UNHCR<br>MCP</h2>
 <p style="opacity: 0.8; max-width: 560px;">Connect your assistant to live UN refugee data. One install. Then ask it real questions about displacement worldwide.</p>
 <a href="https://github.com/rvibek/mcp_unhcr" target="_blank" style="color: rgba(255,255,255,0.6); font-size: 0.82em; margin-top: 0.4em; text-decoration: underline;">github.com/rvibek/mcp_unhcr</a>
 <div style="display: flex; gap: 8px; margin-top: 1em;">
 <span class="pill">install</span>
 <span class="pill">configure</span>
 <span class="pill">query live data</span>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">Walk through the install step by step. After it's configured, demo prompt: "How many refugees from Syria are currently in Turkey? Show me the trend over the last 5 years and save a summary to my research folder." Watch Codex: call UNHCR API via MCP → get real data → analyze → save to workspace. That's the magic: it queried a live public database, then took an action in your workspace. No browser, no manual data download. This is journalism-grade data access — not a web search, but structured data from an authoritative source.</aside>
</section>
<!-- ============================================================ -->
<!-- MCP: WHAT YOU JUST DID -->
<!-- ============================================================ -->
<section class="dark">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <h2 style="font-size: 2.8em; margin-bottom: 0.8em;">What just<br>happened</h2>
 <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 800px;">
 <div style="background: rgba(232,230,225,0.06); border: 1.5px solid rgba(232,230,225,0.15); border-radius: 4px; padding: 16px 20px; flex: 1; min-width: 160px; text-align: center;">
 <div style="font-family: 'Anton'; font-size: 1.1em; text-transform: uppercase; color: #7db4f0;">Prompt</div>
 <p style="font-size: 0.8em; opacity: 0.6; margin-top: 4px;">You described the goal</p>
 </div>
 <div style="font-family: 'Anton'; font-size: 2em; opacity: 0.2;">&rarr;</div>
 <div style="background: rgba(232,230,225,0.06); border: 1.5px solid rgba(232,230,225,0.15); border-radius: 4px; padding: 16px 20px; flex: 1; min-width: 160px; text-align: center;">
 <div style="font-family: 'Anton'; font-size: 1.1em; text-transform: uppercase; color: #6ee7a0;">MCP Tool</div>
 <p style="font-size: 0.8em; opacity: 0.6; margin-top: 4px;">AI called UNHCR API</p>
 </div>
 <div style="font-family: 'Anton'; font-size: 2em; opacity: 0.2;">&rarr;</div>
 <div style="background: rgba(232,230,225,0.06); border: 1.5px solid rgba(232,230,225,0.15); border-radius: 4px; padding: 16px 20px; flex: 1; min-width: 160px; text-align: center;">
 <div style="font-family: 'Anton'; font-size: 1.1em; text-transform: uppercase; color: #c4b5fd;">Result</div>
 <p style="font-size: 0.8em; opacity: 0.6; margin-top: 4px;">Saved to your workspace</p>
 </div>
 </div>
 <div class="callout" style="margin-top: 1.5em; max-width: 680px;">
 This is what "agentic" means: it reasoned, used a tool, took an action. You didn't touch a browser.
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">This is the conceptual payoff of the two classes. An agent is an LLM + tool use + action. You just saw it. The skill you wrote last class is instructions. The MCP server is a tool. The file save is an action. Put them together and you have an agent. That's it.</aside>
</section>
<!-- ============================================================ -->
<!-- SUBAGENTS: INTRO -->
<!-- ============================================================ -->
<section class="dark">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: flex-end; height: 100%;">
 <div style="display: flex; align-items: center; gap: 14px; margin-bottom: 0.6em;">
 </div>
 <h2 style="font-size: 5em;">Sub-<br>agents</h2>
 <p style="opacity: 0.6; margin-top: 0.6em; font-size: 1em; max-width: 600px;">Codex can now spawn specialized agents that work in parallel and consolidate results, without you directing each step.</p>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">This shipped a few weeks ago. It's not just OpenAI — Claude Code, Gemini CLI, Cursor all have this now. It's become the industry standard pattern for agent workflows.</aside>
</section>
<!-- ============================================================ -->
<!-- SUBAGENTS: HOW THEY WORK -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div class="slide-grid g-2-3">
 <div class="col-heading">
 <h2 style="font-size: 2.6em;">How They<br>Work</h2>
 <p style="opacity: 0.5; margin-top: 0.4em; font-size: 0.9em;">One orchestrator.<br>Many workers.<br>Fresh context each.</p>
 </div>
 <div class="col-body">
 <p style="margin-bottom: 0.8em;">Three built-in agents ship with Codex:</p>
 <div class="layer-stack">
 <div class="layer-card" style="background: rgba(37,99,184,0.06); border: 1.5px solid rgba(37,99,184,0.15);">
 <h3 style="color: var(--bg-blue);">explorer</h3>
 <p>Read-heavy analysis: maps documents, traces code paths, researches background</p>
 </div>
 <div class="layer-card" style="background: rgba(22,163,74,0.06); border: 1.5px solid rgba(22,163,74,0.15);">
 <h3 style="color: #16a34a;">worker</h3>
 <p>Execution-focused: implements tasks, processes batches, writes outputs</p>
 </div>
 <div class="layer-card" style="background: rgba(26,26,30,0.06); border: 1.5px solid rgba(26,26,30,0.15);">
 <h3>default</h3>
 <p>General-purpose fallback for anything not assigned to a specialist</p>
 </div>
 </div>
 <p style="margin-top: 0.8em; opacity: 0.5; font-size: 0.82em;">You can also build your own &rarr;</p>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">Each subagent gets a fresh context window — it doesn't inherit the parent's conversation. This keeps the main context clean and lets you run up to 6 parallel threads by default. The parent orchestrates: it spawns the agents, waits for all results, then consolidates. You can also use faster/cheaper models for the workers to speed things up.</aside>
</section>
<!-- ============================================================ -->
<!-- SUBAGENTS: BUILD YOUR OWN -->
<!-- ============================================================ -->
<section class="dark">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div class="slide-grid g-2-3">
 <div class="col-heading">
 <span class="pill" style="margin-bottom: 0.8em; align-self: flex-start; width: fit-content;">Custom agents</span>
 <h2 style="font-size: 2.6em;">Build<br>Your<br>Own</h2>
 <p style="opacity: 0.5; margin-top: 0.4em; font-size: 0.9em;">One TOML file.<br>One specialist.</p>
 </div>
 <div class="col-body">
 <p style="margin-bottom: 0.6em;">Drop a <code style="font-family: 'JetBrains Mono', monospace; background: rgba(232,230,225,0.08); padding: 2px 8px; border-radius: 3px; font-size: 0.85em;">.toml</code> file in <code style="font-family: 'JetBrains Mono', monospace; background: rgba(232,230,225,0.08); padding: 2px 8px; border-radius: 3px; font-size: 0.85em;">.codex/agents/</code></p>
 <div class="code-block" style="font-size: 0.72em; line-height: 1.65;">name = "fact-checker"
description = "Verify claims against public records"
model = "gpt-5.4-mini"
sandbox_mode = "workspace-write"
developer_instructions = """
You are a fact-checking specialist.
For each claim, find the primary source.
Flag confidence level: confirmed / unverified / disputed.
Always include the source URL.
"""
[mcp_servers.search]
url = "https://search-api.example.com/mcp"</div>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">This is the power move: you can create specialists for your beat. A fact-checker agent. A FOIA tracker. A source profiler. Each one is a single TOML file — name, description, instructions, optionally a model and MCP servers. Project agents go in .codex/agents/ (shared with your team). Personal agents go in ~/.codex/agents/ (just for you). The description field is key — it tells Codex WHEN to use this agent automatically. sandbox_mode controls what the agent can do: "read-only" for pure research, "workspace-write" when it needs to save results.</aside>
</section>
<!-- ============================================================ -->
<!-- SUBAGENTS: JOURNALISM USE CASES -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; height: 100%;">
 <h2 style="font-size: 2.4em; margin-bottom: 0.8em;">Subagents for<br>Journalism</h2>
 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; align-items: start;">
 <div style="background: rgba(37,99,184,0.06); border: 1.5px solid rgba(37,99,184,0.15); border-radius: 4px; padding: 18px;">
 <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; color: var(--bg-blue); margin-bottom: 6px;">Source investigation</div>
 <p style="font-size: 0.82em; opacity: 0.75; margin: 0;">"Investigate this company. Have <strong>explorer</strong> map all public filings, <strong>worker</strong> extract financials, and <strong>default</strong> write the brief."</p>
 </div>
 <div style="background: rgba(22,163,74,0.06); border: 1.5px solid rgba(22,163,74,0.15); border-radius: 4px; padding: 18px;">
 <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; color: #16a34a; margin-bottom: 6px;">Batch research</div>
 <p style="font-size: 0.82em; opacity: 0.75; margin: 0;">Give it a list of 5 sources. One worker per source, all running in parallel. Results consolidated into one report.</p>
 </div>
 <div style="background: rgba(124,58,237,0.06); border: 1.5px solid rgba(124,58,237,0.2); border-radius: 4px; padding: 18px;">
 <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; color: #7c3aed; margin-bottom: 6px;">Story verification</div>
 <p style="font-size: 0.82em; opacity: 0.75; margin: 0;">"Check this draft. Have <strong>explorer</strong> verify every factual claim and <strong>worker</strong> find conflicting sources. Flag anything uncertain."</p>
 </div>
 <div style="background: rgba(217,119,6,0.06); border: 1.5px solid rgba(217,119,6,0.2); border-radius: 4px; padding: 18px;">
 <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; color: #d97706; margin-bottom: 6px;">Coverage monitoring</div>
 <p style="font-size: 0.82em; opacity: 0.75; margin: 0;">One agent per publication, running in parallel. "How are these 10 outlets covering this story differently?"</p>
 </div>
 </div>
 <p style="opacity: 0.4; margin-top: 0.6em; font-size: 0.78em;">Up to 6 parallel threads by default &nbsp;&middot;&nbsp; Each agent gets a fresh context window</p>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">The batch research pattern is the most powerful for journalists: give it a CSV of sources, contacts, or claims. It spawns one worker per row and runs them all in parallel. What would take you 3 hours of manual research runs in minutes. The story verification pattern is equally powerful: parallel fact-checking against multiple databases simultaneously.</aside>
</section>
<!-- ============================================================ -->
<!-- SUBAGENTS: TRY IT -->
<!-- ============================================================ -->
<section class="blue">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <span class="pill" style="margin-bottom: 1em; width: fit-content;">Try it live</span>
 <h2 style="font-size: 3em; margin-bottom: 0.8em;">Parallel<br>Research</h2>
 <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 20px 24px; max-width: 720px; font-family: 'JetBrains Mono', monospace; font-size: 0.8em; line-height: 1.8;">
 "Research [topic on your beat]. Spin up subagents to map the key players, find recent developments and data points, and write a 300-word brief with story angles."
 </div>
 <div style="display: flex; gap: 8px; margin-top: 1.2em;">
 <span class="pill">you describe the goal</span>
 <span class="pill">codex picks the agents</span>
 <span class="pill">one consolidated output</span>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">The prompt is deliberately simple — you describe WHAT you want, not which agents to use. Codex reads the description field on each agent and dispatches automatically. Run this live — pick a topic from your beat. Watch the agents spin up in the Codex UI. Point out the agent activity panel — you can see what each one is doing in real time.</aside>
</section>
<!-- ============================================================ -->
<!-- SUBAGENTS: THE FULL STACK -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div class="slide-grid g-2-3">
 <div class="col-heading">
 <h2 style="font-size: 3em;">The Full<br>Stack</h2>
 </div>
 <div class="col-body">
 <table>
 <thead>
 <tr><th></th><th>MCP</th><th>Skills</th><th>Subagents</th></tr>
 </thead>
 <tbody>
 <tr><td><strong>Kitchen</strong></td><td>Ingredients</td><td>Recipe</td><td>Sous-chefs</td></tr>
 <tr><td><strong>What</strong></td><td>External data &amp; tools</td><td>Reusable instructions</td><td>Parallel autonomous agents</td></tr>
 <tr><td><strong>Difficulty</strong></td><td>Medium (install)</td><td>Easy (markdown)</td><td>Medium (prompt pattern)</td></tr>
 <tr><td><strong>Use case</strong></td><td>Search, archives, CMS</td><td>Interview prep, digest</td><td>Batch research, investigation</td></tr>
 </tbody>
 </table>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">Kitchen analogy: MCP gives you ingredients — access to data and tools from the outside world. Skills are your recipes — step-by-step instructions for recurring workflows. Subagents are your sous-chefs — they follow the recipes, use the ingredients, and work in parallel so you can do more at once. All three are available in Codex with your existing subscription.</aside>
</section>
<!-- ============================================================ -->
<!-- DISCUSSION: CAPSTONE + WHAT WE LEARNED -->
<!-- ============================================================ -->
<section class="blue">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <span class="pill" style="margin-bottom: 1em; width: fit-content;">Discussion</span>
 <h2 style="font-size: 3.2em; margin-bottom: 0.8em;">Your<br>Capstone</h2>
 <div class="layer-stack" style="max-width: 680px;">
 <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);">
 <h3 style="color: white;">Where is your capstone project right now?</h3>
 </div>
 <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);">
 <h3 style="color: white;">Which layer helps yours — MCP, skills, or subagents?</h3>
 </div>
 <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);">
 <h3 style="color: white;">What external data or tools would make it stronger?</h3>
 </div>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">This discussion lands after they've seen the full stack — MCP, skills, subagents. Now they can map their project to concrete tools. Go around the room: what's your capstone, and which layer unlocks it? The URL-to-video pipeline needs MCP for TTS APIs. The journalist toolkit already has a skill template. The political calendar could use subagents to scrape multiple sources in parallel. Let them connect the dots themselves.</aside>
</section>
<!-- ============================================================ -->
<!-- HUMAN IN THE LOOP -->
<!-- ============================================================ -->
<section class="dark">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div class="slide-grid g-2-3">
 <div class="col-heading">
 <h2 style="font-size: 2.8em;">Human<br>in the<br>Loop</h2>
 </div>
 <div class="col-body">
 <div class="layer-stack">
 <div class="layer-card" style="background: rgba(232,230,225,0.05); border: 1.5px solid rgba(232,230,225,0.12);">
 <h3 style="color: var(--text-light);">Never publish directly</h3>
 <p>Every AI output needs editorial review before it goes live</p>
 </div>
 <div class="layer-card" style="background: rgba(232,230,225,0.05); border: 1.5px solid rgba(232,230,225,0.12);">
 <h3 style="color: var(--text-light);">Cite sources with links</h3>
 <p>If it can't show you where it found something, be skeptical</p>
 </div>
 <div class="layer-card" style="background: rgba(232,230,225,0.05); border: 1.5px solid rgba(232,230,225,0.12);">
 <h3 style="color: var(--text-light);">Flag uncertainty</h3>
 <p>Ask it to say "I'm not sure" instead of filling gaps with plausible-sounding text</p>
 </div>
 <div class="layer-card" style="background: rgba(220,38,38,0.12); border: 1.5px solid rgba(220,38,38,0.25);">
 <h3 style="color: #fca5a5;">Keep sensitive work offline</h3>
 <p>Source identities, embargoed stories, off-the-record material — never in AI tools</p>
 </div>
 </div>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">The more powerful the tool, the more important the guardrails. As you build more automation — scheduled digests, beat monitors, MCP queries — the distance between AI action and your editorial judgment grows. Keep yourself in the loop at publication. The AI is a very fast research assistant, not a journalist.</aside>
</section>
<!-- ============================================================ -->
<!-- THE COMPOUND EFFECT (CLOSING) -->
<!-- ============================================================ -->
<section>
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <h2 style="font-size: 3.2em; max-width: 700px; margin-bottom: 1em;">The 30-Day<br>Challenge</h2>
 <div style="max-width: 640px;">
 <p style="font-size: 1.05em; opacity: 0.85; line-height: 1.7;">Use your assistant daily for 30 days.<br>Add one thing per week — a file, a skill, a tool.<br>Note what works. Share wins with your team.</p>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
 <aside class="notes">The people who get the most from AI assistants aren't the most technical. They're the most consistent. 10 minutes a week: update a beat note, refine a skill, add a source. Every skill you build makes your assistant smarter. Every file you add gives it more context. Share skills with your team — compound the effect. Six months from now, your assistant knows your beat as well as you do.</aside>
</section>
<!-- ============================================================ -->
<!-- WHAT YOU BUILT -->
<!-- ============================================================ -->
<section class="dark">
 <div class="slide-header"><span>BUILD, CODE &amp; SHIP</span><span>CUNY BUILDERS &mdash; 2026</span></div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <h2 style="font-size: 2.8em; margin-bottom: 0.8em;">What You<br>Built</h2>
 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px;">
 <div style="display: flex; gap: 12px; align-items: flex-start;">
 <div style="font-family: 'Anton'; font-size: 1.4em; color: rgba(232,230,225,0.2); min-width: 28px;">01</div>
 <div>
 <h3 style="color: var(--text-light);">Personal AI assistant</h3>
 <p style="opacity: 0.5;">AGENTS.md + context files + skills that know your beat</p>
 </div>
 </div>
 <div style="display: flex; gap: 12px; align-items: flex-start;">
 <div style="font-family: 'Anton'; font-size: 1.4em; color: rgba(232,230,225,0.2); min-width: 28px;">02</div>
 <div>
 <h3 style="color: var(--text-light);">Interview prep skill</h3>
 <p style="opacity: 0.5;">A reusable workflow you'll use before every interview</p>
 </div>
 </div>
 <div style="display: flex; gap: 12px; align-items: flex-start;">
 <div style="font-family: 'Anton'; font-size: 1.4em; color: rgba(232,230,225,0.2); min-width: 28px;">03</div>
 <div>
 <h3 style="color: var(--text-light);">Beat monitor script</h3>
 <p style="opacity: 0.5;">Codex-built Python tool — without writing Python</p>
 </div>
 </div>
 <div style="display: flex; gap: 12px; align-items: flex-start;">
 <div style="font-family: 'Anton'; font-size: 1.4em; color: rgba(232,230,225,0.2); min-width: 28px;">04</div>
 <div>
 <h3 style="color: var(--text-light);">MCP connection</h3>
 <p style="opacity: 0.5;">Your assistant now talks to the world outside your folder</p>
 </div>
 </div>
 <div style="display: flex; gap: 12px; align-items: flex-start;">
 <div style="font-family: 'Anton'; font-size: 1.4em; color: rgba(232,230,225,0.2); min-width: 28px;">05</div>
 <div>
 <h3 style="color: var(--text-light);">Subagents</h3>
 <p style="opacity: 0.5;">Parallel research with named specialists — just shipped in Codex</p>
 </div>
 </div>
 </div>
 </div>
 <div class="slide-footer">FLORENT DAUDENS</div>
</section>
<!-- ============================================================ -->
<!-- CLOSING -->
<!-- ============================================================ -->
<section class="dark">
 <div class="slide-footer">FLORENT DAUDENS</div>
 <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
 <h1 style="font-size: 7em; line-height: 0.85;">Thank<br>You</h1>
 <div style="position: absolute; bottom: 60px; right: 60px; text-align: right; font-size: 0.95em;">
 <div>flo@mizal.ai</div>
 <div style="opacity: 0.5; margin-top: 4px;">li/x: @fdaudens</div>
 </div>
 </div>
</section>
</div><!-- /slides -->
</div><!-- /reveal -->
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script>
<script>
Reveal.initialize({
 hash: true,
 slideNumber: false,
 width: 1200,
 height: 700,
 margin: 0,
 transition: 'fade',
 transitionSpeed: 'fast',
 plugins: [ RevealNotes ],
 keyboard: {
 66: () => { document.querySelector('.reveal').classList.toggle('blackout'); }
 }
});
</script>
</body>
</html>