Modul 2 – Werkzeug einrichten
🏠 Kursübersicht · Modul 2 von 8
🎯 Lernziele
Nach diesem Modul kannst du …
- entscheiden, welcher Weg (Browser, online oder offline) zu dir passt,
- dein KI-Werkzeug installieren und starten,
- prüfen, ob alles funktioniert.
⏱️ Zeit: ca. 30 Minuten · Voraussetzungen: Modul 1, ein Laptop/PC mit Internet
Drei Wege – du brauchst nur einen
Es gibt nicht das eine Vibe-Coding-Werkzeug. Wähle den Weg, der zu dir passt:
| Weg | Was? | Installation? | Internet? | Gut für |
|---|---|---|---|---|
| Weg 0 | Chat-KI im Browser | keine | ja | sofort starten, jüngere Lernende |
| Weg A | opencode + DeepSeek V4 (Cloud) | etwas | ja | der empfohlene Hauptweg |
| Weg B | opencode + Ollama (lokal) | mehr | nein | Offline, Datenschutz |
💡 Tipp: Wenn du unsicher bist, starte mit Weg 0. Du kannst jederzeit später auf Weg A umsteigen, wenn du „richtige” Projektdateien bearbeiten willst.
Weg 0 – Ohne Installation (Chat-KI im Browser)
Der niedrigschwelligste Einstieg. Du brauchst nur einen Browser und einen kostenlosen Zugang zu einer Chat-KI:
- ChatGPT – https://chat.openai.com (ab 13 Jahren, mit Elternzustimmung)
- Claude – https://claude.ai (ab 18 Jahren)
- Gemini – https://gemini.google.com
So gehst du vor:
- Im Chat beschreibst du dein Projekt (siehe die Prompt-Vorlage).
- Die KI gibt dir den Code – meist eine oder mehrere Dateien.
- Du kopierst den Code in eine Datei auf deinem Rechner (z. B.
index.html) und öffnest sie. Für Webseiten kannst du den Code auch direkt in https://codepen.io oder https://playcode.io einfügen und sofort sehen. - Klappt etwas nicht? Beschreibe das Problem im Chat – die KI schickt dir eine neue Version.
🎓 Für Lehrkräfte: Weg 0 ist ideal für jüngere Klassen und für eine Frontal-Demo. Beachtet die Altersgrenzen der Anbieter und gebt keine personenbezogenen Daten ein. Details in Modul 6.
Der Rest dieses Moduls richtet opencode ein – ein KI-Werkzeug direkt im Terminal, das deine Dateien selbst anlegt und ändert. Das ist mächtiger, aber optional. Weg 0 reicht für die Module 3 und 4 vollkommen aus.
Was ist „opencode”?
opencode ist ein kostenloser KI-Coding-Agent, der im Terminal läuft. Du tippst, was entstehen soll – opencode legt die Dateien an und ändert sie selbstständig. Du wählst, welches KI-Modell dahinter rechnet: in der Cloud (Weg A) oder lokal auf deinem Gerät (Weg B).
Was ist ein Terminal? Ein Fenster, in das man Befehle tippt.
- macOS: Programme → Dienstprogramme → Terminal
- Windows: Terminal bzw. PowerShell (auf eigenen Geräten als Administrator, siehe unten)
- Linux:
Strg + Alt + T
opencode installieren
macOS / Linux – ein Befehl, kopieren und ins Terminal einfügen:
curl -fsSL https://opencode.ai/install | bash
Danach das Terminal neu starten (schließen und neu öffnen).
⚠️ Wichtig (macOS): Falls danach
opencodenicht gefunden wird („command not found: opencode”), kennt das Terminal den Installationsort noch nicht. Dann diese zwei Zeilen ins Terminal kopieren und mit Enter bestätigen:echo 'export PATH="$HOME/.opencode/bin:$PATH"' >> ~/.zshrc source ~/.zshrcHintergrund: opencode wird in den Ordner
~/.opencode/bininstalliert. Damit das Terminal den Befehl findet, muss dieser Ordner im sogenannten PATH stehen. Das Installationsskript versucht das automatisch einzutragen – auf manchen Macs (z. B. wenn die Datei~/.zshrcnoch nicht existiert) klappt das aber nicht. Die zwei Zeilen tragen den Pfad dauerhaft nach.
Windows – Variante 1 (empfohlen für eigene Geräte mit Admin-Rechten)
Auf Windows 11 ist das der einfachste Weg. Du brauchst Administrator-Rechte auf deinem Gerät (auf einem eigenen Laptop hast du die in der Regel).
- Terminal als Administrator öffnen: Start-Menü → „Terminal” eintippen → Rechtsklick →
„Als Administrator ausführen”.
⚠️ Wichtigster Schritt! Ohne Administrator-Rechte bricht die Installation mit der Fehlermeldung
EPERMab. Das ist der mit Abstand häufigste Stolperstein. - Node.js installieren:
winget install OpenJS.NodeJS.LTS - Terminal schließen und wieder als Administrator öffnen (damit Node erkannt wird).
- opencode installieren:
npm install -g opencode-ai
🪄 Noch einfacher – das Helfer-Skript: Statt der Schritte 2–4 kannst du das fertige Skript material/install-opencode-windows.ps1 ausführen. Es prüft die Admin-Rechte, installiert Node.js und opencode und meldet jeden Schritt. Im als Administrator geöffneten Terminal, aus dem Kurs-Ordner heraus:
powershell -ExecutionPolicy Bypass -File .\material\install-opencode-windows.ps1
Windows – Variante 2 (Alternative): WSL
Nur nötig, wenn du lieber in einer Linux-Umgebung arbeitest. Aufwändiger (Neustart, Ubuntu-Setup).
- PowerShell als Administrator öffnen (Rechtsklick → „Als Administrator ausführen”).
wsl --installausführen, PC neu starten (Ubuntu wird automatisch eingerichtet).- Im WSL-Terminal dann den macOS/Linux-Befehl von oben ausführen.
💡 PowerShell-Version? Auf Windows 11 ist die vorinstallierte PowerShell aktuell genug – du musst nichts nachrüsten. Wichtig ist nur, das Terminal als Administrator zu starten.
Installation prüfen
opencode --version
Erscheint eine Versionsnummer, hat es geklappt. ✅
Weg A – opencode + DeepSeek V4 Flash Free (empfohlen)
DeepSeek V4 Flash Free ist aktuell kostenlos über opencode nutzbar – ohne Zahlungsdaten.
⚠️ Datenschutz bei DeepSeek: DeepSeek ist das Modell eines chinesischen Anbieters – deine Eingaben werden auf dessen Servern außerhalb der EU verarbeitet. Gib daher keine personenbezogenen Daten ein (keine echten Namen, Noten, Adressen – Details in Modul 6). Für die Übungen dieses Kurses ist das unkritisch, weil nur Übungsprojekte und erfundene Daten verwendet werden. Sobald du mit sensiblen Daten arbeiten willst, führt der Weg zwingend über die lokale KI (Weg B, Ollama) – dort verlassen die Daten deinen Rechner nicht.
- opencode starten:
opencode - Im Programm
/connecteingeben, Enter drücken. - Mit den Pfeiltasten OpenCode Zen auswählen, Enter. Es öffnet sich der Browser mit opencode.ai/auth.
- Konto erstellen oder anmelden (E-Mail + Passwort genügen).
- API-Key kopieren (Button „Create API Key”).
- Den API-Key in opencode einfügen (
Strg+V/Cmd+V). /modelseingeben, Enter → DeepSeek V4 Flash Free auswählen.
Fertig! Wechsle in einen Projektordner und leg los:
mkdir ~/vibe-coding && cd ~/vibe-coding
opencode
⚠️ Hinweis: Das kostenlose Kontingent ist zeitlich begrenzt. Falls DeepSeek einmal nicht verfügbar ist, nutze Weg B (Ollama) oder Weg 0 (Browser).
Weg B – opencode + Ollama (offline)
Nur nötig, wenn du ohne Internet arbeiten willst oder Daten lokal halten musst.
Ollama installieren:
# macOS
brew install ollama
# Linux
curl -fsSL https://ollama.com/install.sh | sh
# Windows → in WSL den Linux-Befehl ausführen
Modell herunterladen (kompaktes Modell, ca. 2 GB Download – läuft auch auf Laptops ohne Spezial-Hardware, ab etwa 4 GB freiem Arbeitsspeicher):
ollama pull qwen2.5-coder:3b
Wichtig – 16k-Variante anlegen (sonst bearbeitet opencode keine Dateien):
ollama cp qwen2.5-coder:3b qwen2.5-coder:3b-16k
opencode mit Ollama verbinden – lege im Projektordner eine Datei opencode.json an:
{
"$schema": "https://opencode.ai/config.json",
"provider": {
"ollama": {
"npm": "@ai-sdk/openai-compatible",
"name": "Ollama (local)",
"options": { "baseURL": "http://localhost:11434/v1" },
"models": {
"qwen2.5-coder:3b-16k": { "name": "Qwen 2.5 Coder 3b (16k)" }
}
}
},
"model": "ollama/qwen2.5-coder:3b-16k"
}
Starte dann opencode – es nutzt jetzt das lokale Modell.
Wer einen Laptop mit ≥ 8 GB RAM hat, kann das stärkere
qwen2.5-coder:7b(bzw....:7b-16k) verwenden – bessere Ergebnisse, höherer Speicherbedarf.
Mini-Befehlsreferenz für opencode
opencode # Programm im Terminal starten
/connect # Modell-Anbieter verbinden (z. B. OpenCode Zen → DeepSeek V4)
/models # Modell auswählen
/exit # opencode beenden
Danach einfach lostippen, was entstehen soll. Für die Praxis-Module brauchst du außerdem oft
Node.js und Python – prüfe mit node --version und python3 --version, ob sie da sind
(beide gibt es kostenlos auf nodejs.org bzw. python.org).
🛠️ Praxis: Erster Kontakt
Egal welcher Weg – stelle deinem Werkzeug eine erste Aufgabe, um zu sehen, dass es reagiert:
Schreibe eine einzelne HTML-Datei
hallo.html, die in großer Schrift „Hallo Vibe Coding!” anzeigt und den Hintergrund in einem sanften Blauton einfärbt.
- Weg 0: Code aus dem Chat in eine Datei
hallo.htmlkopieren und im Browser öffnen. - Weg A/B: In opencode den Prompt eintippen; opencode legt
hallo.htmlan. Datei im Browser öffnen.
Wenn du „Hallo Vibe Coding!” auf blauem Grund siehst: Dein Werkzeug läuft. 🎉
✅ Selbstcheck (Kurzcheck vor Modul 3)
- Ich habe einen Weg gewählt (0, A oder B).
- Mein Werkzeug reagiert auf einen Prompt.
- (Weg A/B)
opencode --versionzeigt eine Version. - Ich konnte die Datei
hallo.htmlim Browser öffnen.
Frage: Warum braucht der Ollama-Weg die „16k”-Modellvariante?
Lösung
Weil das Modell ein ausreichend großes **Kontextfenster** braucht, um ganze Dateien zu lesen und zu bearbeiten. Mit zu kleinem Kontext „bearbeitet opencode keine Dateien".Keine Panik bei Problemen. Wenn etwas klemmt: Frag die KI selbst nach Hilfe, probiere Weg 0 als Ausweichlösung, oder schreib eine Mail an jochen.leeder@mzgivb.de. Ausführliche Installationshilfen liegen bereit – für Windows und für Linux Mint.
📋 Aufgaben
Abhaken speichert direkt in dieser Datei. In MindGraph Notes erscheinen diese Aufgaben automatisch im Tasks-Widget und am Fälligkeitstag im Focus. Übersicht & Kursfahrplan: Aufgaben.md.
- Wähle deinen Werkzeug-Weg (0, A oder B) und richte ihn ein #kurs/modul-2 (@[[2026-06-26]])
- Stelle die erste Aufgabe und erzeuge
hallo.html, öffne sie im Browser #kurs/modul-2 (@[[2026-06-26]])
⬅️ Modul 1 · 🏠 Übersicht · ➡️ Modul 3: Deine erste Webseite