fix: les
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
# Les 14: Agents — LLM in een loop met tools
|
||||
# Les 14: Cursor + Vercel — van leeg project naar preview-deploys
|
||||
|
||||
> ✅ **Deze les is volledig uitgewerkt**
|
||||
|
||||
## Lesmateriaal
|
||||
|
||||
- [Slide Overzicht](../Les14-Agents/Les14-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les14-Agents/Les14-Docenttekst.md)
|
||||
- [Lesstof](../Les14-Agents/Les14-Lesstof.md)
|
||||
- [Lesopdracht](../Les14-Agents/Les14-Lesopdracht.md)
|
||||
- [Huiswerk](../Les14-Agents/Les14-Huiswerk.md)
|
||||
- [Slide Overzicht](../Les14-Cursor-Vercel-Deploy/Les14-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les14-Cursor-Vercel-Deploy/Les14-Docenttekst.md)
|
||||
- [Docenttekst Autocue](../Les14-Cursor-Vercel-Deploy/Les14-Docenttekst-Autocue.md)
|
||||
- [Lesstof](../Les14-Cursor-Vercel-Deploy/Les14-Lesstof.md)
|
||||
- [Lesopdracht](../Les14-Cursor-Vercel-Deploy/Les14-Lesopdracht.md)
|
||||
|
||||
---
|
||||
|
||||
@@ -16,62 +16,63 @@
|
||||
**Deel 3 — AI Development** (Les 11-16)
|
||||
|
||||
## Beschrijving
|
||||
We gaan een stap verder dan multi-step tool calling. Een agent kan 20-50 stappen autonoom uitvoeren, eigen plannen maken en dynamisch bijsturen. We bouwen een research-agent from scratch met `ToolLoopAgent`, `stopWhen` en `prepareStep`.
|
||||
Online les via Teams. Tim demonstreert live de hele cyclus van een vers `npx create-next-app` project naar een live Vercel-deployment, met Cursor als bouwpartner. We gaan diep op Cursor's features: Chat, Plan, Build, Inline edit, Rules, `AGENTS.md`, en Background agents. Twee features worden in eigen branches gebouwd, elk met preview-URL.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Theorie
|
||||
- Wat is een agent eigenlijk? (LLM + loop + tools + stopconditie)
|
||||
- Wanneer wel/niet een agent gebruiken
|
||||
- AI SDK v6 agent-primitives: `ToolLoopAgent`, `stopWhen`, `prepareStep`
|
||||
- `prepareStep`: dynamisch model + tools per stap wisselen
|
||||
- Cost & latency van agents — wat moet je weten?
|
||||
|
||||
### Live demo's
|
||||
1. Setup nieuwe research-agent (los project)
|
||||
2. Tools: webSearch, fetchPage, summarize, writeReport
|
||||
3. `stopWhen: stepCountIs(20)` + `hasToolCall("writeReport")`
|
||||
4. `prepareStep` om Sonnet te gebruiken voor summarize, Haiku voor search
|
||||
5. Live: vraag de agent een onderwerp te onderzoeken
|
||||
### Theorie + live demo
|
||||
- Scaffolden met `npx create-next-app` (alle prompts uitgelegd)
|
||||
- Git init + GitHub push (via `gh` CLI)
|
||||
- Vercel project koppelen — productie + preview URLs
|
||||
- Vercel CLI — `link`, `env pull`, `env add/rm`, `logs`
|
||||
- Environment variables — drie environments, `NEXT_PUBLIC_` prefix
|
||||
- Cursor in detail:
|
||||
- Vier modi: Chat / Plan / Build / Inline
|
||||
- Context: `@`-mentions (file, folder, code, docs, web, git)
|
||||
- `.cursor/rules/` met YAML front-matter
|
||||
- `AGENTS.md` als shared project-context
|
||||
- Background agents (Kanban-flow)
|
||||
- Top 7 power-user tips
|
||||
- Feature-workflow: plan → branch → build → push → preview
|
||||
- Twee live demo's: hero (plan+build) en about (background agent)
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel AI SDK v6 (`ToolLoopAgent`, `stopWhen`, `prepareStep`)
|
||||
- Tavily of Exa API voor web search
|
||||
- Anthropic + OpenAI providers
|
||||
- Next.js 16 (App Router)
|
||||
- Git + GitHub CLI (`gh`)
|
||||
- Vercel (hobby tier + CLI)
|
||||
- Cursor (Pro of Business)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (in-class, 60 min)
|
||||
## Lesopdracht (na de pauze, ±1,5 uur)
|
||||
|
||||
Studenten kijken mee. In-class oefening:
|
||||
- Voeg een eigen tool toe aan de research-agent
|
||||
- Tweak de stopconditie: laat de agent na 5 minuten stoppen
|
||||
- Bekijk de trace: welke stappen koos de agent?
|
||||
Studenten doorlopen de hele cyclus voor hun eigen project:
|
||||
1. `npx create-next-app` — eigen onderwerp
|
||||
2. Push naar eigen GitHub
|
||||
3. Vercel project + eerste deploy
|
||||
4. `vercel link` + `vercel env pull`
|
||||
5. `.cursor/rules/general.mdc` + `AGENTS.md`
|
||||
6. Feature 1 via Plan + Build
|
||||
7. Feature 2 via Background agent
|
||||
8. PR + merge naar productie
|
||||
|
||||
**Inleveren:** Screenshot van werkende agent-loop.
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (take-home)
|
||||
|
||||
Bouw je eigen agent voor een eigen use-case:
|
||||
- Minimaal 3 tools
|
||||
- Slimme stop-conditie
|
||||
- `prepareStep` voor model-routing
|
||||
- Reflectie 500 woorden: kan dit ook met gewone tool calling?
|
||||
|
||||
**Inleveren:** GitHub URL via Teams.
|
||||
**Inleveren:** productie-URL + tweede preview-URL + PR-URL in de chat.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Het verschil uitleggen tussen tool calling en een agent
|
||||
- Een agent opzetten met `ToolLoopAgent` en custom tools
|
||||
- Een doordachte stopconditie schrijven met `stopWhen`
|
||||
- Modellen dynamisch routen per stap via `prepareStep`
|
||||
- Inschatten wanneer een agent de juiste oplossing is
|
||||
- Een Next.js project scaffolden met `create-next-app` en zinnige defaults kiezen
|
||||
- Een lokale repo aan GitHub koppelen (via `gh` CLI of handmatig)
|
||||
- Een Vercel-project aanmaken via GitHub-import
|
||||
- Het verschil uitleggen tussen `NEXT_PUBLIC_` en server-only env vars
|
||||
- Env vars zetten via Vercel UI én via Vercel CLI
|
||||
- De Cursor CLI `link` + `env pull` workflow uitvoeren
|
||||
- Cursor's vier interactie-modi inzetten op de juiste momenten
|
||||
- Een `.cursor/rules/general.mdc` en een `AGENTS.md` schrijven voor zijn project
|
||||
- Een Background agent inzetten voor parallel werk
|
||||
- Een feature van Plan tot live preview-URL brengen in onder de 15 minuten
|
||||
|
||||
Reference in New Issue
Block a user