17 KiB
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:
- We kijken naar het AI-coding-CLI landschap: Claude Code, Codex, OpenCode
- We bouwen LIVE een scroll-storytelling landing page vanuit een starter-zip — met Lenis + GSAP en vol micro-animaties
- 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:
- Gratis te beginnen — Kimi K2.5 Free of lokale modellen. Geen creditcard.
- Open-source — je leert hoe deze tools van binnen werken.
- BYO-model — later switchen naar Claude of GPT = 30 seconden werk.
- 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:
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
lenisengsap. Maak inapp/page.tsxeen 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):
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:
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:
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 <repo-url> && 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:
- Bouw je eigen scroll-landing page (eigen merknaam, eigen kleurpalet)
- Minimaal 3 van de 5 demo-features
- Bonus: voeg één eigen animatie toe (dark mode, cursor-trail, etc.)
- 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!