rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: les

Browse Source
This commit is contained in:
Tim Rijkse
2026-06-17 07:15:32 +02:00
parent c023192113
commit ad8b25e70c
115 changed files with 6316 additions and 16971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

827
Les14-Cursor-Vercel-Deploy/Les14-Slide-Overzicht.md
View File

@@ -1,436 +1,563 @@
# Les 13 — Externe APIs + Cursor agents + Vercel deploy
## Slide Overzicht (Klas A — 3 uur fysiek, demo-driven)
# Les 14 — Cursor + Vercel: van leeg project naar preview
## Slide Overzicht (Klas A — online, demo-driven)
**Lesvorm:** Tim demonstreert klassikaal. Studenten kijken. Zelf bouwen = huiswerk.
**Demo-app:** Nieuwe kleine Pokédex (PokéAPI, geen key, visueel)
**Vervolg op:** Les 12 — Tool Calling
**Aansluit op:** Les 14 — Agents
**Lesvorm:** online via Teams. Tim deelt scherm met slides + Cursor + browser.
**Demo:** een vers `npx`-gescaffold Next.js project, gebouwd live in Cursor.
**Aansluit op:** Les 13 (Polderfest-agent op localhost) → Les 15 (RAG).
---
## Blok-structuur
| Blok | Onderwerp | Slides |
|------|-----------|--------|
| 1 | Welkom + Vandaag | 1–2 |
| 2 | Scaffold + Git + Vercel koppelen | 3–7 |
| 3 | Vercel CLI + env vars | 8–10 |
| 4 | Cursor — Editor / Agent / Background + rules | 11–19 |
| 5 | Live feature-workflow (plan → branch → preview) | 20–24 |
| 6 | Recap + Nu jullie | 25–27 |
---
## Slide 1: Title
### Les 13 — Externe APIs + Cursor + Vercel
### Les 14 — Cursor + Vercel
**Visual:**
- Background: CREAM
- "Les 13" in BLUE
- "Externe APIs + Cursor + Vercel" in BLACK
- Subtitle: "Van localhost naar productie — met Cursor agents en preview deploys"
- "Les 14" in BLUE
- "Cursor + Vercel" in BLACK
- Subtitle: "Van leeg project naar preview-deploys — met AI"
- Iconen onderaan: Cursor-logo, Vercel-driehoek, GitHub-octocat
---
## Slide 2: Terugblik
### Waar staan we?
## Slide 2: Vandaag
### Wat we live gaan bouwen
**Vorige lessen:**
- Les 11: AI SDK basics
- Les 12: Tool Calling
- Les 13: Agents
**Vandaag in één lopend voorbeeld:**
1. `npx create-next-app` — vers project
2. Git init + push naar GitHub
3. Vercel project koppelen → eerste deploy
4. Vercel CLI: link, env pull/add
5. Cursor open: Plan, Build, Context, Rules, Background agents
6. Feature in nieuwe branch → preview-URL
7. Tweede feature via een Background agent
**Tot nu toe:** alles draaide op `localhost:3000`. Geen wereld eromheen.
**Werkwijze:** ik bouw klassikaal, jullie kijken en knopen mee. Na pauze doen jullie het zelf.
**Vandaag:**
- Externe APIs aanroepen (geen LLM nodig, gewoon data ophalen)
- App naar productie met Vercel
- Feature branches met Cursor agents (Composer + Background)
- GitHub Actions CI (lint + build per PR)
**Visual:** localhost icoon → cloud icoon met branches eruit.
**Visual:** workflow-pijl van leeg project → Cursor-features → preview-URL.
---
## Slide 3: Planning
### Vandaag — 180 minuten
## Slide 3: Scaffold met `npx`
### Vers Next.js project in 30 seconden
| Onderwerp | Duur |
|-----------|------|
| Welkom + Terugblik | 10 min |
| Theorie: Externe APIs in Next.js | 15 min |
| Theorie: Cursor agents — Composer vs Background | 15 min |
| Theorie: Vercel preview deploys + GH Actions | 15 min |
| **Live Demo 1** — Pokédex bouwen met Composer | 30 min |
| **Live Demo 2** — Deploy naar Vercel productie | 15 min |
| **Pauze** | 15 min |
| **Live Demo 3** — Feature branch met Background Agent | 25 min |
| **Live Demo 4** — GitHub Actions CI | 15 min |
| Composer vs Background — wanneer welke? | 10 min |
| Lesopdracht + Huiswerk | 10 min |
| Vragen + Afsluiting | 5 min |
**Format:** Demo-driven, Cursor en browser side-by-side.
---
## Slide 4: Wat is een externe API?
### Data van buiten, in jouw app
**Het idee:**
- Andere mensen / bedrijven hebben data of functionaliteit
- Ze stellen die beschikbaar via HTTP endpoints (REST)
- Jij doet een `fetch()` en krijgt JSON terug
**Voorbeelden:**
- PokéAPI — Pokemon data (geen key)
- Open-Meteo — weer (geen key)
- GitHub API — repos, users, issues
- Tavily — web search (key nodig)
- Stripe — betalingen (key + secret)
**API keys** horen in environment variables — nooit in je code committen.
**Visual:** Diagram: Next.js → fetch → externe API → JSON terug.
---
## Slide 5: Drie manieren om een API te fetchen in Next.js
### Static, Server (dynamic), Client — wanneer welke?
| | Wanneer gerenderd | Data versheid | Externe API key veilig? | Wanneer kiezen |
|---|---|---|---|---|
| **Static** (build-time) | Tijdens `next build` | Bij elke build | Ja, server | Data verandert zelden (blog, marketing, lijst) |
| **Server / Dynamic** (request-time) | Bij elke request | Altijd vers | Ja, server | Data per user/request anders, of telkens vers nodig |
| **ISR** (revalidate) | Eerste keer + na X seconden | Periodiek vers | Ja, server | Sweet spot: snel + redelijk vers (Pokédex!) |
| **Client** (`useEffect`) | In de browser na hydration | Live | **Nee** — sleutel staat in browser | User-interactie, live updates, geen geheim |
**Code-verschil = één optie in `fetch`:**
```typescript
// 1. STATIC — gecached forever (default in Next.js!)
const res = await fetch(URL);
// 2. ISR — cache met revalidate
const res = await fetch(URL, { next: { revalidate: 3600 } });
// 3. DYNAMIC — altijd vers
const res = await fetch(URL, { cache: "no-store" });
```bash
npx create-next-app@latest mijn-portfolio
# kies: TypeScript, Tailwind, App Router, src/ dir
cd mijn-portfolio
npm run dev
```
**Vandaag gebruiken we:** Static voor de Pokédex-lijst, ISR voor detail-pages.
**Wat je krijgt:**
- Werkende Next.js 16 app op `localhost:3000`
- TypeScript + Tailwind preconfigured
- ESLint klaar
- `.gitignore` met `.env.local`, `node_modules`, `.next`
**Visual:** terminal-screenshot van create-next-app vragen.
---
## Slide 6: Cursor — twee soorten agents
### Composer vs Background
## Slide 4: Git init + push naar GitHub
### Code online krijgen
| | Composer | Background Agent |
|---|----------|------------------|
| Waar draait | Lokaal in je editor | Cursor cloud |
| Mode | Synchroon — jij wacht | Async — runt zonder jou |
| Output | Diffs in editor | Branch + PR op GitHub |
| Goed voor | Pair programming, snelle changes | Welomschreven feature, tijdens andere taak |
| Aanroep | `Cmd+I` (Mac) / `Ctrl+I` | `Cmd+Shift+P` → Background Agent |
| Repo nodig | Lokaal | Verbonden met Cursor cloud |
```bash
git init
git add .
git commit -m "init"
git branch -M main
**Beide kanten:**
- Composer: jij stuurt, snel feedback, niet schaalbaar voor lange taken
- Background: schaalbaar (5 agents tegelijk), maar minder controle in flight
**Visual:** Twee tracks naast elkaar — synchroon (jij + composer) vs asynchroon (background agent + jij elders).
---
## Slide 7: Vercel — productie, preview, environment variables
### Wat verandert er per omgeving?
**Drie omgevingen, drie scopes:**
| Scope | Wordt gedeployed bij | URL | Wie ziet het |
|-------|---------------------|-----|--------------|
| **Production** | Push naar `main` | `je-app.vercel.app` | Iedereen |
| **Preview** | Push naar elke andere branch | `je-app-git-{branch}-{user}.vercel.app` | Iedereen met link (delen via PR) |
| **Development** | Lokaal `pnpm dev` | `localhost:3000` | Alleen jij |
**Environment variables per scope:**
In Vercel → Project → Settings → Environment Variables zet je per var **drie keer** een waarde:
| Var | Production | Preview | Development |
|-----|------------|---------|-------------|
| `DATABASE_URL` | prod database | staging database | lokale database |
| `OPENAI_API_KEY` | echte key | test-key (lage limit) | jouw persoonlijke key |
| `STRIPE_KEY` | `sk_live_...` | `sk_test_...` | `sk_test_...` |
| `NEXT_PUBLIC_APP_URL` | je-app.com | preview-url | localhost:3000 |
**Waarom is dit belangrijk?**
- Preview branches mogen NIET stagecoach naar je productie-database schrijven
- Test API-keys voorkomen kosten/quota-problemen bij experiments
- Eén branch = één geïsoleerde wereld om in te testen
**Cursor Background Agent + Vercel preview = killer combo:**
Agent opent PR → preview URL automatisch in PR-comment → reviewer test live in browser, geen lokale setup nodig.
---
## Slide 8: GitHub Actions CI
### Lint + build per PR
**Waarom:**
- Voor merge weet je: code lint clean én build slaagt
- Voorkomt "werkte op mijn laptop"
- Background Agent doet PR → CI draait automatisch → groene check of feedback
**Minimaal `.github/workflows/ci.yml`:**
```yaml
name: CI
on:
pull_request:
branches: [main]
push:
branches: [main]
jobs:
check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v3
with: { version: 9 }
- uses: actions/setup-node@v4
with: { node-version: 20, cache: pnpm }
- run: pnpm install
- run: pnpm lint
- run: pnpm build
gh repo create mijn-portfolio --public --source=. --push
```
**Tijd per CI-run:** ~1-2 min op een kleine Next.js app.
**Of handmatig:**
- github.com → New repository → naam → empty
- `git remote add origin <url>`
- `git push -u origin main`
**Resultaat:** je code staat op github.com — basis voor alles wat volgt.
**Visual:** flow-diagram local → GitHub.
---
## Slide 9: Wat we vandaag bouwen
### Pokédex — Next.js + PokéAPI
## Slide 5: Vercel project koppelen
### Van GitHub-repo naar live URL
**Doel:** Een mini-Pokédex om de hele pipeline te oefenen.
**Drie stappen:**
1. vercel.com/new → **Import Git Repository**
2. Kies je `mijn-portfolio` repo
3. Framework auto-detect: Next.js → **Deploy**
**Stack:**
- Next.js 16 + TypeScript + Tailwind + Shadcn
- PokéAPI (geen key, gratis, geen rate-limit bij normaal gebruik)
- Cursor (Composer + Background Agent)
- GitHub (repo + Actions)
- Vercel (productie + preview deploys)
**Wat Vercel doet:**
- Klonet je repo
- Draait `npm install` + `npm run build`
- Deploy't naar het Edge Network
- Geeft je een URL: `mijn-portfolio-<scope>.vercel.app`
**Features die we bouwen vandaag:**
**Voortaan:** elke `git push` → automatische deploy. Geen extra werk.
| Feature | Met | Branch |
|---------|-----|--------|
| Pokédex list (eerste 151) | Composer | main |
| Detail page per Pokemon | Composer | main |
| Search met filter | Background Agent | feature/search |
| Type-filter chips | Background Agent | feature/type-filter |
**Visual:** Folder-tree + GitHub branch-diagram + Vercel URLs.
**Visual:** Vercel "Import Project" scherm.
---
## Slide 10: LIVE DEMO 1 — Pokédex met Composer + rendering modes
### ~30 min
## Slide 6: Productie-URL + branches
### Wat krijg je gratis
**Wat ik laat zien:**
1. `pnpm create next-app pokedex --typescript --tailwind --app`
2. Open in Cursor
3. **Composer (`Cmd+I`)**: "Bouw een lijst-pagina met de eerste 151 Pokémon van PokéAPI als statische pagina. Gebruik Tailwind cards. De fetch moet static zijn — geen revalidate."
4. Composer maakt: `app/page.tsx` met `fetch(URL)` (static) + map + cards
5. `pnpm dev` — werkt
6. **Composer**: "Voeg detail-pagina toe op /pokemon/[name] met sprite + types + stats. Gebruik ISR met revalidate van 3600 seconden."
7. Composer maakt: `app/pokemon/[name]/page.tsx` met `{ next: { revalidate: 3600 } }`
8. **Bewijs in de browser:** open detail-pagina, refresh — direct geladen (statisch). Verander URL → andere Pokémon → ook snel (ISR cache).
9. **Show de Network tab:** geen calls naar PokéAPI vanuit browser, alles server.
10. **Bonus:** maak één pagina met `cache: "no-store"` (dynamic) zodat studenten alle drie de modi gezien hebben.
**Twee URL-types:**
**Belangrijk om uit te leggen:**
- Composer is een TAB in Cursor — niet hetzelfde als Chat
- Multi-file edits zichtbaar als diffs — je accepteert per file
- Terminal commands vragen toestemming
- De rendering-mode is één optie in `fetch()` — verder verandert je code niet
| Type | URL-formaat | Wanneer |
|------|-------------|---------|
| **Productie** | `mijn-portfolio-<scope>.vercel.app` | push naar `main` |
| **Preview** | `...-git-<branch>-<scope>.vercel.app` | push naar elke andere branch |
**Visual:** Cursor screenshot met Composer panel.
**Voordeel preview-URLs:**
- Iedereen kan klikken zonder lokale setup
- PR-bot post URL automatisch in je Pull Request
- Per push update de preview vanzelf
**Visual:** twee URL-bubbels (groen = productie, blauw = preview).
---
## Slide 11: LIVE DEMO 2 — Deploy naar Vercel + Environment variables
### ~20 min
## Slide 7: Env vars in Vercel UI
### Geheimen veilig op productie
**Wat ik laat zien:**
1. **GitHub:** new repo `pokedex` — public
2. **Lokaal:**
```bash
git init
git add . && git commit -m "Initial Pokédex"
git branch -M main
git remote add origin https://github.com/USER/pokedex.git
git push -u origin main
```
3. **Vercel:** Add New → Import Git Repository → kies `pokedex` → Deploy
4. Wachten 60-90s op build → Productie URL — werkt!
5. **Environment Variables demo:** voeg een var toe in `app/page.tsx`:
```tsx
<p>Omgeving: {process.env.NEXT_PUBLIC_APP_ENV}</p>
```
6. **Vercel → Settings → Environment Variables:**
- `NEXT_PUBLIC_APP_ENV` = `production` → vinkje bij Production
- `NEXT_PUBLIC_APP_ENV` = `preview` → vinkje bij Preview
- Lokaal: `.env.local` → `NEXT_PUBLIC_APP_ENV=development`
7. Redeploy → productie URL toont "production"
8. Maak feature branch `chore/banner`, push → preview URL toont "preview"
9. Lokaal `pnpm dev` → toont "development"
**Wat je vandaag NOG niet hebt** (lege app), maar binnenkort wel:
- Database URLs
- API keys (OpenAI, Stripe, etc.)
- Secret tokens
**Wat studenten moeten zien:**
- Push to main = productie deploy
- Push to andere branch = preview deploy (eigen URL)
- Per omgeving andere env-waarden
- Voor secrets: vinkje **alleen** bij Production (preview-key gebruiken in preview!)
**Drie environments:**
| Environment | Wanneer actief |
|-------------|----------------|
| Production | `main` branch deploys |
| Preview | alle andere branches |
| Development | `vercel dev` lokaal |
**`NEXT_PUBLIC_` prefix** → variabele wordt in browser-bundle gestopt. Zonder prefix = server-only.
**Visual:** Vercel env-vars dashboard screenshot.
---
## Slide 12: Pauze
### 15 minuten
## Slide 8: Vercel CLI — waarom
### Sneller dan klikken in het dashboard
**Wat de CLI je geeft:**
- `vercel link` — koppel lokale folder aan Vercel project
- `vercel env pull` — productie-env-vars → `.env.local`
- `vercel env add` / `rm` — vars beheren zonder dashboard
- `vercel logs` — bekijk runtime logs
- `vercel --prod` — handmatige productie-deploy
**Installeren:**
```bash
npm i -g vercel
vercel login
```
**Visual:** terminal-screenshot van `vercel --help`.
---
## Slide 13: LIVE DEMO 3 — Feature branch + Background Agent
### ~25 min
## Slide 9: `vercel link` + `vercel env pull`
### Lokaal werken met dezelfde env vars als productie
**Wat ik laat zien:**
1. **Cursor:** `Cmd+Shift+P` → "Open Background Agent"
2. **Verbind** repo aan Cursor cloud (eenmalig — accepteren in browser)
3. **Prompt aan Background Agent:**
> "Maak een nieuwe branch `feature/search`. Voeg een zoekbalk toe bovenaan de homepage. Wanneer iemand typt, filter de Pokémon-lijst op naam. Gebruik client-side state. Push de branch + open een PR met titel 'Add search bar'."
4. **Background Agent gaat aan de slag** — Tim laat zien hoe je 'm volgt in het Cursor panel
5. **~3-5 minuten later:** PR verschijnt op GitHub
6. **Vercel** comment in PR: preview URL → klik → live preview!
7. **Demo:** zoeken werkt op preview URL
8. **Code review** in GitHub UI: wat heeft de agent gedaan?
9. **Merge** → main → productie deploy
```bash
cd mijn-portfolio
vercel link
# → kiest scope (org/team) + project
# → maakt .vercel/project.json aan
**Tweede prompt — parallel:**
> "Maak branch `feature/type-filter`. Voeg chips toe bij elk type (fire, water, ...) om te filteren."
vercel env pull .env.local
# → trekt ALLE env vars uit je gekoppelde environment
# → schrijft naar .env.local (overschrijft bestaande)
```
Beide branches kunnen tegelijk draaien.
**Voordeel:** je hoeft je env vars niet handmatig te kopiëren. Eén commando = synced lokaal.
**Visual:** Cursor Background Agent panel + GitHub PR + Vercel preview URL.
**Tip:** `vercel env pull --environment=preview` voor preview-specifieke vars.
**Visual:** terminal-output van een succesvolle env pull.
---
## Slide 14: LIVE DEMO 4 — GitHub Actions CI
### ~15 min
## Slide 10: `vercel env add/rm`
### Vars wijzigen vanuit terminal
**Wat ik laat zien:**
1. **Vraag aan Composer:**
> "Voeg een GitHub Actions workflow toe: lint + build moeten slagen op PR's naar main."
2. Composer maakt `.github/workflows/ci.yml`
3. Push naar nieuwe branch `chore/add-ci`
4. Open PR → GitHub Actions tab → workflow draait
5. **Demo failing CI:** introduceer typo (`<dvi>`), push, zie rode X
6. Fix met Composer ("repareer de TypeScript build error in de PR"), push, zie groene check
7. **Branch protection:** main beschermen — PR's mogen pas mergen als CI groen is
```bash
# Toevoegen
vercel env add OPENAI_API_KEY production
# → vraagt om waarde
**Waarom belangrijk:**
- Background Agents kunnen lint-errors maken — CI vangt dit op
- Voor je merge: weet je dat het op een schone runner ook werkt
- Geen "werkt op mijn laptop"-discussies
# Voor alle 3 environments tegelijk:
vercel env add DATABASE_URL production preview development
# Verwijderen
vercel env rm OPENAI_API_KEY production
# Lijst
vercel env ls
```
**Wanneer handig:** als je een API-key roteert, hoef je niet via dashboard. Eén CLI-commando, klaar.
**Visual:** CLI-flow met prompt-balletjes.
---
## Slide 15: Composer vs Background Agent
### Wanneer welke?
## Slide 11: Cursor — alles in één IDE
### Wat is het, waarom belangrijk
| Scenario | Tool |
|----------|------|
| Snelle wijziging tijdens coden | Composer |
| Complex refactor over meerdere files | Composer (kun je begeleiden) |
| Onbekend gebied — wil zien wat agent doet | Composer |
| Welomschreven feature, kan op de achtergrond | Background Agent |
| Parallel werken aan 3 features | 3x Background Agent |
| Tijdens vergadering een PR voorbereiden | Background Agent |
| Repo nog niet in Cursor cloud | Composer |
**Wat is Cursor:**
- VS Code-fork met AI native ingebouwd
- Niet een extensie — het IS de IDE
- Werkt met Claude, GPT, Gemini en lokale modellen
**Mentale model:**
- **Composer = pair programming** — jij + AI samen aan dezelfde plek
- **Background Agent = delegeren** — je geeft taak, gaat iets anders doen, komt terug
**Wat je krijgt boven gewone VS Code:**
- Chat met volledige codebase-context
- Plan-mode (eerst denken, dan doen)
- Build-mode (autonoom uitvoeren)
- Inline edit (Cmd+K)
- Background agents (cloud, async)
- Cursor Rules (per-project instructies)
- Tab-completion die meekijkt met je hele bestand
**Risico bij Background Agent:**
- Agent kan vastlopen op rare config — debugging is moeilijker
- Verbruikt credits (Cursor Pro of Business)
- Te vage prompts → matige PR's. Specifiek zijn helpt.
**Visual:** vier kwadranten met de hoofdfeatures.
---
## Slide 16: Lesopdracht + Huiswerk
### Pokédex zelf bouwen + deploy
## Slide 12: De twee windows + Agent mode
### Cursor 3 — wat zit waar
**Lesopdracht (in-class, 30 min):**
- Eigen Pokédex repo opzetten (zelfde setup als demo)
- 1 feature met Composer toevoegen
- Push naar GitHub + connect Vercel
- Productie URL openen — werkt
In Cursor 3 zijn er **twee hoofdvensters** die je met **Cmd+Shift+N** wisselt:
**Huiswerk (voor Les 16):**
- **A:** Feature branch met Background Agent (1 feature, jouw keuze) → preview URL delen
- **B:** GitHub Actions CI (lint + build) in werking
- **C:** Branch protection — main mag pas merge na groene CI
- **D:** `DEPLOY.md` met:
- Productie URL + 1 preview URL
- Reflectie: Composer vs Background — wanneer welke werkte beter?
- 1 voorbeeld waar Background Agent verbluffend goed of slecht was
| Window | Wanneer | Hoe |
|--------|---------|-----|
| **Editor Window** (classic) | Code schrijven en reviewen | Cmd+Shift+N → Editor |
| **Agents Window** | Meerdere agents parallel managen | Cmd+Shift+N → Agents |
**Bonus:**
- Eigen externe API integreren (Open-Meteo, GitHub, jouw keuze)
- Vercel environment vars demo (verschillende waarde in preview vs prod)
**Binnen Editor Window:**
- **Cmd+L** — chat opent rechts (kies modus: Ask / Agent / Plan)
- **Cmd+K** — inline edit op selectie
- **Tab** — completion
**Binnen Agents Window:**
- Lijst met running / done agents
- Lokale agents, cloud (background) agents, remote SSH
**Gouden regel:**
- Code schrijven of 1 ding bouwen → **Editor Window** + **Agent mode** in chat
- Meerdere features parallel → **Agents Window** met Background agents
**Visual:** twee windows naast elkaar + sneltoets-pijl.
---
## Slide 17: Volgende les + Afsluiting
### Vragen?
## Slide 13: Editor Window — stap voor stap
### Je hoofdwerkplek voor code
**Vandaag gezien:**
- Externe API integratie in Server Components
- Static / ISR / Dynamic / Client — vier rendering modes
- Cursor Composer voor synchrone changes
- Cursor Background Agent voor async features
- Vercel productie + preview per branch
- Environment variables per omgeving (production / preview / development)
- GitHub Actions CI (lint + build)
**Wat je live ziet:**
1. **Cmd+Shift+N** — switcht naar Editor Window (classic IDE-layout)
2. Linker zijbalk = file explorer, midden = editor, onder = terminal
3. **Cmd+L** — opent chat-paneel rechts
4. Voor snelle inline edits: selecteer code, druk **Cmd+K**, beschrijf wijziging
5. Cursor toont **diff inline** in de editor
6. **Accept** (Tab) of **Reject** (Esc)
7. Voor file-search: **Cmd+P** (zoals VS Code)
8. **Tab** — accepteert AI auto-completion suggesties
**Volgende les (Les 14): Agents**
- LLM in een loop met tools, autonoom 20-50 stappen
- `ToolLoopAgent`, `stopWhen`, `prepareStep`
- Research-agent from scratch
- Wanneer wel/niet agents gebruiken
**Wanneer kies je dit:**
- Je standaard coding-flow — alles wat je in VS Code zou doen
- Wanneer je veel files tegelijk wilt zien (split screen)
- Voor VS Code extensions (linters, formatters, debugger)
**Vragen? Feedback?**
**Visual:** screenshot Editor Window met file explorer + editor + Cmd+K-diff.
---
## Slide Summary
## Slide 14: Agent mode — stap voor stap
### AI bouwt autonoom in je Editor Window
| # | Title | Type |
|---|-------|------|
| 1 | Title | Opening |
| 2 | Terugblik | Recap |
| 3 | Planning | 180-min |
| 4 | Externe APIs | Theorie |
| 5 | Externe API code | Theorie |
| 6 | Cursor — Composer vs Background | Theorie |
| 7 | Vercel preview deploys | Theorie |
| 8 | GitHub Actions CI | Theorie |
| 9 | Wat we bouwen | Intro demo |
| 10 | **LIVE DEMO 1** — Pokédex + Composer | Demo |
| 11 | **LIVE DEMO 2** — Vercel deploy | Demo |
| 12 | Pauze | Break |
| 13 | **LIVE DEMO 3** — Background Agent + preview | Demo |
| 14 | **LIVE DEMO 4** — GitHub Actions CI | Demo |
| 15 | Wanneer welke Cursor-mode | Reflectie |
| 16 | Lesopdracht + Huiswerk | Praktijk |
| 17 | Afsluiting + Les 13 preview | Closing |
**Wat je live ziet:**
1. In Editor Window: **Cmd+L** — chat opent rechts
2. Bovenaan chat: **mode-selector** → kies **"Agent"**
3. Typ de **hele taak**: *"Bouw een /about pagina met team-grid in onze huisstijl"*
4. **Enter** — agent start zelfstandig
5. Cursor toont een lopende **takenlijst** + voortgang
6. Agent **edit meerdere files**, runt terminal-commando's (vraagt vooraf), kan **web browsen**
7. Geen limiet op het aantal tool-calls per taak
8. Aan het einde: samenvatting → **Keep / Accept all** of per file
**Wanneer kies je dit:**
- Grotere feature die meerdere files raakt
- Refactors, nieuwe pagina's, API-routes opzetten
- Je vertrouwt het plan en hebt tijd om aan het eind te reviewen
**Visual:** chat-paneel met mode-dropdown + lopende takenlijst.
---
## Bronnen
## Slide 15: Background agents — stap voor stap
### Cloud-based async — in Agents Window
- **PokéAPI:** https://pokeapi.co/
- **Next.js fetching:** https://nextjs.org/docs/app/building-your-application/data-fetching
- **Cursor agents:** https://cursor.com/product
- **Vercel preview deployments:** https://vercel.com/docs/deployments/preview-deployments
- **Vercel environment variables:** https://vercel.com/docs/environment-variables
- **GitHub Actions for Next.js:** https://nextjs.org/docs/app/building-your-application/deploying
- **GitHub branch protection:** https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-protected-branches
**Wat het is:**
- Async agents die in **geïsoleerde cloud VMs** draaien
- Werken parallel in eigen Git branches
- Beheer via **Agents Window** (Cmd+Shift+N) of `cursor.com/agents`
**Hoe een agent aanmaken:**
1. **Cmd+Shift+N** → naar Agents Window
2. Klik **"New agent"** (of `+` in de kop)
3. Kies **environment**: local / cloud / remote SSH
4. Beschrijf de taak — specifiek, alsof het een ticket is
5. Optioneel: kies branch-naam (`feature/about`)
6. Klik **"Start"**
7. Agent draait → je kunt switchen terug naar Editor Window en doorwerken
**Hoe je resultaten ophaalt:**
1. **Cmd+Shift+N** terug naar Agents Window
2. Klare agents staan op **"Done"** in de agents-lijst
3. Klik agent → zie **diff + commit message + uitgevoerde stappen**
4. **"Open in PR"** → automatische PR op GitHub
5. Vercel maakt preview-URL → review → merge
**Wanneer:** 2–4 parallelle features, lange refactors die je niet wilt babysitten, of taken die je triggert vanuit je telefoon / Slack / Linear.
**Visual:** Agents Window screenshot met agents-lijst.
---
## Slide 16: Context — `@`-mentions
### Hoe Cursor je codebase begrijpt
**Wat je kunt taggen in chat:**
| Tag | Betekenis |
|-----|-----------|
| `@file:foo.tsx` | specifiek bestand |
| `@folder:components` | hele map |
| `@code:functionName` | losse functie/class |
| `@docs` | externe documentatie |
| `@web` | live web-search |
| `@git` | git history / blame |
| `@recommended` | Cursor's eigen suggestie |
**Voorbeeld:** *"Refactor @file:UserCard.tsx zodat het @code:useUser uit @folder:hooks gebruikt"*
**Visual:** chat-bubble met meerdere `@`-tags highlighted.
---
## Slide 17: Cursor Rules
### Per-project instructies aan de AI
**Wat zijn rules:**
- Markdown-bestanden in `.cursor/rules/`
- Worden aan ELKE prompt toegevoegd als systeem-instructie
- Per-bestand-glob: alleen actief op matching bestanden
**Voorbeeld `.cursor/rules/general.mdc`:**
```markdown
---
description: Algemene project-conventies
alwaysApply: true
---
- Gebruik TypeScript strict mode
- Tailwind voor styling — geen CSS modules
- Server components by default; "use client" alleen waar nodig
- Imports: gebruik @/ alias voor src/
- Geen any-types
```
**Visual:** mappenstructuur met `.cursor/rules/` uitgevouwen.
---
## Slide 18: Project context — `AGENTS.md`
### High-level documentatie voor AI
**Naast Cursor Rules:**
- `AGENTS.md` of `PROJECT.md` in repo root
- Beschrijft architectuur, conventies, "hoe wij hier dingen doen"
- Cursor + Claude Code + GitHub Copilot lezen dit alle drie
**Wat erin staat:**
- Tech stack + waarom die keuzes
- Belangrijke patronen (auth flow, error handling, etc.)
- Hoe testen, hoe lokaal runnen, hoe deployen
- Pointers naar belangrijke bestanden
**Effect:** AI begrijpt je codebase in plaats van wilde gokken te doen.
**Visual:** AGENTS.md structuur als outline.
---
## Slide 19: Tips & Tricks
### Wat Cursor-power-users doen
**De top 7:**
1. **Cmd+I** voor Composer met multi-file context
2. **@-everything aanvullen** — Cursor onthoudt context per chat
3. **Plan + Apply per stap** — niet alles tegelijk accepteren
4. **`alwaysApply: false`** Rules voor opt-in conventies
5. **Auto-mode** — Cursor kiest beste model per taak
6. **Diff-preview** vóór accept — Cmd+Shift+Enter
7. **Notepads** — herbruikbare prompt-snippets per project
**Anti-pattern:** alles in één gigantische chat dumpen. Hou chats focused.
**Visual:** tips als badges met nummering.
---
## Slide 20: De feature-workflow
### Hoe één feature van idee naar preview-URL gaat
**Vijf stappen die we live doen:**
1. **Plan** in Cursor: beschrijf de feature
2. **Branch:** `git checkout -b feature/x` (Cursor kan dit ook)
3. **Build:** laat Cursor de code schrijven
4. **Commit + push** → Vercel start automatisch een preview-deploy
5. **Open preview-URL** → test, geef feedback, itereer
**Cyclus duurt ±10 minuten** per feature. Inclusief AI denkwerk.
**Visual:** circulair diagram met de 5 stappen.
---
## Slide 21: Live demo 1 — Hero section
### Plan → Build via Cursor Chat
**Wat ik demonstreer:**
- Nieuwe branch: `git checkout -b feature/hero`
- Cursor Chat: *"Plan een hero-section voor de homepage. Gradient achtergrond, een grote titel, ondertitel, twee CTA-knoppen."*
- Plan bekijken → Apply
- Inline tweaks via Cmd+K voor finetuning
- `git add . && git commit -m "feat: hero section"`
**Visual:** screenshot van Cursor met Plan-output.
---
## Slide 22: Push → preview-URL
### Vercel doet de rest
```bash
git push -u origin feature/hero
```
**Binnen 30–60 seconden:**
- Vercel start build
- Preview-URL verschijnt
- (Als er een PR open is) Vercel-bot plakt URL onder de PR
**Open de preview-URL:** je nieuwe hero section staat live, gedeeld met iedereen die de link heeft.
**Visual:** Vercel build-progress screen.
---
## Slide 23: Live demo 2 — About page (background agent)
### Parallel werken
**Wat ik demonstreer:**
- Nieuwe branch: `git checkout -b feature/about`
- Cursor → *"Open background agent: bouw een /about pagina met team-leden in een grid. Gebruik onze hero-section als stijlreferentie."*
- Agent gaat in eigen tab aan de slag
- Ik blijf in main editor verder werken
- Agent meldt zich klaar → review diff → apply
- Commit + push → tweede preview-URL
**Effect:** twee features tegelijk, beide met eigen preview.
**Visual:** twee preview-URLs naast elkaar.
---
## Slide 24: PR mergen → productie
### De cyclus afsluiten
**Op GitHub:**
1. Beide branches → PR's openen
2. Reviewen in preview-URL's
3. Mergen naar `main`
4. Vercel detecteert merge → bouwt productie-deploy
5. Productie-URL update vanzelf
**Mentaliteit:** main is altijd deploy-baar. Feature branches zijn experimenteerruimte.
**Visual:** PR-pagina met "Merge" knop gemarkeerd.
---
## Slide 25: Recap
### Wat we vandaag hebben gedaan
- Vers Next.js project gescaffold met `npx`
- Git repo + push naar GitHub
- Vercel project gekoppeld + eerste deploy
- Vercel CLI: link, env pull/add
- Cursor in detail: Chat, Plan, Build, Inline, Rules, Background agents
- Twee features in eigen branches → twee preview-URL's
- PRs gemerged → productie
**Wat je nu kunt:** elke nieuwe app uit deze opleiding (of erbuiten) op deze manier opzetten. Cursor + Vercel zijn je standaard-werkbank.
**Visual:** checklist met alle stappen.
---
## Slide 26: Nu jullie — Lesopdracht
### Bouw je eigen Cursor + Vercel flow
**Wat je gaat doen (in eigen tempo, ±1,5 uur):**
1. `npx create-next-app` — je eigen project (kies een onderwerp dat je leuk vindt)
2. Push naar GitHub
3. Vercel project + eerste deploy
4. `vercel link` + `vercel env pull`
5. Open in Cursor → schrijf één `.cursor/rules/general.mdc`
6. Schrijf één `AGENTS.md`
7. Bouw 2 features in eigen branches via Cursor (Plan → Build)
8. Push beide → check preview-URL's
9. Open één PR, deel beide URL's in de chat
**Voor exacte stappen:** `Les14-Lesopdracht.pdf`.
**Visual:** opdrachtkaart met checklist.
---
## Slide 27: Volgende les
### Wat komt eraan
**Les 15 — RAG + Embeddings:**
- AI antwoorden op basis van eigen documenten
- Embeddings + pgvector + context-injectie
- We bouwen een PDF Q&A-app
**Voorbereiding:**
- Je Next.js-app uit vandaag staat live op Vercel
- Je hebt minstens 2 PR's met preview-URL's gemerged
- Cursor draait, AGENTS.md en `.cursor/rules/` zijn ingevuld
**Visual:** plaatje document → embedding → AI-antwoord.