OpenCode Desktop-App Tutorial: Installation, Plan-Modus und dein erster Build
Der kostenlose Open-Source-Agent OpenCode gibt es jetzt auch als Desktop-App in Beta für macOS, Windows und Linux. Dieser 16-Schritte-Guide behandelt die brew-cask-Installation, das Verbinden von Providern oder kostenlosen Modellen, Plan-Modus-Rückfragen, Build-Modus-To-do-Listen, Unified-Diffs, Inline-Kommentare und das eingebaute Terminal — jeder Schritt gegen eine saubere Bildschirmaufnahme geprüft.
Kurz zusammengefasst — was die OpenCode Desktop-App ist
- OpenCode Desktop ist die GUI zum OpenCode-Coding-Agent — derselbe Agent wie die CLI, nur in einem Fenster mit Dateibrowser, Diff-Review und Terminal-Tabs. Auf opencode.ai/download heißt er weiterhin OpenCode Desktop (Beta); es gibt Installer für macOS (Apple Silicon und Intel), Windows x64 und Linux (.deb/.rpm) sowie den Homebrew-Weg: brew install --cask opencode-desktop.
- Du musst dich vorab nicht auf einen Modell-Anbieter festlegen. Der Select-model-Dialog bringt kostenlose Modelle mit (Big Pickle, DeepSeek V4 Flash Free, MiMo V2.5 Free, Nemotron 3 Ultra Free, North Mini Code Free), und Popular providers umfasst OpenCode Zen, OpenCode Go, Anthropic, GitHub Copilot, OpenAI, Google und mehr — ein Copilot-Abo verbindet sich per Device-Login ohne zusätzlichen API-Key.
- Der Arbeitsrhythmus lautet Plan → Build → Review. Der Plan-Modus stellt Rückfragen und entwirft einen Plan, ohne Dateien zu schreiben; nach der Freigabe schaltest du in den Build-Modus, und der Agent arbeitet eine To-do-Liste ab. Session changes zeigt ein 11-Dateien-Unified-Diff, das sich zeilenweise kommentieren lässt, und im Terminal-Tab laufen Dev-Server.
- Versionskontext 2026: Die OpenCode-2.0-Linie erschien im September (Tags v2.0.0 bis v2.0.11 am 20. September), die Desktop-App wurde im Frühjahr von Tauri auf Electron portiert, und beide Teile entwickeln sich schnell — wenn ein Schritt anders aussieht, aktualisiere zuerst über die Download-Seite.
How to Download, Install & Use OpenCode Desktop App | Vibe Coding Machine | Build Two Apps
Video-Walkthrough:WebStylePress7:51
OpenCode Desktop: Great UI/UX + Run Multiple AI Agents (Free)
Video-Walkthrough:AI With Nathan9:32
OpenCode Desktop App — 75+ Providers, Parallel Sessions, File Browser & More
Video-Walkthrough:AI Stack Engineer8:22
How to Install OpenCode Desktop App on Windows 10/11 2026
Video-Walkthrough:United Top Tech2:46
OpenCode Download & Docs — OpenCode Desktop (Beta), v2 install
Produktfakten:opencode.aiDownload page
Schritte 1-3, 6, 8 und 9 stammen aus WebStylePress' Windows-Aufzeichnung; Schritt 4 aus United Top Techs Installationsvideo; Schritte 5 und 7 aus AI Stack Engineers Provider-Setup; Schritte 10-16 sind Stills aus AI With Nathans Plan-to-Build-Session. Installationsbefehle und 2.0-Release-Fakten sind opencode.ai/download und dem anomalyco/opencode-Repository entnommen.
Frames sind mit Quellenangabe versehene Screenshots aus den genannten Videos, jeder mit Deep-Link zum Zeitstempel. Der Text dieses Guides ist eigenständig geschrieben; die Fakten stammen aus diesen Aufzeichnungen sowie von der offiziellen Download-Seite, der Dokumentation und dem Repository.
OpenCode Desktop, Schritt für Schritt
1 · OpenCode Desktop installieren
- 1
Download-Seite öffnen und den OpenCode Desktop (Beta)-Installer holen
Öffne opencode.ai/download und scrolle zu Abschnitt 2, OpenCode Desktop (Beta). Homebrew-Nutzer auf dem Mac führen brew install --cask opencode-desktop aus; alle anderen wählen einen Download-Button — macOS (Apple Silicon), macOS (Intel), Windows (x64), Linux (.deb) oder Linux (.rpm). Der Windows-Download ist rund 116 MB groß. Abschnitt 3 derselben Seite installiert bei Bedarf die Erweiterungen für VS Code, Cursor, Zed und Windsurf.
Der Abschnitt OpenCode Desktop (Beta) auf opencode.ai/download mit dem Homebrew-cask-Befehl.Video bei 0:25 - 2
Windows SmartScreen mit More info umgehen
Die Desktop-App ist Beta-Software mit einem jungen Herausgeber, daher meldet sich Microsoft Defender SmartScreen mit dem klassischen Hinweis „Windows protected your PC“ und blockiert die unbekannte App. Klicke im Warnhinweis auf More info — der Dialog klappt auf und zeigt, wer die Datei signiert hat, plus einen Run-anyway-Button. Unter macOS und Linux entfällt dieser Schritt: einfach die .dmg mounten bzw. das .deb/.rpm-Paket installieren.
SmartScreen blockiert den unbekannten Installer, bis du More info anklickst.Video bei 0:33 - 3
Run anyway klicken und die Installation abschließen
Der aufgeklappte Dialog nennt OpenCode Desktop Installer.exe und den Herausgeber, Anomaly Innovations, Inc. Ein Klick auf Run anyway genügt, der Rest läuft durch den Einrichtungsassistenten. Der erste Start dauert ein paar Sekunden, weil die App ihren lokalen Server hochfährt — auf jeder Plattform normal.
Im aufgeklappten Dialog steht der Herausgeber; Run anyway startet das Setup.Video bei 0:40 - 4
Erster Start: Local Server prüfen und ein Projekt öffnen
Der Startbildschirm zeigt einen grünen Local-Server-Punkt, die Liste Recent projects und den Button Open project. Klicke auf Open project und wähle einen beliebigen Ordner — ein frischer, leerer tut es genauso. Die App bringt dich in einen Workspace mit dem Build-anything-Eingabefeld. Recent projects merkt sich deine Ordner ab jetzt.
Erster Start: Local Server läuft, Recent projects bleibt leer, bis du einen Ordner öffnest.Video bei 1:02
2 · Provider verbinden und Modell wählen
- 5
Über die Getting-started-Karte den ersten Provider verbinden
Eine frische Installation begrüßt dich mit einer Getting-started-Karte: OpenCode bringt kostenlose Modelle mit, damit du sofort starten kannst, und über Connect any provider kommst du an Modelle von Claude, GPT, Gemini und mehr. Der Button Connect provider auf dieser Karte ist der schnellste Weg in die Provider-Einrichtung — oder überspringe sie komplett und bleibe bei den kostenlosen Modellen.
Die Getting-started-Karte führt zu Connect provider; kostenlose Modelle laufen ohne Setup.Video bei 2:20 - 6
Provider unter Settings → Providers auswählen
Öffne das Zahnrad und wähle Providers. OpenCode Zen (kuratierte Modelle inklusive Claude, GPT und Gemini) und OpenCode Go (günstiges Abo) stehen als Recommended oben, gefolgt von Anthropic für direkten Claude-Zugriff, GitHub Copilot, OpenAI, Google — und OpenRouter mit einem ganzen Stapel kostenloser Modelle. Ein Custom-provider-Eintrag deckt alles andere ab.
Settings → Providers: OpenCode Zen und OpenCode Go sind die empfohlenen Zeilen.Video bei 1:26 - 7
GitHub Copilot per Device-Login verbinden
Wer GitHub Copilot bereits abonniert hat — Pro, Pro+, Business oder Enterprise — nutzt es ohne zusätzlichen API-Key. Wähle GitHub Copilot, und die App zeigt den Dialog Connect GitHub Copilot mit einem Bestätigungscode und einem Link: github.com/login/device öffnen, Code eingeben, autorisieren — schon erscheinen die Modelle deines Copilot-Plans im Auswahldialog.
Der Device-Login-Ablauf: Code auf github.com/login/device eingeben und autorisieren.Video bei 2:30 - 8
Modell auswählen — kostenlose inklusive
Der Select-model-Dialog listet die kostenlosen Modelle von OpenCode auf: Big Pickle, DeepSeek V4 Flash Free, MiMo V2.5 Free, Nemotron 3 Ultra Free und North Mini Code Free. Darunter zieht Add more models from popular providers OpenCode Zen, Anthropic, GitHub Copilot und weitere hinzu. Je nach Modell erscheint auch ein Thinking-Effort-Wähler (low bis max) — beim ersten Durchlauf bei der Standardeinstellung bleiben.
Fünf kostenlose Modelle liegen bei; Anbietermodelle kommen aus demselben Dialog.Video bei 2:44
3 · Plan-Modus: den Auftrag klären, bevor Code entsteht
- 9
Das Eingabefeld in den Plan-Modus schalten
Unter dem Eingabefeld sitzen zwei Dropdowns: der Modus (Build oder Plan) und das Modell. Stelle den Modus auf Plan, bevor du etwas absendest. Der Plan-Modus ist einer der zwei eingebauten Agenten: Er darf dein Projekt analysieren und einen Ansatz vorschlagen, aber keine Dateien schreiben oder ändern — dasselbe Plan/Build-Paar wie unter der Tab-Taste im Terminal-UI, wo ein Indikator unten rechts den aktiven Modus zeigt.
Das Modus-Dropdown unter dem Eingabefeld schaltet zwischen Plan und Build um.Video bei 3:00 - 10
Die Rückfragen beantworten
Schicke deinen Auftrag ab — in der Aufzeichnung eine CSV-Datenanalyse-Web-App — und der Plan-Modus antwortet mit einem Questions-Panel statt mit Code. Diese Session bekam vier Fragen: Tech Stack (React + Node.js, Next.js, Vue + FastAPI oder Plain HTML/JS), Charting Library, Processing Location und Insight Depth. Beantworte jede, ergänze eigene Hinweise und sende ab; die Antworten formen den Plan.
Der Plan-Modus stellt Rückfragen, bevor er auch nur eine Datei schreibt.Video bei 3:20 - 11
Plan freigeben und zu Build wechseln
Steht der Plan, fragt der Agent „Ready to build. Should I proceed?“ und bietet die Schnellantwort yes proceed an. Dateizugriffe bleiben blockiert, bis der Build-Modus aktiv ist — und in der Beta schaltet der Agent nicht immer selbst um. Bewege das Modus-Dropdown also selbst von Plan auf Build und bestätige dann. Das entspricht der offiziellen Doku: erst planen, dann im Build-Modus umsetzen.
Mit der Schnellantwort freigeben, dann das Modus-Dropdown auf Build stellen.Video bei 4:05 - 12
Zusehen, wie der Build-Modus die To-do-Liste abarbeitet
Der Build-Modus übersetzt den Plan in eine To-dos-Checkliste — Create index.html, Create style.css, Create app.js — und arbeitet sie mit Write-Tool-Aufrufen ab, Kästchen für Kästchen. Eine Beta-Marke aus der Aufzeichnung: Das To-do-Panel renderte doppelt; harmlos, aber genau die Sorte raue Kante, die man in der Beta erwarten darf.
Der Build-Modus arbeitet die To-dos-Liste ab und hakt jede Datei ab.Video bei 4:11
4 · Bauen, Reviewen und die App ausführen
- 13
Den Diff in Session changes reviewen
Das Session-changes-Panel zählt jede berührte Datei — 11 Changes in der Finance-App-Session —, daneben steht All files, und jeder Diff öffnet mit Unified- oder Split-Ansicht plus Collapse all. Grüne Zeilen sind Ergänzungen, rote Löschungen; weil Änderungen pro Session erfasst werden, kommst du mit Undo auch Schritt für Schritt zurück.
Session changes: 11 Dateien geändert, Unified-Ansicht statt Split.Video bei 8:20 - 14
Den Agenten mit Inline-Kommentaren steuern
Öffne eine generierte Datei im Viewer, klicke auf eine Zeile — in der Aufzeichnung Zeile 62 der app.js — und schreibe direkt dort einen Kommentar. Das Kommentarfeld zeigt „Commenting on line N“ mit Cancel- und Comment-Buttons, und der Agent liest Inline-Kommentare als eingegrenzte Anweisungen — deutlich präziser als Umschreibungen im Chat.
Im Datei-Viewer eine Zeile markieren und dem Agenten einen Inline-Kommentar hinterlassen.Video bei 5:12 - 15
Befehle im eingebauten Terminal ausführen
Im Terminal-Tab laufen npm run dev, git status, Paketinstallationen — bei Bedarf sogar die OpenCode-CLI selbst, wenn du TUI und GUI nebeneinander willst. Eine Einstellung zählt: Settings → General → Terminal Shell. In der Aufzeichnung weigerte sich die bash, den Dev-Server aus dem Chat zu starten; auf Auto gestellt, liefen die Befehle durch. Lasse Auto stehen, außer, du hast einen Grund.
Der Terminal-Tab führt Dev-Server aus — und die OpenCode-CLI gleich mit.Video bei 5:18 - 16
Die fertige App öffnen und weiter iterieren
Statische Builds laufen per Doppelklick auf die index.html; eine Next.js-App läuft nach npm run dev auf localhost:3000 — die fertige Goals-Seite zeigt Karten für Total Goals, Total Saved und Overall Progress samt neuem Vacation-Ziel. Änderungen einfach in derselben Session weiter anfordern oder eine parallele Session starten — mehrere Agenten laufen nebeneinander, jeder mit eigenem Projekt und Modell.
Die vom Agenten gebaute Goals-Seite, laufend auf localhost:3000/goals.Video bei 7:40