# Les 10: AI Tool Selection & Workflows

---

## Hoofdstuk
**Deel 3: AI Tooling & Prototyping** (Les 10-12)

## Beschrijving
Leer de sterke en zwakke punten van elke AI tool kennen. Ontwikkel een framework om de juiste tool te kiezen voor de juiste taak en bouw je eigen workflow.

---

## Te Behandelen

### Waarom Tool Selection Belangrijk Is

Je kent nu meerdere AI tools:
- ChatGPT (brainstormen, planning, uitleg)
- Claude (lange context, nuance, analyse)
- v0.dev (UI prototyping)
- OpenCode (code schrijven met project context)

**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.

---

### Tool Vergelijking

| Tool | Sterk in | Minder sterk in | Kosten |
|------|----------|-----------------|--------|
| **ChatGPT** | Brainstormen, uitleg, planning, algemene kennis | Grote codebases, lange context | Gratis / Pro €20/maand |
| **Claude** | Lange documenten, nuance, analyse, veiligheid | Soms te voorzichtig, geen images genereren | Gratis / Pro $20/maand |
| **v0.dev** | UI components, snel prototypen, Tailwind | Complexe logica, backend | Gratis tier |
| **OpenCode** | Code schrijven, project context, terminal | Geen web access, geen images | Gratis |

---

### Tool Selection Framework

**Stap 1: Identificeer de taak**
- Wat wil je bereiken?
- Hoe complex is het?
- Hoeveel context is nodig?

**Stap 2: Kies de juiste tool**

```
Als je wilt...                        Gebruik...
─────────────────────────────────────────────────
Brainstormen over een idee            → ChatGPT
Een lange codebase analyseren         → Claude
Snel een UI component maken           → v0.dev
Code schrijven met project context    → OpenCode
Een complex document begrijpen        → Claude
Uitleg krijgen over een concept       → ChatGPT
React component met styling           → v0.dev
Feature implementeren in project      → OpenCode
```

---

### Workflow Patterns

**Pattern 1: Planning → Prototyping → Implementation**
```
1. ChatGPT: Brainstorm features, maak planning
2. v0.dev: Genereer UI prototypes
3. OpenCode: Implementeer met project context
```

**Pattern 2: Research → Design → Build**
```
1. ChatGPT/Claude: Research beste aanpak
2. v0.dev: Design components
3. OpenCode: Bouw en integreer
```

**Pattern 3: Quick Iteration**
```
1. v0.dev: Snel component genereren
2. OpenCode: Aanpassen en integreren
3. Repeat
```

---

### Praktijk: Dezelfde Taak, Drie Tools

**Opdracht:** Bouw een Contact Form component

**Met ChatGPT:**
```
Prompt: Ik wil een contact form maken met React en Tailwind.
Velden: naam, email, bericht. Validatie nodig.
Geef me de code en leg uit hoe het werkt.
```
→ Krijg: Uitleg + code, maar zonder project context

**Met v0.dev:**
```
Prompt: Modern contact form with name, email, message fields.
Tailwind styling, validation, responsive design.
```
→ Krijg: Visueel prototype, direct te gebruiken

**Met OpenCode:**
```
Prompt: Maak een ContactForm component in src/components/
met naam, email en bericht velden. Gebruik onze bestaande
Input en Button components. Voeg Zod validatie toe.
```
→ Krijg: Geïntegreerde code die past in je project

---

### Wanneer Combineer Je Tools?

**Scenario 1: Nieuwe feature bouwen**
1. ChatGPT: "Hoe zou je een dark mode toggle implementeren in React?"
2. v0.dev: "Dark mode toggle component with smooth transition"
3. OpenCode: "Integreer deze toggle in onze navbar, sla preference op in localStorage"

**Scenario 2: Bug oplossen**
1. OpenCode: Vraag om bug te identificeren
2. Claude: Als de foutmelding complex is, vraag om uitleg
3. OpenCode: Implementeer de fix

**Scenario 3: Nieuwe technologie leren**
1. ChatGPT: "Leg uit hoe React Server Components werken"
2. v0.dev: "Example of React Server Component with data fetching"
3. OpenCode: "Help me dit toe te passen in mijn Next.js project"

---

### Anti-Patterns (Wat Niet Te Doen)

**❌ Verkeerde tool voor de taak:**
- ChatGPT vragen om een hele app te bouwen → te weinig context
- v0.dev vragen om complexe backend logica → niet zijn sterke punt
- OpenCode vragen om design inspiratie → kan geen images maken

**❌ Heen en weer kopiëren zonder begrip:**
- Kopieer niet blind code van ChatGPT naar je project
- Begrijp eerst WAT de code doet

**❌ Dezelfde prompt in elke tool:**
- Pas je prompt aan per tool
- v0.dev wil visuele beschrijvingen
- OpenCode wil project-specifieke context

---

## Tools
- ChatGPT
- Claude
- v0.dev
- OpenCode/WebStorm

---

## Lesopdracht (2 uur)

### Tool Comparison Challenge

**Deel 1: Dezelfde Taak, Drie Tools (1 uur)**

Bouw een "Contact Form" component met alle drie de tools:

1. **ChatGPT (20 min)**
   - Vraag om code + uitleg
   - Noteer: hoe lang duurde het, kwaliteit output, wat miste?

2. **v0.dev (20 min)**
   - Genereer visueel prototype
   - Noteer: hoe snel, hoe mooi, hoe aanpasbaar?

3. **OpenCode (20 min)**
   - Integreer in bestaand project
   - Noteer: hoe goed past het, hoeveel aanpassing nodig?

**Deel 2: Analyse (30 min)**

Vul dit schema in:

| Aspect | ChatGPT | v0.dev | OpenCode |
|--------|---------|--------|----------|
| Tijd tot werkend component | | | |
| Kwaliteit code | | | |
| Visueel design | | | |
| Past in project | | | |
| Hoeveel aanpassing nodig | | | |
| Totaalscore (1-10) | | | |

**Deel 3: Workflow Documentatie (30 min)**

- Maak `docs/WORKFLOW.md` in je project
- Documenteer je ideale workflow per taaktype
- Inclusief template prompts voor elke tool

### Deliverable
- Screenshot van alle 3 contact forms
- Ingevuld vergelijkingsschema
- `docs/WORKFLOW.md` bestand

---

## Huiswerk (2 uur)

### Bouw Je Tool Selection Cheat Sheet

**Deel 1: Cheat Sheet Maken (1 uur)**

Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):

```markdown
# Mijn AI Tool Cheat Sheet

## Wanneer gebruik ik wat?

### ChatGPT
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]

### Claude
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]

### v0.dev
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]

### OpenCode
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]
```

**Deel 2: Testen op Nieuwe Taken (45 min)**

Test je cheat sheet op 2 nieuwe taken:
1. Bouw een "Testimonial Card" component
2. Voeg een "Dark Mode Toggle" toe

Per taak: kies tools op basis van cheat sheet, voer uit, update cheat sheet.

**Deel 3: Reflectie (15 min)**

Schrijf korte reflectie (400 woorden):
- Welke tool is jouw favoriet en waarom?
- Wanneer combineer je tools?
- Wat ga je anders doen na deze les?

### Deliverable
- Tool Selection Cheat Sheet (1 pagina)
- 2 gebouwde components
- Reflectie (400 woorden)

---

## Leerdoelen
Na deze les kan de student:
- De sterke en zwakke punten van elke AI tool benoemen
- De juiste tool kiezen voor een specifieke taak
- Meerdere tools combineren in een effectieve workflow
- Een persoonlijke workflow documenteren
- Template prompts schrijven per tool
- Kritisch evalueren welke tool wanneer het beste werkt