# Les 2: OpenCode - AI Code Assistants > **Deel 1: AI Foundations** (Les 1-4) > **Totale slides:** 20 > **Lesduur:** 3 uur (180 minuten) > **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min --- ## Slide-structuur per blok | Blok | Onderwerp | Slides | Tijd | |------|-----------|--------|------| | 1 | Welkom & Terugblik | 1-4 | 10 min | | 2 | Introductie OpenCode | 5-11 | 10 min | | 3 | Setup & Demo | 12 | 20 min | | 4 | Git & Vercel Workflow | 13-15 | 10 min | | 5 | Hands-on Opdracht | 16 | 85 min | | - | **☕ PAUZE** | - | 15 min | | 6 | Afsluiting | 17-20 | 30 min | --- ## BLOK 1: WELKOM & TERUGBLIK (10 minuten) ### Slide 1: Welkomstslide **Titel:** Les 2: OpenCode - AI Code Assistants --- ### Slide 2: Planning vandaag | Tijd | Onderwerp | |------|-----------| | 09:00-09:20 | Terugblik + Intro OpenCode | | 09:20-09:50 | Setup + Demo's | | 09:50-10:15 | Hands-on: Start | | 10:15-10:30 | ☕ **PAUZE** | | 10:30-11:30 | Hands-on: Vervolg | | 11:30-12:00 | Resultaten + Afsluiting | --- ### Slide 3: Terugblik Les 1 - Wat hebben we? **Jullie hebben:** - ✅ Een werkende website op Vercel - ✅ Code in een GitHub repository - ✅ Ervaring met v0.dev **Maar:** - Veel copy/paste naar v0 - Geen lokale development - Beperkte controle --- ### Slide 4: Vandaag - De volgende stap **OpenCode:** AI direct in je development workflow - ✅ Werk met je bestaande repository - ✅ Draai lokaal, zie wijzigingen direct - ✅ Push naar GitHub → automatisch live op Vercel --- ## BLOK 2: INTRODUCTIE OPENCODE (10 minuten) ### Slide 5: Wat is OpenCode? - 🌟 Open source (60.000+ GitHub stars) - 🔌 Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI** - 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!) - 🔒 Privacy-first **Vandaag:** Desktop App + gratis model (Kimi K2.5 Free) --- ### Slide 6: Installatie **Terminal versie:** ```bash npm i -g opencode-ai@latest ``` **Desktop App:** - Download: **opencode.ai/download** - Installeer voor jouw OS (Mac/Windows) **Gratis AI Model:** - `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free** --- ### Slide 7: Build vs Plan Mode | Mode | Icoon | Wat het doet | |------|-------|--------------| | **Plan** | 📋 | Analyseert, verandert NIETS | | **Build** | 🔨 | Schrijft code, maakt bestanden | **Wisselen:** `Tab` **💡 Tip: Eén prompt per taak!** - ❌ "Maak een complete website met header, hero en footer" - ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer" --- ### Slide 8: Keyboard Shortcuts | Shortcut | Actie | |----------|-------| | `Ctrl+P` | Command menu | | `Tab` | Wissel Build/Plan | | `@` | Zoek bestanden | | `@explore` | Codebase verkennen (read-only) | --- ### Slide 9: @explore - Codebase Verkennen **Wat is @explore?** - Een **read-only** subagent voor het verkennen van je codebase - Zoekt bestanden, vindt keywords, analyseert structuur - Maakt **geen wijzigingen** aan je code **Gebruik:** ``` @explore find all authentication code @explore how does the routing work? @explore where are the API endpoints? ``` **Wanneer gebruiken?** - Nieuwe codebase leren kennen - Code zoeken voordat je wijzigt - Project structuur begrijpen --- ### Slide 10: De Deployment Workflow ``` 1. Wijzig code met OpenCode 2. git add . 3. git commit -m "Add about page" 4. git push 5. ✨ Vercel deployt automatisch! ``` Jullie Vercel project is al gekoppeld aan GitHub. --- ### Slide 11: Optioneel - OpenAI API Key **Wil je GPT-4 gebruiken?** 1. Ga naar **platform.openai.com** 2. Maak account aan (of log in) 3. API Keys → Create new secret key 4. Kopieer de key (begint met `sk-...`) 5. In OpenCode: `Ctrl+X M` → OpenAI → Plak key **Let op:** OpenAI is betaald (~$0.01 per prompt) **Tip:** Start met Kimi K2.5 Free, upgrade later als je wilt! --- ## BLOK 3: SETUP & DEMO (20 minuten) ### Slide 12: Live Demo Overzicht (blijft op scherm) ``` ┌─────────────────────────────────────────────────────┐ │ DEMO 1: TERMINAL VERSIE (5 min) │ │ ───────────────────────────────────────────────── │ │ npm i -g opencode-ai@latest && opencode │ │ → Toon: Ctrl+P, Tab, @, Ctrl+X M │ │ → "Krachtig, maar we gebruiken Desktop App..." │ ├─────────────────────────────────────────────────────┤ │ DEMO 2: DESKTOP APP SETUP (5 min) │ │ ───────────────────────────────────────────────── │ │ 1. Open Desktop App │ │ 2. File → Open Folder → v0 project │ │ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │ │ 4. Terminal: npm install && npm run dev │ ├─────────────────────────────────────────────────────┤ │ DEMO 3: PLAN MODE (5 min) │ │ ───────────────────────────────────────────────── │ │ 📋 "Analyseer dit project. Hoe werkt de routing?" │ │ → AI leest alleen, verandert niets │ ├─────────────────────────────────────────────────────┤ │ DEMO 4: BUILD MODE (5 min) │ │ ───────────────────────────────────────────────── │ │ Tab → 🔨 │ │ "Maak nieuwe pagina /about met hero" │ │ → Review code → Accept → Refresh browser │ └─────────────────────────────────────────────────────┘ ``` --- ## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten) ### Slide 13: Demo - Git Push **Live demo (in Desktop App terminal):** ```bash git add . git commit -m "Add about page" git push ``` Of gebruik GitHub Desktop! --- ### Slide 14: Demo - Vercel Auto-Deploy **Live demo:** 1. Open Vercel dashboard 2. Zie: "Building..." 3. Na ~1 minuut: live op je URL! **Tip:** Vercel toont ook preview voor branches --- ### Slide 15: Nieuw project naar Vercel (voor huiswerk) **Stappen voor een nieuw project:** 1. Maak GitHub repository (github.com → New) 2. Push je code naar GitHub 3. Vercel: "Add New Project" 4. "Import Git Repository" 5. Selecteer je repo → Deploy **Dit heb je nodig voor het huiswerk!** --- ## BLOK 5: HANDS-ON OPDRACHT (85 minuten) ### Slide 16: Aan de slag! (blijft op scherm) ``` ┌─────────────────────────────────────────────────────┐ │ STAP 1: PROJECT KLAARZETTEN │ │ ───────────────────────────────────────────────── │ │ git clone https://github.com/[user]/[repo].git │ │ cd [repo] │ │ npm install │ │ npm run dev │ │ → Open http://localhost:3000 │ ├─────────────────────────────────────────────────────┤ │ STAP 2: OPENCODE DESKTOP APP │ │ ───────────────────────────────────────────────── │ │ 1. Open Desktop App │ │ 2. File → Open Folder → je project │ │ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │ ├─────────────────────────────────────────────────────┤ │ STAP 3: BOUW MET OPENCODE │ │ ───────────────────────────────────────────────── │ │ □ Maak nieuwe pagina (/about, /services, /contact) │ │ □ Voeg 2 componenten toe │ │ □ Voeg link op homepage │ │ 💡 Eén prompt per taak! │ ├─────────────────────────────────────────────────────┤ │ STAP 4: DEPLOY │ │ ───────────────────────────────────────────────── │ │ git add . │ │ git commit -m "Add about page" │ │ git push │ │ → Check Vercel dashboard │ └─────────────────────────────────────────────────────┘ ``` **Doel:** Minimaal 2x deployen | ☕ **Pauze:** 10:15-10:30 --- ## BLOK 6: AFSLUITING (30 minuten) ### Slide 17: Resultaten delen - Wie wil laten zien? - Wat heb je toegevoegd? - Hoeveel keer gepusht? --- ### Slide 18: Samenvatting - ✅ OpenCode: open-source AI assistant - ✅ Gratis model: Kimi K2.5 Free - ✅ Optioneel: OpenAI met API key - ✅ Plan vs Build mode - ✅ @explore voor codebase verkennen - ✅ Git push → Vercel auto-deploy --- ### Slide 19: Huiswerk **Opdracht: Nieuw project vanaf scratch** 1. `npx create-next-app@latest` 2. Bouw 3 componenten met OpenCode 3. Push naar GitHub 4. Vercel: Import Project → Deploy **Inleveren via Teams:** - Link naar Vercel - Link naar GitHub **In Les 3:** We gaan iedereen langs en bespreken je prompts! **Stappen voor Vercel: zie slide 15!** --- ### Slide 20: Volgende les **Les 3:** OpenCode IDE Integratie - VSCode plugin - Inline code generatie - Advanced prompting Tot volgende week!