fix: lessons
This commit is contained in:
@@ -1,157 +1,77 @@
|
||||
# Les 12: Project Setup & AI Config (.cursorrules, claude.md)
|
||||
# Les 12: Tool Calling — Laat AI zelf functies kiezen
|
||||
|
||||
> ✅ **Deze les is volledig uitgewerkt**
|
||||
|
||||
## Lesmateriaal
|
||||
|
||||
- [Slide Overzicht](../Les12-Tool-Calling/Les12-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les12-Tool-Calling/Les12-Docenttekst.md)
|
||||
- [Lesstof](../Les12-Tool-Calling/Les12-Lesstof.md)
|
||||
- [Lesopdracht](../Les12-Tool-Calling/Les12-Lesopdracht.md)
|
||||
- [Huiswerk](../Les12-Tool-Calling/Les12-Huiswerk.md)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 3: Full-Stack Development** (Les 9-12)
|
||||
## Deel
|
||||
**Deel 3 — AI Development** (Les 11-16)
|
||||
|
||||
## Beschrijving
|
||||
Professional project setup en AI configuration voor optimal developer experience. Setup .cursorrules, claude.md, docs/ folder, folder structure optimalisatie en git best practices.
|
||||
Vervolg op Les 11. We lossen het schaalprobleem op: niet alles in de context proppen, maar de AI laten kiezen welke tool (functie) hij nodig heeft. We bouwen 6 tools voor de Polderfest-app: search, stats, schedule, favorites en meer.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen (~45 min)
|
||||
## Te Behandelen
|
||||
|
||||
- Waarom goede project structuur cruciaal is voor AI tools
|
||||
- De ideale folder structuur voor Next.js + AI collaboration
|
||||
- .cursorrules file: syntax, best practices, examples
|
||||
- claude.md: project documentation voor Claude
|
||||
- docs/ folder organization: AI-DECISIONS.md, ARCHITECTURE.md, PROMPT-LOG.md
|
||||
- .env.local vs .env.example configuratie
|
||||
- .gitignore en .cursorignore voor AI tools
|
||||
- .git best practices: meaningful commits, proper history
|
||||
- README setup met project info
|
||||
- TypeScript configuration optimization
|
||||
### Theorie
|
||||
- Wat is Tool Calling? (vergelijking met traditionele API-call)
|
||||
- Het schaalprobleem: 30.000 tokens per call werkt niet voor 50.000 records
|
||||
- `tool({ description, inputSchema, execute })` met Zod
|
||||
- `stopWhen: stepCountIs(5)` — multi-step reasoning
|
||||
- Wanneer tool calling NIET de oplossing is
|
||||
|
||||
### Live demo's
|
||||
1. Eerste tool: `searchBands` met Zod-schema
|
||||
2. Multi-step setup + extra tools (stats, schedule)
|
||||
3. Streaming + tool-results renderen in de UI
|
||||
4. Debug-view: zien welke tools de AI kiest
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Git
|
||||
- GitHub
|
||||
- Vercel AI SDK v6 (`tool`, `stepCountIs`)
|
||||
- Zod voor input-validatie
|
||||
- Supabase queries vanuit tools
|
||||
- Polderfest-demo (in repo: `Les12-Tool-Calling/polderfest-demo`)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur, klassikaal)
|
||||
## Lesopdracht (in-class, 60 min)
|
||||
|
||||
### Setup Je Eindproject Proper
|
||||
Studenten kijken klassikaal mee. In-class oefening:
|
||||
- Voeg een eigen tool toe aan de Polderfest-app (bv. `getBandsByGenre`)
|
||||
- Test of de AI je tool spontaan gebruikt
|
||||
- Check de debug-view: hoeveel stappen nam de chain?
|
||||
|
||||
**Groepsdiscussie (15 min):**
|
||||
Bespreek klassikaal de architecture planning uit Les 11 - welke design patterns voelen goed voor jullie eindproject?
|
||||
|
||||
**Deel 1: Folder Structure (30 min)**
|
||||
|
||||
Zorg dat je project er zo uitziet:
|
||||
```
|
||||
project/
|
||||
├── src/
|
||||
│ ├── app/
|
||||
│ ├── components/
|
||||
│ │ ├── ui/
|
||||
│ │ ├── layout/
|
||||
│ │ └── features/
|
||||
│ ├── lib/
|
||||
│ ├── hooks/
|
||||
│ └── types/
|
||||
├── docs/
|
||||
├── public/
|
||||
├── .cursorrules
|
||||
├── .env.local
|
||||
├── .env.example
|
||||
├── .gitignore
|
||||
├── README.md
|
||||
└── claude.md
|
||||
```
|
||||
|
||||
**Deel 2: .cursorrules Writing (30 min)**
|
||||
|
||||
Maak comprehensive `.cursorrules`:
|
||||
1. Project naam + beschrijving
|
||||
2. Tech stack (Next.js 14, TypeScript, Tailwind, Supabase)
|
||||
3. File structure conventions
|
||||
4. Code conventions (naming, styling, error handling)
|
||||
5. TypeScript strict rules
|
||||
6. DO's en DON'Ts specifiek voor je project
|
||||
|
||||
Example snippets:
|
||||
- "Named exports only, no default exports"
|
||||
- "All components are functional with TypeScript"
|
||||
- "Use Tailwind classes, no inline styles"
|
||||
|
||||
**Deel 3: Documentation Files (30 min)**
|
||||
|
||||
Maak in docs/ folder:
|
||||
- `PROJECT-BRIEF.md` - Project overview, features
|
||||
- `ARCHITECTURE.md` - Component structure, data flow
|
||||
- `AI-DECISIONS.md` - Start document met AI choices
|
||||
- `PROMPT-LOG.md` - Template voor prompts die je gebruikt
|
||||
|
||||
**Deel 4: Git Setup (20 min)**
|
||||
|
||||
1. Review `.gitignore` (include `.env.local`)
|
||||
2. Make initial commit: "Initial project setup"
|
||||
3. Push naar GitHub
|
||||
4. Verify: `.env.local` NOT in git history
|
||||
|
||||
### Deliverable
|
||||
- Complete folder structure
|
||||
- Comprehensive .cursorrules file
|
||||
- Documentation files in docs/
|
||||
- GitHub repo met clean initial commit
|
||||
- README.md with project info
|
||||
**Inleveren:** Screenshot van debug-view met meerdere tool-calls.
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk (take-home)
|
||||
|
||||
### Optimize Configuration & Start Building
|
||||
Bouw vanuit je eigen Les 11-project:
|
||||
- Minimaal 3 tools met Zod-schemas
|
||||
- Multi-step setup (max 5 stappen)
|
||||
- README documenteert elk tool: doel + voorbeeld-prompt
|
||||
- Reflectie 300 woorden: wanneer kies je tool calling vs. all-in-context?
|
||||
|
||||
**Deel 1: tsconfig.json Optimization (30 min)**
|
||||
|
||||
1. Enable strict mode in TypeScript
|
||||
2. Configure path aliases for cleaner imports:
|
||||
```json
|
||||
"@/*": ["./src/*"]
|
||||
```
|
||||
3. Set proper include/exclude
|
||||
|
||||
**Deel 2: Tailwind & Component Setup (45 min)**
|
||||
|
||||
1. Customize `tailwind.config.ts` with your colors
|
||||
2. Setup `globals.css` properly
|
||||
3. Create 5 base UI components:
|
||||
- Button.tsx
|
||||
- Input.tsx
|
||||
- Card.tsx
|
||||
- Layout.tsx
|
||||
- Navigation.tsx
|
||||
|
||||
**Deel 3: Lib Setup (30 min)**
|
||||
|
||||
Create essential lib files:
|
||||
- `lib/supabase.ts` - Initialize Supabase client
|
||||
- `lib/utils.ts` - Utility functions
|
||||
- `lib/constants.ts` - App constants
|
||||
- `types/database.ts` - Database types
|
||||
|
||||
### Deliverable
|
||||
- Optimized TypeScript config with path aliases
|
||||
- Base UI components created
|
||||
- Lib utilities setup
|
||||
- Documentation updated with decisions
|
||||
- GitHub commits with setup progress
|
||||
**Inleveren:** GitHub URL via Teams.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
|
||||
Na deze les kan de student:
|
||||
- Een professional project structure opzetten
|
||||
- Een effectieve .cursorrules file schrijven
|
||||
- claude.md projectdocumentatie maken
|
||||
- AI-DECISIONS.md beginnen en onderhouden
|
||||
- Git best practices volgen
|
||||
- TypeScript strict mode configureren
|
||||
- Path aliases voor cleaner imports opzetten
|
||||
- Base components en utilities creëren
|
||||
- Voorbereiding maken op Deel 4 (Advanced AI)
|
||||
- Een Tool definiëren met `tool()` en Zod-schema
|
||||
- Multi-step tool calling configureren met `stopWhen`
|
||||
- Een Supabase-query als tool blootstellen aan de LLM
|
||||
- Bepalen wanneer tool calling de juiste oplossing is
|
||||
- Tool-calls debuggen via de AI SDK debug-output
|
||||
|
||||
Reference in New Issue
Block a user