fix: les 6

2026-03-11 14:07:00 +01:00
parent d5066021ab
commit 9ffdecf2c4
117 changed files with 13198 additions and 5194 deletions
--- a/Samenvattingen/Les13-Samenvatting.md
+++ b/Samenvattingen/Les13-Samenvatting.md
@@ -1,345 +1,298 @@
-# Les 13: Prompt Engineering & Custom GPTs
+# Les 13: Vercel AI SDK, Tool Calling & Agents

 ---

 ## Hoofdstuk
-**Deel 4: Advanced AI Features** (Les 13-18)
+**Deel 4: Advanced AI & Deployment** (Les 13-18)

 ## Beschrijving
-Verdiep je in advanced prompt engineering en leer eigen AI assistenten maken met Custom GPTs en Claude Projects. Focus op no-code manieren om AI te personaliseren voor jouw workflow.
+Vercel AI SDK fundamentals voor het bouwen van AI-powered features. Stream responses, tool calling, Zod schemas, system prompts, agents met autonome actie. Integreer LLM capabilities in je app.

 ---

-## Te Behandelen
+## Te Behandelen (~45 min)

-### Groepsdiscussie (15 min)
-Bespreek klassikaal de Cursor reflecties uit Les 12 - welke features werken het beste voor welke taken?
+- Vercel AI SDK: wat is het en waarom gebruiken?
+- Installation en basic setup
+- useChat hook voor chat UI state management
+- Streaming responses van API
+- Tool calling: laat AI externe APIs aanroepen
+- Zod schemas voor tool parameters validation
+- System prompts schrijven voor AI behavior
+- Agent patterns: maxSteps, autonomous execution
+- Error handling en edge cases
+- Model selection: OpenAI, Claude, Gemini, etc.

-### Advanced Prompt Engineering
+---

-**Recap van basis technieken (Les 4):**
- Zero-shot vs few-shot prompting
- Chain-of-thought reasoning
- Role prompting
+### Vercel AI SDK Basics

-**Nieuwe technieken:**
+**Wat is het?**
+- React library van Vercel voor AI integration
+- Streaming responses van LLMs
+- Server-side tool calling
+- Multi-turn conversations
+- Gratis, open-source

-#### 1. Structured Output Prompting
-```
-Analyseer deze code en geef feedback in dit exacte format:
-
-## Samenvatting
-[1 zin over de code]
-
-## Sterke punten
- [punt 1]
- [punt 2]
-
-## Verbeterpunten
- [punt 1 met code voorbeeld]
- [punt 2 met code voorbeeld]
-
-## Prioriteit
-[Hoog/Medium/Laag]: [waarom]
-```
-
-#### 2. Constraint-Based Prompting
-```
-Schrijf een React component met deze constraints:
- Maximaal 50 regels code
- Geen externe dependencies
- TypeScript met strict types
- Alleen Tailwind voor styling
- Inclusief error handling
-```
-
-#### 3. Iterative Refinement
-```
-Stap 1: "Schrijf een basis login form"
-Stap 2: "Voeg validatie toe"
-Stap 3: "Voeg loading states toe"
-Stap 4: "Voeg error handling toe"
-Stap 5: "Optimaliseer voor accessibility"
+**Installation:**
+```bash
+npm install ai zod openai
 ```

 ---

-### Custom GPTs
+### useChat Hook

-**Wat zijn Custom GPTs?**
-Gespecialiseerde ChatGPT versies met:
- Specifieke instructies (personality, expertise)
- Eigen kennis (uploaded files)
- Optioneel: Actions (API calls)
+**Client-side chat state management:**

-**Wanneer een Custom GPT maken:**
- Repetitieve taken met dezelfde context
- Specifieke expertise nodig
- Delen met team of anderen
+```typescript
+'use client'
+import { useChat } from 'ai/react'

-**Custom GPT maken:**
-1. Ga naar chat.openai.com/gpts
-2. Klik "Create"
-3. Configureer in "Create" tab OF gebruik "Configure"
+export function ChatComponent() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat({
+    api: '/api/chat',
+  })

-**Voorbeeld: Code Review GPT**
-```
-Instructions:
-Je bent een code reviewer gespecialiseerd in React/Next.js.
-
-Bij elke code review check je:
-1. TypeScript best practices
-2. React hooks correct gebruik
-3. Performance (unnecessary re-renders)
-4. Accessibility basics
-5. Error handling
-
-Geef feedback in dit format:
- ✅ Goed: [wat goed is]
- ⚠️ Suggestie: [verbeterpunten]
- ❌ Issue: [problemen die gefixed moeten worden]
-```
-
-**Voorbeeld: Project Assistant GPT**
-```
-Instructions:
-Je bent mijn persoonlijke development assistant voor [project naam].
-
-Tech stack:
- Next.js 14 met App Router
- TypeScript strict mode
- Tailwind CSS
- Supabase voor backend
-
-Je kent de volgende conventies:
- Named exports (geen default exports)
- Nederlandse comments
- Error handling met try/catch
-
-Wanneer ik code vraag:
-1. Vraag eerst om context als die ontbreekt
-2. Geef TypeScript code met types
-3. Voeg korte uitleg toe
+  return (
+    <div>
+      {messages.map((msg) => (
+        <div key={msg.id}>
+          <strong>{msg.role}:</strong> {msg.content}
+        </div>
+      ))}
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onChange={handleInputChange}
+          placeholder="Type message..."
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  )
+}
 ```

 ---

-### Claude Projects
+### Streaming Responses

-**Wat is een Claude Project?**
- Verzameling van context specifiek voor één doel
- Blijft behouden over conversaties
- Kan bestanden bevatten als knowledge base
+**API Route met streaming:**

-**Wanneer gebruiken:**
- Terugkerend werk aan hetzelfde project
- Consistente coding style nodig
- Documentatie die AI moet kennen
+```typescript
+import { generateText, streamText } from 'ai'
+import { openai } from '@ai-sdk/openai'

-**Project aanmaken:**
-1. Ga naar claude.ai → Projects
-2. Klik "New Project"
-3. Voeg project knowledge toe (files, instructies)
-4. Start conversaties binnen het project
+export async function POST(req: Request) {
+  const { messages } = await req.json()

-**Voorbeeld Project Instructions:**
-```
-Je bent een expert React/Next.js developer die mij helpt met [project].
+  const result = await streamText({
+    model: openai('gpt-4'),
+    system: 'You are a helpful assistant',
+    messages,
+  })

-Technologie stack:
- Next.js 14 met App Router
- TypeScript strict mode
- Tailwind CSS
- Supabase voor backend
- React Query voor data fetching
-
-Coding conventions:
- Functional components met TypeScript
- Named exports (geen default exports)
- Error handling met try/catch
- Nederlandse comments in code
-
-Wanneer je code schrijft:
- Gebruik altijd TypeScript types
- Voeg JSDoc comments toe voor complexe functies
- Denk aan edge cases en error handling
+  return result.toAIStreamResponse()
+}
 ```

-**Project Knowledge toevoegen:**
- Upload je belangrijkste files (schema, README, .cursorrules)
- Upload voorbeeldcode die je stijl toont
- Upload documentatie van libraries die je gebruikt
+**Waarom streaming?**
+- Responses verschijnen real-time (beter UX)
+- Bespaar tokens vs waiting for full response

 ---

-### Custom GPTs vs Claude Projects
+### Tool Calling

-| Aspect | Custom GPT | Claude Project |
-|--------|------------|----------------|
-| **Beschikbaar** | ChatGPT Plus ($20/maand) | Claude Pro ($20/maand) |
-| **Knowledge** | File uploads (tot 20 files) | File uploads (tot 200k tokens) |
-| **Delen** | Kan gepubliceerd worden | Alleen persoonlijk |
-| **Actions** | Ja (API calls) | Nee |
-| **Context window** | ~128k tokens | ~200k tokens |
-| **Beste voor** | Gedeelde tools, API integratie | Persoonlijke projecten, grote codebases |
+**Laat AI externe APIs aanroepen:**
+
+```typescript
+import { generateText } from 'ai'
+import { openai } from '@ai-sdk/openai'
+import { z } from 'zod'
+
+const tools = {
+  getWeather: {
+    description: 'Get weather for a city',
+    parameters: z.object({
+      city: z.string(),
+    }),
+    execute: async ({ city }: { city: string }) => {
+      // Call external API
+      const response = await fetch(`https://api.weather.com?city=${city}`)
+      return response.json()
+    },
+  },
+}
+
+const result = await generateText({
+  model: openai('gpt-4'),
+  tools,
+  prompt: 'What is the weather in Amsterdam?',
+})
+```

 ---

-### Prompt Templates Library
+### Zod Schemas

-**Code Generation:**
-```
-Context: [beschrijf je project/stack]
-Taak: [wat moet er gemaakt worden]
-Requirements:
- [requirement 1]
- [requirement 2]
-Constraints:
- [constraint 1]
-Output: [gewenst format]
+**Type-safe tool parameters:**
+
+```typescript
+import { z } from 'zod'
+
+const SearchProductsSchema = z.object({
+  query: z.string().describe('Search query'),
+  limit: z.number().optional().describe('Max results'),
+  sortBy: z.enum(['price', 'rating']).optional(),
+})
+
+type SearchProductsInput = z.infer<typeof SearchProductsSchema>
 ```

-**Debugging:**
-```
-Error message:
-[plak error]
+---

-Relevante code:
-[plak code]
+### System Prompts

-Wat ik verwacht:
-[gewenst gedrag]
+**Stuur AI behavior:**

-Wat er gebeurt:
-[actueel gedrag]
+```typescript
+const systemPrompt = `You are a helpful recipe assistant.
+Your role is to:
+1. Suggest recipes based on ingredients
+2. Provide cooking instructions
+3. Estimate cooking time
+
+Always be friendly and encouraging.`
+
+const result = await generateText({
+  model: openai('gpt-4'),
+  system: systemPrompt,
+  prompt: userMessage,
+})
 ```

-**Code Review:**
-```
-Review de volgende code op:
-1. Best practices voor [framework]
-2. Potentiële bugs
-3. Performance issues
-4. Security vulnerabilities
+---

-[plak code]
+### Agent Patterns

-Geef feedback in format: ✅ Goed / ⚠️ Suggestie / ❌ Issue
+**Multi-step autonomous execution:**
+
+```typescript
+const result = await generateText({
+  model: openai('gpt-4'),
+  tools: { getWeather, getFlights },
+  maxSteps: 3, // Maximum iterations
+  prompt: 'Plan a trip to Paris next week',
+})
 ```

-**Refactoring:**
-```
-Refactor deze code met de volgende doelen:
- [doel 1, bijv. "verbeter leesbaarheid"]
- [doel 2, bijv. "reduceer duplicatie"]
-
-Behoud dezelfde functionaliteit.
-Leg uit wat je verandert en waarom.
-
-[plak code]
-```
+**Hoe het werkt:**
+1. AI bepaalt welke tool nodig is
+2. Tool wordt uitgevoerd
+3. Result teruggestuurd naar AI
+4. AI beslist next stap (repeat tot maxSteps of done)

 ---

 ## Tools
- ChatGPT (Custom GPTs)
- Claude (Projects)
- Prompt template documenten
+- Vercel AI SDK
+- Zod
+- OpenAI API (of andere LLM provider)
+- Cursor

 ---

-## Lesopdracht (2 uur)
+## Lesopdracht (2 uur, klassikaal)

-### Bouw Je Eigen AI Assistants
+### Bouw Chat Interface met Streaming

-**Deel 1: Claude Project (45 min)**
+**Groepsdiscussie (15 min):**
+Bespreek klassikaal de project setup ervaringen uit Les 12 - hoe goed werken jullie .cursorrules en configuration?

-Maak een Claude Project voor je eindproject:
-1. Ga naar claude.ai → Projects → New Project
-2. Schrijf project instructions:
-   - Tech stack
-   - Coding conventions
-   - Project specifieke regels
-3. Upload relevante files (schema, README)
-4. Test met 3 verschillende vragen
+**Deel 1: Installation & Setup (30 min)**

-**Deel 2: Custom GPT (45 min)**
+```bash
+npm install ai zod openai
+```

-Maak een Custom GPT voor code review:
-1. Ga naar chat.openai.com/gpts
-2. Klik "Create"
-3. Schrijf instructions voor jouw stack
-4. Test met code uit je project
+Create `app/api/chat/route.ts`:
+- Setup Vercel AI SDK
+- Configure OpenAI model
+- Add system prompt

-**Deel 3: Vergelijking (30 min)**
+**Deel 2: Chat Component (45 min)**

-Test dezelfde taak met beide:
- "Review deze component op best practices"
- Noteer verschillen in output
- Welke is beter voor welk doel?
+Build `app/page.tsx`:
+1. Use useChat hook
+2. Render messages list
+3. Input form for user messages
+4. Display streaming responses
+
+**Deel 3: Tool Calling (30 min)**
+
+Add 2 simple tools:
+- getTime: return current time
+- getRandomNumber: return random number
+
+Update API route to handle tools with Zod schemas.
+
+**Deel 4: Testing (15 min)**
+
+Test chat locally with different prompts that trigger tools.

 ### Deliverable
- Claude Project URL of screenshot
- Custom GPT (als je ChatGPT Plus hebt) of instructies doc
- Vergelijkingsnotities
+- Werkende chat interface with streaming
+- 2 integrated tools
+- GitHub commit with AI chat feature

 ---

 ## Huiswerk (2 uur)

-### Optimaliseer Je AI Assistants
+### Integreer AI in Eindproject

-**Deel 1: Iteratie (1 uur)**
+**Deel 1: Project-Specific Tools (1 uur)**

-Verbeter je Claude Project:
-1. Test met 5 verschillende taken
-2. Noteer waar instructies tekortschieten
-3. Pas instructies aan
-4. Test opnieuw
+Add 2-3 tools relevant to your project:
+- Recipe Generator: tool to search recipes API
+- Budget App: tool to calculate expenses
+- Travel Planner: tool to search destinations

-Documenteer in `docs/AI-ASSISTANTS.md`:
- Originele instructies
- Wat niet werkte
- Verbeterde instructies
- Resultaat verschil
+Define with Zod schemas and execute functions.

-**Deel 2: Prompt Library (30 min)**
+**Deel 2: System Prompt Tuning (30 min)**

-Maak een persoonlijke prompt library:
-```markdown
-# Mijn Prompt Templates
+Write a custom system prompt for your AI:
+- Define personality
+- Set constraints
+- Add context about your app

-## Code Generation
-[template]
+**Deel 3: Integration (30 min)**

-## Debugging
-[template]
-
-## Code Review
-[template]
-
-## Refactoring
-[template]
-```
-
-**Deel 3: Reflectie (30 min)**
-
-Schrijf reflectie (300 woorden):
- Welke AI assistant gebruik je waarvoor?
- Wat is het verschil tussen Claude Projects en Custom GPTs?
- Hoe heeft dit je workflow verbeterd?
+Connect AI chat to your main app:
+- Add chat page/component
+- Integrate with Supabase auth (if needed)
+- Test end-to-end

 ### Deliverable
- Geoptimaliseerde AI assistant instructies
- Prompt library document
- Reflectie (300 woorden)
+- AI feature integrated in project
+- Custom tools defined
+- docs/AI-DECISIONS.md updated with choices
+- GitHub commits with AI integration

 ---

 ## Leerdoelen
+
 Na deze les kan de student:
- Advanced prompt engineering technieken toepassen (structured output, constraints, iterative refinement)
- Een Custom GPT maken met specifieke instructies en knowledge
- Een Claude Project opzetten met project context
- De juiste tool kiezen (Custom GPT vs Claude Project) per use case
- Een persoonlijke prompt library opbouwen en onderhouden
+- Vercel AI SDK installeren en configureren
+- useChat hook gebruiken voor chat UI
+- Streaming responses implementeren
+- Tool calling setup met Zod schemas
+- Externe APIs aanroepen via tools
+- System prompts schrijven voor AI behavior
+- Agent patterns verstaan (maxSteps)
+- AI features in een Next.js app integreren
+- Tool parameters valideren met Zod