# Les 2: AI Code Assistants en OpenCode

---

## Hoofdstuk
**Deel 1: AI Foundations** (Les 1-4)

## Beschrijving
Introductie tot OpenCode: een open-source AI coding assistant. Eerst de terminal versie (overweldigend maar krachtig), daarna de desktop app (gebruiksvriendelijker). Focus op keyboard shortcuts en Build vs Plan mode.

---

## Te Behandelen

### Groepsdiscussie (15 min)
Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI die jullie zien? Hoe voelde de schets-naar-website workflow?

---

### Wat is OpenCode?

- Open-source AI coding assistant (26.000+ GitHub stars)
- Werkt met meerdere AI providers: Groq (gratis), Ollama (lokaal), OpenAI, Anthropic
- Twee versies: **Terminal UI** en **Desktop App**
- Privacy-first: je code blijft lokaal tenzij je kiest voor cloud

---

### Demo: Terminal UI (10 min)

**Doel:** Laat zien hoe krachtig maar overweldigend de terminal versie is.

```bash
# Installatie
curl -fsSL https://opencode.ai/install | bash

# Of via npm
npm i -g opencode-ai@latest

# Start
opencode
```

**Laat zien:**
- TUI (Terminal User Interface) opent
- Veel keyboard shortcuts
- Krachtig maar... "dit ziet er complex uit, toch?"

---

### Demo: Desktop App (5 min)

**Doel:** Opluchting - "gelukkig is er ook dit!"

- Download van opencode.ai/download
- Zelfde features, vriendelijkere interface
- Keyboard shortcuts werken ook hier
- **Dit gaan we gebruiken in de les**

---

### Keyboard Shortcuts (10 min)

Deze werken in BEIDE versies:

| Shortcut | Actie |
|----------|-------|
| `Ctrl+K` | Command dialog (belangrijkste!) |
| `Ctrl+N` | Nieuwe sessie |
| `Ctrl+A` | Wissel tussen sessies |
| `Ctrl+O` | Model selectie |
| `Tab` | Wissel Build/Plan mode |
| `@` | File fuzzy search |
| `Ctrl+S` | Stuur bericht |
| `Esc` | Terug/annuleer |

**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken.

---

### Build vs Plan Mode (10 min)

OpenCode heeft twee "agents" - wissel met `Tab`:

| Mode | Icoon | Wat het doet |
|------|-------|--------------|
| **Build** | 🔨 | Volledige toegang - kan code schrijven, bestanden aanpassen, commands uitvoeren |
| **Plan** | 📋 | Read-only - analyseert code, maakt plannen, maar verandert niets |

**Workflow tip:**
1. Start in **Plan mode**: "Analyseer dit project en leg uit wat het doet"
2. Wissel naar **Build mode**: "Voeg nu een navbar toe"

---

### AI Modellen Instellen (10 min)

#### Optie 1: Groq (gratis cloud)
1. Ga naar console.groq.com
2. Maak account aan
3. Genereer API key
4. In OpenCode: `Ctrl+O` → Groq → Plak key

**Voordeel:** Snel, gratis, geen lokale setup
**Nadeel:** Code gaat naar cloud

#### Optie 2: Ollama (lokaal)
1. Download ollama.ai
2. `ollama pull llama3.2` (of ander model)
3. In OpenCode: `Ctrl+O` → Ollama

**Voordeel:** Privacy, geen internet nodig
**Nadeel:** Langzamer, gebruikt je hardware

---

### Wanneer AI Wel/Niet Vertrouwen (5 min)

**Wel vertrouwen:**
- Boilerplate code
- Bekende patterns (React components, API routes)
- Syntax die je vergeten bent

**Niet blind vertrouwen:**
- Security-gevoelige code
- Business logic
- Complexe algoritmes

**Altijd:** Lees en begrijp de code voordat je het accepteert!

---

## Tools
- OpenCode Desktop App
- Groq API (gratis)
- Ollama (optioneel, lokaal)

---

## Lesopdracht (2 uur)

### Deel 1: Setup (30 min)

1. Download en installeer OpenCode Desktop App
2. Maak Groq account aan en genereer API key
3. Configureer Groq in OpenCode (`Ctrl+O`)
4. **Optioneel:** Installeer Ollama en test lokaal model

### Deel 2: Interface Verkennen (30 min)

1. Open een bestaand project (of maak nieuwe folder)
2. Oefen keyboard shortcuts:
   - `Ctrl+K` → bekijk beschikbare commands
   - `@` → zoek een bestand
   - `Ctrl+N` → nieuwe sessie
   - `Tab` → wissel Build/Plan mode
3. Test Plan mode: "Analyseer dit project en beschrijf de structuur"

### Deel 3: Component Bouwen (60 min)

Bouw een responsive navbar met OpenCode:

**Stap 1 - Plan mode:**
```
Ik wil een responsive navbar bouwen met React en Tailwind.
Desktop: logo links, links midden, button rechts.
Mobile: hamburger menu.
Analyseer wat ik nodig heb.
```

**Stap 2 - Build mode:**
```
Bouw nu de navbar component zoals we besproken hebben.
```

**Vereisten:**
- Logo placeholder links
- 4 navigatie links
- CTA button rechts
- Mobile hamburger menu (werkend)
- Tailwind CSS styling

### Documentatie

Noteer tijdens het bouwen:
- Hoeveel prompts heb je gebruikt?
- Welke iteraties waren nodig?
- Wat werkte goed/niet?
- Build vs Plan mode - wanneer gebruikte je welke?

---

## Huiswerk (2 uur)

### React Opfrissen (optioneel, 30 min)

Als je merkt dat je React kennis is weggezakt:
- Bekijk React Fundamentals op EdHub
- Focus op: components, props, state, hooks
- Dit is essentieel voor de rest van de cursus!

### Component Library Bouwen (1.5 uur)

Bouw een landing page component library met OpenCode:

1. **Hero section** - grote headline, subtitle, CTA button, afbeelding
2. **Features section** - 3 cards met icons en beschrijving
3. **Testimonial card** - quote, naam, foto, bedrijf
4. **CTA section** - headline, beschrijving, button
5. **Footer** - links, social icons, copyright

**Vereisten:**
- Gebruik Plan mode voor elk component eerst
- Alles responsive met Tailwind CSS
- Test op mobile en desktop

### Blog Post (300 woorden)

Schrijf over je OpenCode ervaring:
- Hoe voelde de terminal vs desktop app?
- Build vs Plan mode - wanneer gebruik je welke?
- Groq vs Ollama - welke koos je en waarom?
- Keyboard shortcuts - welke zijn het handigst?
- Zou je OpenCode blijven gebruiken?

### Bonus

Probeer de terminal versie als je alleen desktop hebt gebruikt (of andersom).

---

## Leerdoelen

Na deze les kan de student:
- OpenCode installeren en configureren (desktop en terminal)
- Groq en/of Ollama als AI provider instellen
- Keyboard shortcuts gebruiken voor efficiënt werken
- Build vs Plan mode inzetten voor verschillende taken
- De `@` file search gebruiken om context te geven
- Components bouwen met AI assistance
- Kritisch beoordelen wanneer AI output te vertrouwen is