Eine erste App ist ein gutes Lernprojekt, wenn du ihre Funktionen selbst überprüfen kannst. Eine Aufgabe hinzufügen, abhaken und löschen: Das sind kleine Schritte mit einem klaren Ergebnis.
In diesem Tutorial baust du mit Codex CLI eine lokale Todo-App. Anschließend ergänzt du einen Filter, ohne dabei die vorhandenen Funktionen aus den Augen zu verlieren. Programmierkenntnisse brauchst du für den Einstieg nicht. Du solltest aber jede Änderung ausprobieren, bevor du den nächsten Auftrag erteilst.
Das Ziel: eine Datei namens
index.html, die sich im Browser öffnen lässt. Du lernst dabei Installation, Modellverbindung, konkrete Prompts und einen kurzen Testablauf. Wir verwenden keine Frameworks und installieren für die App keine zusätzlichen Pakete.
Erst festlegen, was „fertig“ bedeutet
Der erste Auftrag ist bewusst überschaubar. Die App soll Aufgaben hinzufügen, ihren Status ändern und einzelne Einträge löschen können. Nach dem Neuladen sollen die Daten wieder erscheinen, sofern der Browser lokale Speicherung erlaubt.
Die Oberfläche darf schlicht sein. Entscheidend ist, dass du sagen kannst: „Diese Funktion tut das, was ich verlangt habe.“ So bleibt auch ein Fehler klein genug, um ihn verständlich zu beschreiben.
1. Die Werkzeuge installieren
Du brauchst Windows, PowerShell, Node.js und eine nutzbare Verbindung zu einem Modell. Die Befehle in diesem Artikel wurden am 8. Oktober 2026 anhand folgender Umgebung geprüft:
| Werkzeug | Version der geprüften Umgebung |
|---|---|
| Windows | Windows 10, Build 19045 |
| PowerShell | 7.6.6 |
| Node.js | v24.21.0 |
| npm | 11.19.0 |
| Codex CLI | 0.160.1 |
Installiere über die Node.js-Downloadseite eine aktuelle LTS-Version für Windows. Wähle das .msi-Paket passend zur Prozessorarchitektur deines Rechners. npm und der Eintrag im PATH sollten aktiviert bleiben.
Öffne danach ein neues PowerShell-Fenster und führe die Befehle einzeln aus:
node --version
npm.cmd --version
Wenn beide eine Version anzeigen, installiere Codex:
npm.cmd install -g @openai/codex@latest
Warte, bis die Installation beendet ist. Prüfe anschließend:
codex.cmd --version
Die Endung .cmd vermeidet einige Probleme mit gesperrten PowerShell-Skripten. Kopiere nur die Befehle, keinen vorangestellten Text wie PS C:\...>.
2. Eine Modellverbindung einrichten
Codex braucht zusätzlich zur Installation eine Authentifizierung. Für den offiziellen Kontozugang folgst du beim Start der Anmeldung; verfügbare Funktionen und Limits richten sich nach deinem Konto.
Wenn deine Verbindung bereits funktioniert, überspringe diesen Abschnitt. Das folgende Beispiel zeigt einen benutzerdefinierten API-Anbieter anhand der Codex-Anleitung von Crazyrouter. Ein Provider legt fest, an welchen Dienst die Modellanfragen gehen.
Prüfe dort zunächst API-Schlüssel, Modellzugriff und verfügbares Guthaben. Ein ChatGPT-Abo und ein Konto bei einem externen API-Dienst haben getrennte Abrechnungssysteme.
Schlüssel speichern
Führe zuerst nur diese Zeile in PowerShell aus:
$codexSecureKey = Read-Host 'Crazyrouter API Key einfügen und Enter drücken' -AsSecureString
Füge den Schlüssel erst bei der Eingabeaufforderung ein. Dass er nicht im Klartext erscheint, ist beabsichtigt. Sobald du wieder am PowerShell-Prompt bist, führe diesen Block aus:
$codexKeyPtr = [Runtime.InteropServices.Marshal]::SecureStringToBSTR($codexSecureKey)
try {
$codexPlainKey = [Runtime.InteropServices.Marshal]::PtrToStringBSTR($codexKeyPtr).Trim()
if ([string]::IsNullOrWhiteSpace($codexPlainKey)) { throw 'API Key fehlt' }
[Environment]::SetEnvironmentVariable('CRAZYROUTER_API_KEY', $codexPlainKey, 'User')
$env:CRAZYROUTER_API_KEY = $codexPlainKey
} finally {
[Runtime.InteropServices.Marshal]::ZeroFreeBSTR($codexKeyPtr)
$codexPlainKey = $null
$codexSecureKey.Dispose()
}
Der Schlüssel steht jetzt dem aktuellen Fenster und künftig gestarteten Prozessen dieses Windows-Benutzers zur Verfügung. Benutzer-Umgebungsvariablen sind kein verschlüsselter Tresor. Verwende dafür kein gemeinsam genutztes Konto und lege den Schlüssel nicht im Projekt oder in Screenshots ab.
Verbindung konfigurieren
Dieser Block öffnet die Konfiguration im Editor und sichert eine vorhandene Datei vorher:
$codexConfigDir = if ($env:CODEX_HOME) { $env:CODEX_HOME } else { Join-Path $env:USERPROFILE '.codex' }
New-Item -ItemType Directory -Path $codexConfigDir -Force | Out-Null
$codexConfigFile = Join-Path $codexConfigDir 'config.toml'
if (Test-Path -LiteralPath $codexConfigFile) {
Copy-Item -LiteralPath $codexConfigFile -Destination ($codexConfigFile + '.bak.' + (Get-Date -Format 'yyyyMMdd-HHmmss'))
}
notepad.exe $codexConfigFile
Falls der Editor eine neue Datei anlegen möchte, bestätige das. In eine leere Datei kommt:
model = "gpt-5.6-sol"
model_provider = "crazyrouter"
[model_providers.crazyrouter]
name = "Crazyrouter"
base_url = "https://api.crazyrouter.com/v1"
env_key = "CRAZYROUTER_API_KEY"
wire_api = "responses"
Der Modellname stammt aus dem Konfigurationsbeispiel des Dienstes. Prüfe für deinen Schlüssel den Zugriff und die Unterstützung der für Codex benötigten Responses API.
env_key enthält den Namen der Umgebungsvariable, nicht den Schlüssel. base_url ist die API-Adresse; hänge weder /responses noch Trackingparameter an.
Bei vorhandener Konfiguration passt du bestehende Felder an, statt alles zu ersetzen. Die beiden obersten Zeilen gehören vor den ersten Abschnitt in eckigen Klammern. Vermeide doppelte Felder. Speichere mit Ctrl + S und kontrolliere die Dateiendung: config.toml, nicht config.toml.txt.
3. Im eigenen Übungsordner starten
Erstelle in PowerShell einen Ordner nur für diese App:
$codexProject = Join-Path $env:USERPROFILE 'CodexProjects\devto-todo'
New-Item -ItemType Directory -Path $codexProject -Force | Out-Null
Set-Location -LiteralPath $codexProject
Get-Location
Wenn der Ordner schon wichtige Dateien enthält, nimm einen neuen Namen. Starte dann Codex:
codex.cmd --sandbox workspace-write --ask-for-approval on-request
Kontrolliere bei Fragen zu Ordnervertrauen oder Sandbox-Einrichtung den angezeigten Pfad. Prüfe angeforderte Befehle, bevor du ihre Ausführung erlaubst.
Sende im Codex-Eingabefeld zunächst:
Antworte nur mit „Verbindung steht“.
Lies oder ändere keine Dateien und führe keine Befehle aus.
Eine Antwort bestätigt die Verbindung für diese Anfrage. Jetzt folgt der Arbeitsauftrag:
Erstelle im aktuellen Ordner tatsächlich eine index.html für eine deutsche Todo-App.
Funktionen:
- Aufgaben per Button „Hinzufügen“ und per Enter anlegen.
- Leere Eingaben ignorieren.
- Aufgaben einzeln als erledigt markieren und löschen.
- Die Anzahl offener Aufgaben anzeigen.
- Aufgaben und Status mit localStorage speichern und beim Laden wiederherstellen.
- Falls Speichern fehlschlägt, deutlich auf den nur vorübergehenden Zustand hinweisen.
Grenzen:
- HTML, CSS und JavaScript bleiben in dieser einen Datei.
- Keine externen Bibliotheken, Bilder, Schriften oder CDNs; keine Paketinstallation.
- Ändere nur index.html.
- Zeige Aufgabentexte als Text an, nicht als ausführbares HTML.
- Die Bedienung soll auch auf einem schmalen Bildschirm möglich sein.
Nenne danach Dateipfad, Öffnungsschritt und konkrete Funktionsprüfungen.
Falls du nicht schreiben kannst, erkläre die Ursache.
Der Prompt gibt Codex ein Ziel, klare Grenzen und überprüfbare Ergebnisse. Diese drei Bausteine kannst du später für andere Projekte wiederverwenden.
4. Die App selbst prüfen
Beende Codex nach der Bildschirmanweisung. Bei Ctrl + C kann eine weitere Bestätigung nötig sein. Sobald wieder der PowerShell-Prompt erscheint:
Set-Location -LiteralPath (Join-Path $env:USERPROFILE 'CodexProjects\devto-todo')
Test-Path .\index.html
Bei True öffnest du die Datei:
Start-Process .\index.html
Startet stattdessen ein Editor, wähle im Explorer über „Öffnen mit“ Edge oder Chrome.
| Aktion | Erwartung |
|---|---|
| „Dokumentation lesen“ hinzufügen | Genau eine Aufgabe erscheint |
| Zweite Aufgabe per Enter hinzufügen | Eingabe wird geleert, kein Duplikat |
| Nur Leerzeichen eingeben | Keine neue Aufgabe |
| Aufgabe abhaken und wieder öffnen | Status und offene Anzahl stimmen |
| Eine Aufgabe löschen | Die übrigen bleiben erhalten |
| Seite neu laden | Inhalt und Status werden bei verfügbarer Speicherung wiederhergestellt |
localStorage speichert im jeweiligen Browser, nicht in einem Cloud-Konto. Das Löschen von Browserdaten kann die Aufgaben entfernen. Bei direkt geöffneten file://-Dateien unterscheidet sich das Speicherverhalten je nach Browser. Deshalb gehört das Neuladen ausdrücklich zum Test.
5. Erst jetzt eine Änderung hinzufügen
Bevor du weiterarbeitest, sichere die Datei in PowerShell:
Copy-Item .\index.html ('.\index.backup-' + (Get-Date -Format 'yyyyMMdd-HHmmss') + '.html')
Starte Codex im selben Ordner erneut. Mit codex.cmd resume kannst du auch eine frühere Unterhaltung auswählen. Bitte dann um eine Erweiterung:
Lies die vorhandene index.html.
Ergänze einen Schalter „Nur offene Aufgaben“.
Der Filter soll ausschließlich die Anzeige ändern, keine Aufgaben löschen.
Behalte Hinzufügen, Statuswechsel, Löschen und Speicherung bei.
Ändere nur index.html und beschreibe, wie ich den Filter prüfen kann.
Für den Test brauchst du eine offene und eine erledigte Aufgabe. Schalte den Filter ein: Nur die offene sollte sichtbar sein. Schalte ihn aus: Beide sollten wieder erscheinen. Prüfe anschließend erneut das Hinzufügen und Löschen.
Wenn etwas schiefgeht, beschreibe Aktion, tatsächliches Ergebnis und Erwartung:
In Edge lege ich zwei Aufgaben an und markiere eine als erledigt.
Nach dem Einschalten und Ausschalten des Filters bleibt die erledigte Aufgabe verschwunden.
Erwartet: Der Filter blendet sie nur aus; danach muss sie wieder erscheinen.
Prüfe, ob die Filterfunktion Daten verändert. Erhalte die anderen Funktionen.
Damit gibst du Codex einen nachvollziehbaren Ablauf statt einer vagen Fehlermeldung.
Wenn es schon vorher hakt
| Symptom | Nächster sinnvoller Check |
|---|---|
node oder npm fehlt |
Installation, PATH und neues Terminalfenster |
npm.ps1 wird blockiert |
npm.cmd verwenden |
codex.cmd fehlt |
npm-Ausgabe prüfen; npm.cmd prefix -g zeigt den globalen Installationsort |
| API-Variable fehlt |
[bool]$env:CRAZYROUTER_API_KEY prüfen und mit env_key abgleichen |
| 401 oder 403 | Fehlertext, Schlüssel, Anbieteradresse und Modellberechtigung prüfen |
| 404 oder unbekanntes Modell | Modell-ID, Basisadresse und Protokoll prüfen |
| 429 | Limits und Guthaben im Dienst prüfen; nicht ständig neu senden |
| TOML-Fehler | Anführungszeichen, doppelte Felder und Abschnittsgrenzen prüfen |
| Codex antwortet, Datei fehlt | Arbeitsordner und Schreibberechtigung kontrollieren |
Ein nicht leerer Schlüssel ist noch kein gültiger Schlüssel. Falls ein neues Terminal die gespeicherte Variable nicht sieht, schließe Windows Terminal vollständig und öffne es neu.
Was du auf das nächste Projekt übertragen kannst
Ein kleiner erster Auftrag macht Fehler überschaubar. Konkrete Abnahmekriterien machen sie sichtbar. Eine einzelne Änderung pro Runde hilft dir zu erkennen, wodurch sie entstanden sind.
Für einen Rechner, eine Lernkartei oder eine persönliche Startseite bleibt dieser Ablauf gleich: Ziel beschreiben, Änderungen begrenzen, Ergebnis öffnen, Funktionen prüfen.
Welches kleine Werkzeug würdest du als Nächstes bauen – und woran würdest du erkennen, dass es funktioniert?
Zum Nachschlagen
Versionshinweis: Menütexte und verfügbare Modelle können sich ändern. Nutze bei Abweichungen die aktuelle Anleitung des gewählten Dienstes und behalte die Funktionsprüfungen für deine eigene App bei.
Top comments (0)