diff --git a/Eindopdracht-AI-Developer.md b/Eindopdracht-AI-Developer.md index 84353ff..3838f39 100644 --- a/Eindopdracht-AI-Developer.md +++ b/Eindopdracht-AI-Developer.md @@ -2,7 +2,7 @@ ## Leerlijn AI-Driven Development (30 EC) -**Versie 1.0** +**Versie 2.0** --- @@ -22,25 +22,27 @@ De leerlijn AI-Driven Development leert je om als developer effectief samen te werken met AI tools. Je leert niet alleen apps bouwen MET AI, maar ook AI features bouwen IN je apps. +**Dit is een zelfstandige eindopdracht.** Na het afronden van de 18 lessen werk je in je eigen tijd aan dit project. Je past alle geleerde vaardigheden en tools toe om een complete applicatie te bouwen. + Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen: -1. **Fundamentals of AI-Driven Development** - Je kunt AI tools (ChatGPT, Claude, OpenCode) effectief inzetten voor code generatie en begrijpt de basisprincipes van Large Language Models. +1. **TypeScript & Next.js Development** + Je kunt een moderne webapplicatie bouwen met Next.js 14 (App Router), TypeScript, en Tailwind CSS. -2. **Prompt Engineering & Iteratief Werken** - Je kunt effectieve prompts schrijven, iteratief werken met AI, en Skills gebruiken voor consistente output. +2. **Database Design & Supabase** + Je kunt een database ontwerpen met correcte relaties, en CRUD operaties en authenticatie implementeren met Supabase. -3. **Backend Development met Supabase** - Je kunt een database opzetten, CRUD operaties uitvoeren, en authenticatie implementeren met Supabase. +3. **AI-Assisted Development met Cursor** + Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, @ mentions, context management, en Composer mode. -4. **AI-Assisted Development met Cursor** - Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, context management, en Composer mode. +4. **Skills.sh voor Consistente Output** + Je kunt Skills gebruiken om de kwaliteit van AI-gegenereerde code te verhogen en consistente best practices te hanteren. -5. **AI Features Bouwen met Vercel AI SDK** - Je kunt AI-powered features implementeren in je applicatie met de Vercel AI SDK (chat interfaces, streaming responses). +5. **Prompt Engineering & Iteratief Werken** + Je kunt effectieve prompts schrijven, iteratief werken met AI, en je proces documenteren. -6. **Testing, Debugging & Deployment** - Je kunt code debuggen met AI hulp, tests schrijven, en een applicatie deployen naar productie. +6. **AI Agents Bouwen met Vercel AI SDK** + Je kunt AI agents bouwen met de Vercel AI SDK, inclusief Tool Calling voor externe API integratie en `maxSteps` voor autonome multi-step taken. --- @@ -50,29 +52,88 @@ In het bedrijfsleven worden steeds vaker AI-tools ingezet om sneller en efficië Voor deze eindopdracht bouw je een **volledige webapplicatie met AI-integratie**. Je bent vrij in de keuze van het type applicatie, zolang je maar aantoont dat je de geleerde tools en technieken beheerst. +**Verplichte technologieën (geleerd in de lessen):** + +| Technologie | Les | Toepassing | +|-------------|-----|------------| +| TypeScript | Les 5 | Typed code, interfaces, strict mode | +| Next.js 14 | Les 6-7 | App Router, SSR, API routes, React Query | +| Supabase | Les 8-9 | Database design, CRUD, authenticatie | +| Cursor | Les 12, 16 | .cursorrules, @ mentions, Composer | +| Skills.sh | Les 4 | Minimaal 2 skills actief tijdens development | +| Vercel AI SDK | Les 17 | Tool Calling, Agents met `maxSteps` | +| Externe API | Les 17 | Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, etc.) | +| Vercel | Les 18 | Deployment naar productie | + **Wat je gaat doen:** - Een professionele repository opzetten met juiste structuur en documentatie - .cursorrules files schrijven die Cursor instrueren voor jouw project -- Een Next.js applicatie bouwen met Tailwind CSS +- Skills.sh installeren en minimaal 2 relevante skills gebruiken +- Een Next.js applicatie bouwen met TypeScript en Tailwind CSS - Data opslaan en ophalen via Supabase (database + authenticatie) -- Een AI-powered feature implementeren met de Vercel AI SDK +- Een **AI Agent** bouwen met de Vercel AI SDK: + - Minimaal 3 tools die externe API data ophalen + - `maxSteps` voor autonome multi-step taken + - De AI interpreteert en combineert data voor de gebruiker - Je applicatie deployen naar Vercel - Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md -**Voorbeeldprojecten:** +--- -| Project | Beschrijving | AI Feature | -|---------|--------------|------------| -| **AI Recipe Generator** | App waar je ingrediënten invoert en recepten krijgt | Chat: "Wat kan ik maken met kip, rijst en paprika?" | -| **Smart Budget Buddy** | Persoonlijke finance tracker met inzichten | Chat: "Analyseer mijn uitgaven en geef tips" | -| **Travel Planner AI** | Reis planning app met AI assistent | Chat: "Plan een weekend Barcelona voor 2 personen" | +## Voorbeeldprojecten -Je mag ook een eigen projectidee bedenken, mits het voldoet aan alle technische eisen. +Je mag zelf bepalen wat je bouwt, zolang je aan alle technische eisen voldoet. **Belangrijk:** je applicatie moet AI combineren met externe data via een gratis API. De AI moet de data **interpreteren en analyseren**, niet alleen doorsturen. -Door deze opdracht uit te voeren toon je aan dat je zelfstandig een moderne webapplicatie kunt bouwen met AI-assisted development, en dat je AI-features kunt integreren die echte waarde toevoegen voor gebruikers. +Hieronder drie voorbeelden ter inspiratie: -Om de leerlijn AI-Driven Development met succes af te ronden is een voldoende nodig voor de integrale eindopdracht; met de deelopdrachten kunnen geen losse cursussen worden afgerond. +### 1. Cocktail Sommelier +Een AI-powered cocktail advisor die helpt bij het kiezen en plannen van drinks. + +| Aspect | Invulling | +|--------|-----------| +| **Externe API** | [TheCocktailDB](https://www.thecocktaildb.com/api.php) - 636 cocktails, recepten, ingrediënten | +| **Database** | users, favorites, party_plans, preferences | +| **Auth** | Login om favorieten en voorkeuren op te slaan | +| **Agent Tools** | `searchByIngredient`, `getCocktailDetails`, `searchNonAlcoholic`, `searchByCategory` | +| **Agent Taak** | "Plan cocktails voor mijn verjaardagsfeest, 15 mensen, sommigen drinken geen alcohol" | +| **AI Meerwaarde** | Agent zoekt meerdere opties, combineert ingrediëntenlijsten, geeft persoonlijk advies | + +### 2. Recipe Remix +Een slimme recepten-assistent die helpt met koken op basis van wat je hebt. + +| Aspect | Invulling | +|--------|-----------| +| **Externe API** | [TheMealDB](https://www.themealdb.com/api.php) - 597 recepten, ingrediënten, categorieën | +| **Database** | users, saved_recipes, pantry_items, diet_preferences | +| **Auth** | Login om recepten en voorraad op te slaan | +| **Agent Tools** | `searchByIngredient`, `getRecipeDetails`, `searchByCategory`, `searchByArea` | +| **Agent Taak** | "Ik heb kip, rijst en paprika. Wat kan ik maken voor een gezin met een vegetariër?" | +| **AI Meerwaarde** | Agent zoekt recepten, checkt dieetwensen, suggereert alternatieven, maakt weekmenu | + +### 3. Quiz Master AI +Een adaptieve quiz app met een AI die moeilijkheid aanpast en uitlegt. + +| Aspect | Invulling | +|--------|-----------| +| **Externe API** | [Open Trivia DB](https://opentdb.com/api_config.php) - 4000+ vragen in diverse categorieën | +| **Database** | users, quiz_sessions, scores, progress | +| **Auth** | Login om voortgang bij te houden | +| **Agent Tools** | `getQuestions`, `checkAnswer`, `getHint`, `explainAnswer` | +| **Agent Taak** | "Start een quiz over wetenschap, pas de moeilijkheid aan op mijn niveau" | +| **AI Meerwaarde** | Agent selecteert vragen, past moeilijkheid aan, geeft hints, legt foute antwoorden uit | + +### Beschikbare Gratis APIs + +| API | Data | URL | +|-----|------|-----| +| TheCocktailDB | Cocktails & recepten | thecocktaildb.com/api.php | +| TheMealDB | Maaltijden & recepten | themealdb.com/api.php | +| Open Trivia DB | Quiz vragen | opentdb.com/api_config.php | +| REST Countries | Landen informatie | restcountries.com | +| Open Library | Boeken data | openlibrary.org/developers | + +**Eigen idee?** Je mag ook een eigen projectidee uitwerken met een andere gratis API, mits het voldoet aan alle technische eisen (agent met tools, externe data, AI interpretatie). Bespreek je idee eventueel met de docent. --- @@ -94,18 +155,22 @@ Een goed gestructureerd project is essentieel voor effectief werken met AI tools **Wat je doet:** -Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je maakt documentatie files aan die je gedurende het project gaat vullen. +Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je installeert Skills.sh en activeert relevante skills. Je maakt documentatie files aan die je gedurende het project gaat vullen. **Vereisten:** - GitHub repository met duidelijke naam en beschrijving -- Next.js project met TypeScript en Tailwind CSS +- Next.js 14 project met TypeScript, Tailwind CSS, en App Router +- Skills.sh geïnstalleerd met minimaal 2 actieve skills: + - `vercel-react-best-practices` (verplicht) + - Minimaal 1 andere relevante skill (bijv. `supabase-postgres-best-practices`) - Folder structuur volgens best practices: ``` project/ ├── .cursor/rules/ │ ├── general.mdc │ └── [andere rules files] + ├── .skills/ # Skills.sh configuratie ├── docs/ │ ├── PROJECT-BRIEF.md │ ├── PROMPT-LOG.md @@ -113,7 +178,9 @@ Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de j ├── src/ │ ├── app/ │ ├── components/ - │ └── lib/ + │ ├── lib/ + │ ├── hooks/ + │ └── types/ ├── .env.example └── README.md ``` @@ -122,13 +189,14 @@ Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de j - Projectnaam en beschrijving - Doelgroep - Core features (3-5) - - Tech stack keuzes + - Tech stack keuzes met onderbouwing - Complete README.md met installatie-instructies - .env.example met alle benodigde environment variables **Op te leveren:** - GitHub repository URL - Screenshot van folder structuur +- Lijst van geïnstalleerde Skills - Inhoud van je belangrijkste .cursorrules file --- @@ -139,53 +207,95 @@ Elke serieuze applicatie heeft data opslag en gebruikersbeheer nodig. Je gaat Su **Wat je doet:** -Je maakt een Supabase project aan en ontwerpt je database schema via de Table Editor (geen SQL kennis nodig). Je implementeert CRUD operaties in je Next.js app en voegt authenticatie toe zodat gebruikers kunnen inloggen. +Je ontwerpt eerst je database schema op papier of in een diagram tool (zoals geleerd in Les 8). Daarna maak je een Supabase project aan en implementeert je tabellen via de Table Editor. Je implementeert CRUD operaties met React Query (zoals geleerd in Les 7) en voegt authenticatie toe. **Vereisten:** +- Database schema ontworpen met: + - Correcte primary keys (UUID) + - Foreign keys voor relaties + - Minimaal één one-to-many relatie + - Gedocumenteerd in AI-DECISIONS.md - Supabase project aangemaakt en gekoppeld - Minimaal 2 tabellen die relevant zijn voor je applicatie -- Werkende CRUD operaties (Create, Read, Update, Delete) +- Werkende CRUD operaties met React Query: + - useQuery voor data ophalen + - useMutation voor create/update/delete + - Optimistic updates (optioneel maar aangeraden) - Authenticatie geïmplementeerd: - - Login/registratie pagina + - Login/registratie pagina met Supabase Auth UI - Protected routes (alleen voor ingelogde gebruikers) - - User-specifieke data (elke user ziet alleen eigen data) + - User-specifieke data (RLS policies) +- TypeScript types voor je database schema - Environment variables correct geconfigureerd - Foutafhandeling bij database operaties **Op te leveren:** +- Database schema diagram of beschrijving - Screenshot van je Supabase tabellen -- Beschrijving van je database schema in AI-DECISIONS.md +- Beschrijving van je relaties in AI-DECISIONS.md - Werkende login flow (gedemonstreerd in eindpresentatie) --- -## Deelopdracht 3: AI Feature met Vercel AI SDK +## Deelopdracht 3: AI Agent met Externe API -Het onderscheidende element van jouw applicatie is de AI-integratie. Je gaat een chat-interface of AI-powered feature bouwen die echte waarde toevoegt voor de gebruiker. +Het onderscheidende element van jouw applicatie is de AI Agent die externe data combineert met intelligente interpretatie. Je gaat een agent bouwen die autonoom meerdere stappen kan uitvoeren om complexe taken te volbrengen. **Wat je doet:** -Je installeert de Vercel AI SDK en bouwt een feature waarbij gebruikers kunnen communiceren met AI. Dit kan een chatbot zijn, een content generator, of een andere AI-powered functionaliteit die past bij jouw applicatie. +Je bouwt een AI Agent met de Vercel AI SDK die: +1. Tools gebruikt om data op te halen van een externe API +2. Meerdere stappen autonoom kan uitvoeren (`maxSteps`) +3. De data interpreteert en combineert tot nuttig advies **Vereisten:** -- Vercel AI SDK (`ai` package) geïnstalleerd en geconfigureerd -- API route voor AI communicatie (`/api/chat` of vergelijkbaar) -- Frontend met `useChat` of `useCompletion` hook -- Streaming responses (tekst verschijnt woord voor woord) -- Relevante system prompt die past bij jouw applicatie -- Context uit je Supabase database meegeven aan AI (bijv. user preferences, historische data) -- Goede UX: - - Loading indicator tijdens AI response - - Error handling bij API fouten - - Mogelijkheid om conversation te clearen -- Conversation history opslaan in Supabase (optioneel maar aangeraden) +- Vercel AI SDK (`ai` package) + Zod geïnstalleerd +- **Externe API integratie:** + - Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, Open Trivia DB, of andere) + - API data wordt opgehaald via tools, niet hardcoded +- **Tool Calling:** + - Minimaal 3 tools gedefinieerd met Zod parameters + - Duidelijke `description` per tool + - Error handling in elke tool +- **Agent functionaliteit:** + - `maxSteps` van minimaal 3 (AI kan meerdere tools aanroepen) + - System prompt die agent gedrag beschrijft + - AI combineert/interpreteert data (niet alleen doorsturen) +- **Frontend:** + - Chat interface met `useChat` hook + - Streaming responses + - Loading indicator + - Error handling +- **Integratie met Supabase:** + - User preferences meegeven als context + - Conversation history opslaan (optioneel maar aangeraden) + +**Voorbeeld van wat NIET voldoet:** +``` +User: "Zoek cocktails met rum" +AI: "Hier zijn cocktails met rum: Mojito, Daiquiri, Piña Colada" +``` +Dit is alleen data doorsturen, geen interpretatie. + +**Voorbeeld van wat WEL voldoet:** +``` +User: "Ik geef een feest voor 10 mensen, sommigen drinken geen alcohol" +AI: [roept searchByIngredient aan] + [roept searchNonAlcoholic aan] + [roept getCocktailDetails aan voor 3 cocktails] + "Voor je feest raad ik aan: Mojito (fris, makkelijk te maken in grote + hoeveelheden), Margarita (populair, past bij Mexicaans eten), en voor + niet-drinkers: Virgin Piña Colada. Je hebt nodig: 2 flessen rum, + 1 fles tequila, limoenen, munt..." +``` +Dit is een agent die data combineert en persoonlijk advies geeft. **Op te leveren:** -- Beschrijving van je AI feature in AI-DECISIONS.md -- System prompt die je gebruikt (met uitleg waarom) -- Minimaal 5 prompts in PROMPT-LOG.md die leidden tot je AI implementatie +- Agent design in AI-DECISIONS.md (welke tools, waarom, typische flow) +- System prompt met uitleg +- Minimaal 5 prompts in PROMPT-LOG.md over agent development --- @@ -195,24 +305,30 @@ Een applicatie is pas af als hij getest, gedeployed, en gedocumenteerd is. Je ro **Wat je doet:** -Je test je applicatie grondig (handmatig en/of geautomatiseerd), deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces. +Je test je applicatie grondig, deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces met AI tools. **Vereisten:** **Testing & Quality:** - Applicatie handmatig getest op belangrijkste flows -- Minimaal 1 bug gevonden en opgelost met AI hulp (gedocumenteerd in PROMPT-LOG.md) +- Minimaal 1 bug gevonden en opgelost met Cursor hulp (gedocumenteerd in PROMPT-LOG.md) - Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md) +- TypeScript strict mode zonder errors - Geen console errors in productie +- Lighthouse score >80 op Performance **Deployment:** - Applicatie gedeployed op Vercel - Environment variables correct geconfigureerd in Vercel +- Supabase redirect URLs geconfigureerd voor productie - Applicatie werkt volledig op productie URL -- Custom domain (optioneel) **Documentatie:** -- PROMPT-LOG.md bevat minimaal 10 significante prompts +- PROMPT-LOG.md bevat minimaal 10 significante prompts met: + - De prompt zelf + - Welke tool (Cursor/ChatGPT/Claude) + - Wat werkte wel/niet + - Wat je leerde - AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen - README.md is up-to-date en compleet @@ -220,7 +336,7 @@ Je test je applicatie grondig (handmatig en/of geautomatiseerd), deployt naar Ve - Introductie: wat doet je app, voor wie? - Demo: live walkthrough van belangrijkste features - AI integratie: toon je AI feature in actie -- Technische keuzes: waarom deze aanpak? +- Development proces: hoe heb je Cursor en Skills.sh ingezet? - Reflectie: wat ging goed, wat was lastig, wat heb je geleerd? - Conclusie: wat zou je anders doen? @@ -253,15 +369,21 @@ Hieronder vind je de randvoorwaarden waaraan de eindopdracht moet voldoen. De be - [ ] De GitHub repository bevat een complete folder structuur zoals beschreven - [ ] Er zijn minimaal 2 .cursorrules files aanwezig met zinvolle instructies +- [ ] Skills.sh is geïnstalleerd met minimaal 2 actieve skills (waaronder vercel-react-best-practices) - [ ] docs/PROJECT-BRIEF.md is volledig ingevuld - [ ] docs/PROMPT-LOG.md bevat minimaal 10 gedocumenteerde prompts - [ ] docs/AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen - [ ] README.md bevat installatie-instructies die werken -- [ ] De applicatie gebruikt Next.js met TypeScript en Tailwind CSS +- [ ] De applicatie gebruikt Next.js 14 (App Router) met TypeScript en Tailwind CSS +- [ ] Database schema bevat correcte relaties (primary keys, foreign keys) - [ ] De applicatie is gekoppeld aan Supabase met minimaal 2 tabellen -- [ ] CRUD operaties zijn geïmplementeerd en werken +- [ ] CRUD operaties zijn geïmplementeerd met React Query - [ ] Authenticatie is geïmplementeerd (login/registratie) -- [ ] De Vercel AI SDK is geïmplementeerd met werkende AI feature +- [ ] De Vercel AI SDK is geïmplementeerd met werkende AI Agent +- [ ] Minimaal 1 externe API is geïntegreerd via Tool Calling +- [ ] Minimaal 3 tools zijn gedefinieerd met Zod parameters +- [ ] Agent heeft `maxSteps` van minimaal 3 +- [ ] AI interpreteert/combineert data (niet alleen doorsturen) - [ ] Streaming responses zijn geïmplementeerd - [ ] De applicatie is gedeployed op Vercel en werkt volledig @@ -302,12 +424,16 @@ Overzichtelijke inhoudsopgave met paginanummers. ### 2. Technische Implementatie - Gekozen tech stack en waarom - Database design (met diagram of beschrijving) -- AI feature: hoe werkt het, welke system prompt, waarom deze aanpak +- AI Agent design: + - Welke externe API en waarom + - Welke tools heb je gedefinieerd + - Hoe werkt de agent flow (typisch scenario) + - System prompt en waarom deze aanpak - Belangrijkste technische uitdagingen en oplossingen ### 3. AI-Assisted Development Proces -- Hoe heb je AI tools ingezet tijdens development? -- Welke tools werkten goed, welke minder? +- Hoe heb je Cursor ingezet? Welke .cursorrules werkten goed? +- Welke Skills.sh skills heb je gebruikt en wat was het effect? - Voorbeelden van effectieve prompts (verwijs naar PROMPT-LOG.md) - Belangrijkste beslissingen gemaakt met AI hulp (verwijs naar AI-DECISIONS.md) @@ -338,6 +464,7 @@ project-naam/ │ ├── general.mdc # Algemene project regels │ ├── components.mdc # Component conventies (optioneel) │ └── api.mdc # API/Supabase regels (optioneel) +├── .skills/ # Skills.sh configuratie ├── docs/ │ ├── PROJECT-BRIEF.md # Project beschrijving │ ├── PROMPT-LOG.md # Gedocumenteerde prompts @@ -345,19 +472,26 @@ project-naam/ ├── src/ │ ├── app/ # Next.js App Router │ │ ├── api/ -│ │ │ └── chat/ -│ │ │ └── route.ts # AI API route -│ │ ├── login/ -│ │ │ └── page.tsx +│ │ │ └── agent/ +│ │ │ └── route.ts # AI Agent API route (met tools) +│ │ ├── (auth)/ # Auth route group +│ │ │ ├── login/ +│ │ │ └── register/ │ │ ├── layout.tsx │ │ └── page.tsx │ ├── components/ │ │ ├── ui/ # Basis UI components +│ │ ├── layout/ # Layout components │ │ └── features/ # Feature-specifieke components +│ ├── hooks/ +│ │ ├── useAuth.ts +│ │ └── [custom hooks] │ ├── lib/ │ │ ├── supabase.ts # Supabase client -│ │ └── utils.ts +│ │ ├── utils.ts +│ │ └── queryClient.ts # React Query client │ └── types/ +│ ├── database.ts # Supabase types │ └── index.ts ├── .env.example # Template voor env vars ├── .env.local # Lokale env vars (NIET committen) @@ -365,7 +499,7 @@ project-naam/ ├── next.config.js ├── package.json ├── README.md -├── tailwind.config.js +├── tailwind.config.ts └── tsconfig.json ``` @@ -380,18 +514,18 @@ De eindopdracht wordt beoordeeld op basis van de volgende criteria. Per criteriu | **1. Project Setup** | *Leeruitkomst: Repository inrichting & AI configuratie* | **15%** | | 1.1 | Repository structuur is professioneel en compleet | 5% | | 1.2 | .cursorrules files zijn zinvol en project-specifiek | 5% | -| 1.3 | Documentatie (README, PROJECT-BRIEF) is compleet | 5% | -| **2. Database & Auth** | *Leeruitkomst: Backend development met Supabase* | **25%** | -| 2.1 | Database schema is logisch en past bij de applicatie | 10% | -| 2.2 | CRUD operaties werken correct | 10% | +| 1.3 | Skills.sh correct geïnstalleerd en gebruikt | 5% | +| **2. Database & Auth** | *Leeruitkomst: Database design & Supabase* | **25%** | +| 2.1 | Database schema is logisch met correcte relaties | 10% | +| 2.2 | CRUD operaties werken correct met React Query | 10% | | 2.3 | Authenticatie is correct geïmplementeerd | 5% | -| **3. AI Feature** | *Leeruitkomst: AI features bouwen met Vercel AI SDK* | **30%** | -| 3.1 | AI feature voegt waarde toe voor de gebruiker | 10% | -| 3.2 | Technische implementatie is correct (streaming, error handling) | 10% | -| 3.3 | System prompt en context zijn doordacht | 10% | +| **3. AI Agent** | *Leeruitkomst: AI Agents bouwen met Vercel AI SDK* | **30%** | +| 3.1 | Agent voegt waarde toe: interpreteert en combineert data | 10% | +| 3.2 | Tool Calling correct geïmplementeerd (min. 3 tools, externe API) | 10% | +| 3.3 | Agent gedrag correct (`maxSteps`, system prompt, error handling) | 10% | | **4. Testing & Deployment** | *Leeruitkomst: Testing, debugging & deployment* | **15%** | | 4.1 | Applicatie werkt volledig in productie | 10% | -| 4.2 | Code kwaliteit en foutafhandeling | 5% | +| 4.2 | Code kwaliteit (TypeScript strict, geen errors) | 5% | | **5. Proces & Documentatie** | *Leeruitkomst: AI-assisted development proces* | **15%** | | 5.1 | PROMPT-LOG.md toont effectief prompt gebruik | 5% | | 5.2 | AI-DECISIONS.md toont doordachte keuzes | 5% | diff --git a/Samenvattingen/Les13-Samenvatting.md b/Samenvattingen/Les13-Samenvatting.md index 28bbc58..2348318 100644 --- a/Samenvattingen/Les13-Samenvatting.md +++ b/Samenvattingen/Les13-Samenvatting.md @@ -1,4 +1,4 @@ -# Les 13: AI Agents & Custom GPTs +# Les 13: Prompt Engineering & Custom GPTs --- @@ -6,7 +6,7 @@ **Deel 4: Advanced AI Features** (Les 13-18) ## Beschrijving -Leer werken met AI agents en custom GPTs. Bouw je eigen gespecialiseerde AI assistenten en begrijp hoe agents autonome taken kunnen uitvoeren. +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. --- @@ -15,54 +15,51 @@ Leer werken met AI agents en custom GPTs. Bouw je eigen gespecialiseerde AI assi ### Groepsdiscussie (15 min) Bespreek klassikaal de Cursor reflecties uit Les 12 - welke features werken het beste voor welke taken? -### Wat zijn AI Agents? +### Advanced Prompt Engineering -**Definitie:** AI systemen die autonoom taken kunnen uitvoeren, niet alleen antwoorden geven. +**Recap van basis technieken (Les 4):** +- Zero-shot vs few-shot prompting +- Chain-of-thought reasoning +- Role prompting -**Verschil Chat vs Agent:** +**Nieuwe technieken:** -| Aspect | Chat | Agent | -|--------|------|-------| -| Gedrag | Beantwoordt vragen | Voert taken uit | -| Autonomie | Wacht op input | Kan zelf beslissingen nemen | -| Tools | Alleen tekst | Kan tools gebruiken | -| Voorbeeld | "Hoe maak ik X?" | "Maak X voor mij" | - ---- - -### Claude Projects - -**Wat is een Claude Project?** -- Verzameling van context specifiek voor één doel -- Blijft behouden over conversaties -- Kan bestanden bevatten - -**Wanneer gebruiken:** -- Terugkerend werk aan hetzelfde project -- Consistente coding style nodig -- Documentatie die AI moet kennen - -**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 - -**Voorbeeld Project Instructions:** +#### 1. Structured Output Prompting ``` -Je bent een expert React/Next.js developer. +Analyseer deze code en geef feedback in dit exacte format: -Technologie stack: -- Next.js 14 met App Router -- TypeScript strict mode -- Tailwind CSS -- Supabase voor backend +## Samenvatting +[1 zin over de code] -Coding conventions: -- Functional components met TypeScript -- Named exports (geen default exports) -- Error handling met try/catch -- Nederlandse comments in 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" ``` --- @@ -71,14 +68,14 @@ Coding conventions: **Wat zijn Custom GPTs?** Gespecialiseerde ChatGPT versies met: -- Specifieke instructies +- Specifieke instructies (personality, expertise) - Eigen kennis (uploaded files) - Optioneel: Actions (API calls) **Wanneer een Custom GPT maken:** - Repetitieve taken met dezelfde context - Specifieke expertise nodig -- Delen met anderen +- Delen met team of anderen **Custom GPT maken:** 1. Ga naar chat.openai.com/gpts @@ -103,57 +100,94 @@ Geef feedback in dit format: - ❌ Issue: [problemen die gefixed moeten worden] ``` ---- - -### Agent Capabilities - -**Wat kunnen agents:** -- Code schrijven en testen -- Files aanmaken en bewerken -- Terminal commands uitvoeren -- Web searches doen -- Meerdere stappen plannen - -**Cursor als Agent:** -- Composer mode plant en voert multi-file changes uit -- @ mentions geven context -- Tab completion voorspelt volgende stappen - -**Claude als Agent (met MCP):** -- Kan tools gebruiken -- Filesystem access -- Database queries -- External APIs - ---- - -### Best Practices voor Agent Instructies - -**Wees specifiek:** -``` -❌ "Help me met mijn project" -✅ "Review de auth logic in src/lib/auth.ts en check voor security issues" +**Voorbeeld: Project Assistant GPT** ``` +Instructions: +Je bent mijn persoonlijke development assistant voor [project naam]. -**Geef constraints:** -``` -❌ "Maak het beter" -✅ "Refactor naar max 50 regels, behoud dezelfde functionaliteit" -``` +Tech stack: +- Next.js 14 met App Router +- TypeScript strict mode +- Tailwind CSS +- Supabase voor backend -**Definieer output format:** -``` -Geef je antwoord in dit format: -1. Samenvatting (1 zin) -2. Gevonden issues (bullet points) -3. Voorgestelde fix (code) +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 ``` --- -### Prompt Templates +### Claude Projects -**Code Generation Template:** +**Wat is een Claude Project?** +- Verzameling van context specifiek voor één doel +- Blijft behouden over conversaties +- Kan bestanden bevatten als knowledge base + +**Wanneer gebruiken:** +- Terugkerend werk aan hetzelfde project +- Consistente coding style nodig +- Documentatie die AI moet kennen + +**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 + +**Voorbeeld Project Instructions:** +``` +Je bent een expert React/Next.js developer die mij helpt met [project]. + +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 +``` + +**Project Knowledge toevoegen:** +- Upload je belangrijkste files (schema, README, .cursorrules) +- Upload voorbeeldcode die je stijl toont +- Upload documentatie van libraries die je gebruikt + +--- + +### Custom GPTs vs Claude Projects + +| 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 | + +--- + +### Prompt Templates Library + +**Code Generation:** ``` Context: [beschrijf je project/stack] Taak: [wat moet er gemaakt worden] @@ -165,7 +199,7 @@ Constraints: Output: [gewenst format] ``` -**Debugging Template:** +**Debugging:** ``` Error message: [plak error] @@ -180,18 +214,43 @@ Wat er gebeurt: [actueel gedrag] ``` +**Code Review:** +``` +Review de volgende code op: +1. Best practices voor [framework] +2. Potentiële bugs +3. Performance issues +4. Security vulnerabilities + +[plak code] + +Geef feedback in format: ✅ Goed / ⚠️ Suggestie / ❌ Issue +``` + +**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] +``` + --- ## Tools -- ChatGPT Custom GPTs -- Claude Projects -- Cursor (Composer mode) +- ChatGPT (Custom GPTs) +- Claude (Projects) +- Prompt template documenten --- ## Lesopdracht (2 uur) -### Bouw Je Eigen AI Assistant +### Bouw Je Eigen AI Assistants **Deel 1: Claude Project (45 min)** @@ -220,7 +279,7 @@ Test dezelfde taak met beide: - Welke is beter voor welk doel? ### Deliverable -- Claude Project URL +- Claude Project URL of screenshot - Custom GPT (als je ChatGPT Plus hebt) of instructies doc - Vergelijkingsnotities @@ -279,9 +338,8 @@ Schrijf reflectie (300 woorden): ## Leerdoelen Na deze les kan de student: -- Het verschil uitleggen tussen chat en agent -- Een Claude Project aanmaken en configureren -- Een Custom GPT maken met specifieke instructies -- Effectieve agent instructies schrijven -- Prompt templates gebruiken voor consistente resultaten -- De juiste AI assistant kiezen per taak +- 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 diff --git a/Samenvattingen/Les17-Samenvatting.md b/Samenvattingen/Les17-Samenvatting.md index 97aab23..c8beb03 100644 --- a/Samenvattingen/Les17-Samenvatting.md +++ b/Samenvattingen/Les17-Samenvatting.md @@ -1,4 +1,4 @@ -# Les 17: Vercel AI SDK - AI Features in je App +# Les 17: Vercel AI SDK, Tool Calling & Agents --- @@ -6,7 +6,7 @@ **Deel 4: Advanced AI Features** (Les 13-18) ## Beschrijving -Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert. +Bouw AI-powered features in je apps met de Vercel AI SDK. Leer niet alleen chat interfaces bouwen, maar ook hoe AI externe data kan ophalen via Tool Calling en autonome taken kan uitvoeren als Agent. --- @@ -21,21 +21,22 @@ Bespreek klassikaal de Cursor .cursorrules ervaringen uit Les 16 - welke regels - Streaming handmatig implementeren - Error handling - State management +- Tool calling implementeren **De oplossing:** Vercel AI SDK -- Simpele React hooks +- Simpele React hooks (`useChat`, `useCompletion`) - Built-in streaming - Provider-agnostic (OpenAI, Anthropic, etc.) -- Edge-ready +- **Tool calling out-of-the-box** +- **Agent capabilities met `maxSteps`** --- ### Installatie & Setup ```bash -npm install ai @ai-sdk/openai -# of voor Anthropic: -npm install ai @ai-sdk/anthropic +npm install ai @ai-sdk/openai zod +# zod is nodig voor tool parameter validatie ``` **Environment variable:** @@ -46,9 +47,9 @@ OPENAI_API_KEY=sk-xxxxx --- -### Core Hooks +### Deel 1: Basic Chat (Herhaling) -#### useChat - Voor Conversaties +#### useChat Hook ```tsx 'use client' @@ -76,45 +77,16 @@ export function ChatComponent() { placeholder="Type a message..." className="w-full p-2 border rounded" /> - ) } ``` -#### useCompletion - Voor Single Completions +#### Basic API Route -```tsx -import { useCompletion } from 'ai/react' - -export function SummaryComponent() { - const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion() - - return ( -
-
-