# Les 2: OpenCode — AI Code Assistants (Klas B) > **Deel 1: AI Foundations** (Les 1–4) > **Totale slides:** 23 > **Lesvorm:** online — Tim deelt scherm met slides + code, leest letterlijk voor uit docenttekst --- ## Blok-structuur | Blok | Onderwerp | Slides | |------|-----------|--------| | 1 | Welkom & Terugblik | 1–4 | | 2 | AI-CLI landschap (NIEUW) | 5–7 | | 3 | Introductie OpenCode | 8–14 | | 4 | LIVE DEMO — scroll-landingpage | 15–18 | | 5 | Git & Vercel Workflow | 19–20 | | 6 | Hands-on Opdracht | 21 | | – | ☕ PAUZE | – | | 7 | Afsluiting | 22–23 | --- ## BLOK 1: WELKOM & TERUGBLIK ### Slide 1: Welkomstslide **Titel:** Les 2 — OpenCode: AI Code Assistants **Subtitle:** Lokaal werken met een AI-pair --- ### Slide 2: Planning vandaag | Blok | Onderwerp | |------|-----------| | 1 | Welkom + Nieuwe manier van werken | | 2 | AI-CLI landschap: Claude Code, Codex, OpenCode | | 3 | Introductie OpenCode | | 4 | **LIVE DEMO** — scroll-storytelling landing page | | 5 | Git push → Vercel auto-deploy | | – | Pauze ☕ | | 6 | Hands-on | | 7 | Resultaten + afsluiting | --- ### Slide 3: Een nieuwe manier van werken **Wat we niet meer doen:** - Browser-gebaseerde tools zoals v0.dev (waar je copy/paste tussen browser en editor) - Eén AI-chat-venster zonder zicht op je echte project **Wat we vandaag doen:** - Lokaal werken in een echt project - AI direct in je editor — geen copy/paste - Lokale dev-server zien wijzigingen meteen - Volledige controle over wat de AI doet (Plan → Build → Accept per file) **Browser AI tools** zoals v0.dev blijven nuttig voor snelle UI-experimenten. Maar voor echt bouwen: lokaal + AI-pair. --- ### Slide 4: Vandaag — De volgende stap **Drie dingen vandaag:** 1. We kijken naar het **AI-coding-CLI landschap**: Claude Code, Codex, OpenCode 2. We bouwen LIVE een **scroll-storytelling landing page** vanuit een starter-zip — met Lenis + GSAP en vol micro-animaties 3. We zetten alles online: git init → nieuwe GitHub repo → nieuw Vercel project → live op het internet Aan het einde heb je iets dat er écht uitziet, gepubliceerd via je eigen repo en eigen Vercel project. En je weet welke AI-coding tools er zijn en wanneer je welke kiest. --- ## BLOK 2: AI-CLI LANDSCHAP (NIEUW) ### Slide 5: Drie spelers op de markt **Het AI-coding-CLI landschap medio 2026:** | Tool | Maker | Karakter | |------|-------|----------| | **Claude Code** | Anthropic | Opinionated, safety-first, beste raw capability | | **Codex** | OpenAI | Autonoom, token-efficiënt, minder safety-rails | | **OpenCode** | Open-source community | Open, BYO-model, mooiste TUI, prachtige DX | **Wat ze gemeen hebben:** allemaal terminal-based agents die in je repo werken — geen IDE nodig. **Wat ze onderscheidt:** filosofie, prijsmodel, model-keuze, autonomie. > Bron: NeuralNine, "Claude Code VS Codex VS OpenCode" (2026) --- ### Slide 6: Vergelijking op 7 assen | As | Claude Code | Codex | OpenCode | |----|-------------|-------|----------| | Safety / approval flow | ⭐ vraagt altijd toestemming | autonoom, weinig checks | configureerbaar | | TUI / aesthetics | functioneel | functioneel | ⭐ mooiste | | Model-flexibiliteit | alleen Anthropic | alleen OpenAI | ⭐ elke provider + lokaal | | Undo / rewind / voice | ⭐ alle drie aanwezig | geen undo | rewind aanwezig | | Token-efficiency | hoog verbruik | ⭐ zuinigste | hangt af van model | | Usage-transparantie | ⭐ zichtbaar per call | minder transparant | hangt af van model | | Open-source | nee | nee | ⭐ ja, MIT | **Praktijk-benchmark uit de video:** alle drie bouwen een werkende Sudoku-game. Claude Code en Codex en OpenCode-met-GPT zijn vergelijkbaar. OpenCode op gratis open-source modellen (Kimi K2.5, DeepSeek) is duidelijk minder, maar wél gratis. --- ### Slide 7: Waarom OpenCode in deze cursus? **Vier redenen:** 1. **Gratis te beginnen** — Kimi K2.5 Free of lokale modellen. Geen creditcard. 2. **Open-source** — je leert hoe deze tools van binnen werken. 3. **BYO-model** — later switchen naar Claude of GPT = 30 seconden werk. 4. **Beste TUI** — een interface die niet in de weg zit. **Eindconclusie uit de video:** *"OpenCode is filosofisch mijn favoriet. Voor zwaar engineering-werk pak ik Claude Code met Opus."* **Vertaling:** start vandaag met OpenCode + Kimi. Schakel later naar Claude Code als jullie werkgever betaalt. --- ## BLOK 3: INTRODUCTIE OPENCODE ### Slide 8: Wat is OpenCode? - Open-source AI coding agent (60.000+ GitHub stars) - Werkt met **elke** AI: OpenCode Zen, Groq, Ollama, OpenAI, Anthropic - Terminal-versie én Desktop App met ingebouwde terminal - Privacy-first: jouw code blijft op jouw machine **Vandaag gebruiken we:** Desktop App + Kimi K2.5 Free (zero cost). --- ### Slide 9: Installatie **Terminal-versie:** ```bash npm i -g opencode-ai@latest ``` **Desktop App (aanbevolen vandaag):** - Download: **opencode.ai/download** - Installeer voor Mac of Windows **Gratis AI model instellen:** - `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free** --- ### Slide 10: Plan vs Build mode | Mode | Icoon | Wat het doet | |------|-------|--------------| | **Plan** | 📋 | Analyseert je codebase, verandert **niets** | | **Build** | 🔨 | Schrijft code, maakt bestanden aan | **Wisselen:** `Tab` **Tip:** Eén prompt = één taak. - ❌ "Maak een complete website met header, hero en footer" - ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer" Kleinere prompts = betere output + makkelijker reviewen. --- ### Slide 11: Keyboard shortcuts | Shortcut | Actie | |----------|-------| | `Ctrl+P` | Command menu | | `Tab` | Wissel Build/Plan | | `@` | Zoek bestanden in je repo | | `@explore` | Codebase verkennen (read-only subagent) | | `Ctrl+X M` | Switch model | --- ### Slide 12: `@explore` — codebase verkennen **Wat:** read-only subagent die door je code leest zonder iets te wijzigen. **Voorbeelden:** ``` @explore find all authentication code @explore how does the routing work? @explore where are the API endpoints? ``` **Wanneer:** nieuwe codebase leren kennen, vóór een refactor, code zoeken zonder grep. --- ### Slide 13: De deployment-workflow (from scratch) ``` 1. Wijzig code met OpenCode 2. git init + commit lokaal 3. GitHub: nieuwe lege repo aanmaken 4. git remote add + git push 5. Vercel: nieuw project → Import repo → Deploy 6. Volgende keren: git push → Vercel auto-deploys ``` We doen vandaag de **complete setup**: van lege starter naar live URL. Geen bestaand project nodig. --- ### Slide 14: Optioneel — andere modellen **Wil je later wisselen?** - **OpenAI (GPT-4):** platform.openai.com → API Keys → kopieer key → `Ctrl+X M` → OpenAI → plak - **Anthropic (Claude):** console.anthropic.com → idem - **Lokaal (Ollama):** `ollama pull llama4` → `Ctrl+X M` → Ollama **Let op:** OpenAI en Claude zijn betaald. Kimi K2.5 Free is gratis maar minder krachtig. --- ## BLOK 4: LIVE DEMO — scroll-storytelling landing page ### Slide 15: Wat we live bouwen **Project:** een AI-startup landing page van een fictieve naam — bijv. *"Polderwave"*. **Eindresultaat krijgt:** - Smooth scroll over de hele pagina (Lenis) - Hero met grote naam die op scroll schaalt - Features sectie met staggered fade-in (GSAP ScrollTrigger) - Sticky horizontal scroll-sectie met 4 "panels" (storytelling) - Parallax-blobs op de achtergrond - Micro-interacties: hover-scale, color transitions **Werkwijze:** vijf prompts → 5 fade-ins → één klikbare productie-deploy. --- ### Slide 16: Demo Overzicht (blijft op scherm) ``` ┌──────────────────────────────────────────────────────────────┐ │ STAP 1: STARTER UITPAKKEN │ │ ────────────────────────────────────────────────────────── │ │ Unzip opencode-ui-starter.zip │ │ cd opencode-ui-starter │ │ npm install │ │ npm run dev │ │ → localhost:3000 │ ├──────────────────────────────────────────────────────────────┤ │ STAP 2: OPENCODE DESKTOP APP OPENEN │ │ ────────────────────────────────────────────────────────── │ │ File → Open Folder → opencode-ui-starter │ │ Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │ ├──────────────────────────────────────────────────────────────┤ │ STAP 3: PROMPT 1 — Smooth scroll + Hero │ │ STAP 4: PROMPT 2 — Features sectie + staggered reveals │ │ STAP 5: PROMPT 3 — Sticky horizontal storytelling │ │ STAP 6: PROMPT 4 — Parallax-blobs │ │ STAP 7: PROMPT 5 — Micro-interactions (hover, CTA) │ ├──────────────────────────────────────────────────────────────┤ │ STAP 8: GIT PUSH → VERCEL AUTO-DEPLOY │ └──────────────────────────────────────────────────────────────┘ ``` --- ### Slide 17: De 5 prompts (blijft op scherm tijdens demo) > **Prompt 1 — Smooth scroll + Hero** > Installeer `lenis` en `gsap`. Maak in `app/page.tsx` een hero-sectie met als titel "POLDERWAVE" in extreem groot serif font. Centreer alles, donkere achtergrond, cream tekst. Initialiseer Lenis voor smooth scroll over de hele pagina via een client component wrapper. > **Prompt 2 — Features sectie** > Voeg onder de hero een features sectie toe met 4 cards: "AI-powered", "Privacy-first", "Open-source", "Built for speed". Elk met een korte beschrijving. Op scroll: stagger fade-in van onder via GSAP ScrollTrigger. Tailwind grid 2 kolommen, op mobile 1. > **Prompt 3 — Sticky horizontal storytelling** > Voeg een sticky sectie toe met 4 horizontale panels die op scroll van rechts naar links bewegen. Gebruik GSAP ScrollTrigger pin + horizontal translate. Elk panel toont een stap: "1. Idea", "2. Prompt", "3. Build", "4. Ship". Grote nummers, korte tekst. > **Prompt 4 — Parallax-blobs** > Voeg drie kleurrijke blob-cirkels toe als parallax-achtergrond — een blauwe, een roze, een gele. Ze bewegen met verschillende snelheden mee op scroll (y-translate per scroll-progress). Blur-filter erop voor zachte gloed. > **Prompt 5 — Micro-interactions** > Voeg onderaan een sticky CTA-knop toe met tekst "Get early access". Op hover: schaal naar 1.05, kleur-transition van pink naar yellow. Voeg ook hover-scale toe op de features-cards. --- ### Slide 18: Tijdens de demo — wat te uitleggen **Sleutelmomenten om hardop te benoemen:** - Plan-mode eerst (📋) — laat OpenCode een plan terugschrijven voor we Build doen - Tab → Build (🔨) — bevestig de diff per file, kijk wat de AI doet - Refresh browser tussen prompts — zie de progressie - Eén prompt = één commit = één deploy moment **Als iets misgaat:** - Build-error? Plak de error in OpenCode, vraag om fix - Animatie schokkerig? Vraag: "maak deze animatie smoother met ease-out" - Layout breekt op mobile? Vraag: "fix de mobile layout voor de features sectie" --- ## BLOK 5: GIT & VERCEL WORKFLOW ### Slide 19: Live online zetten — van lokale repo naar Vercel **Stap 1: lokaal init + commit (in Desktop App terminal):** ```bash git init git add . git commit -m "Initial Polderwave" git branch -M main ``` **Stap 2: nieuwe GitHub repo aanmaken** (github.com → New → `polderwave` → Public → Create). **Stap 3: remote toevoegen + push:** ```bash git remote add origin https://github.com/JOUWNAAM/polderwave.git git push -u origin main ``` **Stap 4: Vercel nieuw leeg project** (vercel.com → Add New → Project → Import GitHub repo `polderwave` → Deploy). Wacht ongeveer een minuut → live URL. **Vanaf dat moment:** `git push` = automatische re-deploy. --- ### Slide 20: Preview deployments **Branches = preview URLs** ``` main branch → polderwave.vercel.app feature/parallax → polderwave-git-feature-parallax.vercel.app ``` **Waarom handig:** - Test wijzigingen zonder productie te breken - Deel preview link met team of klant - Automatisch bij elke branch-push **Demo:** ```bash git checkout -b feature/extra-blob # wijziging maken via OpenCode git add . && git commit -m "Extra parallax blob" git push -u origin feature/extra-blob ``` → Check Vercel: nieuwe preview deployment verschijnt. --- ## BLOK 6: HANDS-ON OPDRACHT ### Slide 21: Aan de slag! (blijft op scherm) ``` ┌──────────────────────────────────────────────────────────────┐ │ STAP 1: STARTER UITPAKKEN │ │ ────────────────────────────────────────────────────────── │ │ Unzip opencode-ui-starter.zip uit lesbestanden │ │ npm install + npm run dev │ ├──────────────────────────────────────────────────────────────┤ │ STAP 2: OPENCODE OPENEN │ │ ────────────────────────────────────────────────────────── │ │ Desktop App → Open Folder → je project │ │ Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │ ├──────────────────────────────────────────────────────────────┤ │ STAP 3: BOUW MINSTENS 3 VAN DE 5 DEMO-PROMPTS NA │ │ ────────────────────────────────────────────────────────── │ │ □ Smooth scroll + Hero │ │ □ Features sectie │ │ □ Sticky horizontal panels │ │ □ Parallax-blobs │ │ □ Micro-interactions │ │ 💡 Of bedenk eigen variant — zelfde stack (Lenis + GSAP) │ ├──────────────────────────────────────────────────────────────┤ │ STAP 4: ONLINE ZETTEN (FROM SCRATCH) │ │ ────────────────────────────────────────────────────────── │ │ git init && git add . && git commit -m "Initial" │ │ github.com → New repo (leeg) │ │ git remote add origin && git push -u origin main │ │ vercel.com → Add New → Import repo → Deploy │ │ │ │ Daarna: git push = automatische re-deploy │ └──────────────────────────────────────────────────────────────┘ ``` **Doel:** minimaal 2x deployen | ☕ **Pauze:** halverwege --- ## BLOK 7: AFSLUITING ### Slide 22: Samenvatting + Huiswerk **Vandaag gezien:** - Het CLI-landschap: Claude Code, Codex, OpenCode - Plan vs Build mode + `@explore` - Live demo: scroll-storytelling landing page met Lenis + GSAP - Git push → Vercel auto-deploy + preview per branch **Huiswerk:** 1. Bouw je eigen scroll-landing page (eigen merknaam, eigen kleurpalet) 2. Minimaal 3 van de 5 demo-features 3. Bonus: voeg één eigen animatie toe (dark mode, cursor-trail, etc.) 4. Inleveren: link naar Vercel + link naar GitHub in Teams --- ### Slide 23: Volgende les **Les 3 — Cursor Setup & Basics** - VSCode-achtige IDE met AI ingebouwd - Tab autocomplete, Composer, Chat - Debug-challenges live oplossen - Cursor rules OpenCode is laagdrempelig en open. Cursor is professioneler en heeft meer agentic features. Beide zijn waardevol op verschillende momenten. Tot volgende week!