Willkommen in deinem Workspace

Alles, was du für den Workshop brauchst — Claude Code, VS Code, Datenbank und Live-Preview.

🚀 Schnellstart

Dein Workspace ist vollständig eingerichtet. Öffne VS Code über den Button in der Toolbar.

📁 Wichtig – Richtiger Ordner:
VS Code öffnet automatisch /home/coder/myapp. Falls ein Fehler erscheint:
Klicke „Open Folder…" und gib ein: /home/coder/myapp

Empfohlener Workflow:

dev      # Dev-Server im Hintergrund starten (Alias für npm run dev &)
claude   # Claude Code im selben Terminal öffnen

💡 Tipp: Der dev-Alias startet Vite im Hintergrund — das Terminal bleibt frei für Claude Code. Alternativ: „App Preview"-Button in der Toolbar.

⚠️ Achtung: npm run dev (ohne &) blockiert das Terminal. Dann läuft claude nicht mehr im selben Fenster — neues Terminal mit Strg+Shift+` öffnen.

🤖 Claude Code – Grundlagen

Claude Code ist eine KI direkt im Terminal. Starte sie mit claude im VS Code Terminal — das Terminal darf nicht durch einen laufenden Dev-Server blockiert sein (→ dev-Alias oder neues Terminal mit Strg+Shift+`).

Beim ersten Start erscheinen drei Dialoge — hier die richtigen Antworten:

Trust folder?

VS Code fragt ob du dem Workspace-Ordner vertraust.

→ „Yes, I trust the authors" klicken

Detected a custom API key — Do you want to use this API key?

Claude Code erkennt den vorbereiteten Workshop-Key automatisch.

→ „1. Yes" auswählen und Enter drücken

Use Claude Code's terminal setup?

Aktiviert Shift+Enter für Zeilenumbrüche — sehr praktisch für längere Prompts.

→ „1. Yes, use recommended settings" und Enter drücken

💡 Diese Dialoge erscheinen nur beim ersten Start. Danach startet Claude Code direkt.

Befehl	Beschreibung
`claude`	Interaktiven Chat starten
`claude "Erstelle eine Login-Seite"`	Direkter Befehl ohne Chat
`claude --continue`	Letzte Session fortsetzen
`/help`	Alle Slash-Commands anzeigen
`/status`	Budget-Status anzeigen
`/clear`	Kontext leeren

💡 Effektive Prompts

Claude Code versteht den gesamten Codebase-Kontext. Gute Prompts sind konkret und aufgabenorientiert:

claude "Erstelle eine REST API für User-Registrierung mit:
- POST /api/register (email, password)
- Validierung und Error-Handling
- PostgreSQL-Speicherung via Prisma"

🛠️ Skills & Slash-Commands

Vordefinierte Skills werden automatisch beim Start geladen:

Skill	Beschreibung
`/debug-react`	React-Fehler systematisch debuggen
`/write-tests`	Vitest-Tests generieren
`/explain-code`	Code verständlich erklären
`/optimize-sql`	SQL-Queries optimieren

⚡ App Preview – Deine Live-App

Klicke auf „App Preview" in der Toolbar — der Dev-Server startet automatisch. Oder manuell im Terminal:

dev   # startet Vite im Hintergrund auf Port 5173

💡 Schwarze Seite? Das ist normal beim Start — Vite lädt. Falls die App wirklich leer ist, hat Claude Code den Inhalt noch nicht erstellt. Einfach etwas bauen lassen!

Die Preview-URL lautet z.B.:
https://ceres--dev--preview.vibebox.ikarus-innovation.de

Du kannst diesen Link auch mit anderen teilen (Coder-Login erforderlich).

🗄️ Datenbank

PostgreSQL läuft auf dem Control Plane. Verbinde dich so:

DATABASE_URL="postgresql://platform:***@10.0.1.10/ceres_myapp"

pgAdmin ist über den „Datenbank"-Button erreichbar.

📧 E-Mail-Testing (Mailpit)

Alle Test-Mails werden von Mailpit abgefangen — kein echter Versand.

SMTP_HOST=localhost
SMTP_PORT=1025

Die Mail-Oberfläche öffnest du über „Mail Dev" in der Toolbar.

🏆 Leaderboard

Stats werden alle 10 Minuten automatisch gemeldet: Commits, Lines of Code, Session-Zeit.

⚠️ Das Leaderboard ist öffentlich für alle Teilnehmer sichtbar.

💰 Budget

Dein tägliches KI-Budget beträgt 20 USD. Status prüfen:

claude /status

Das Budget resettet täglich um Mitternacht UTC.

🆘 Häufige Probleme

Problem	Lösung
`npm run dev` startet nicht	`npm install` ausführen
Claude Code antwortet nicht	Budget prüfen: `claude /status`
VS Code zeigt falschen Ordner	File → Open Folder → `/home/coder/myapp`
DB-Verbindungsfehler	DATABASE_URL in `.env` prüfen
Port belegt	`lsof -i :5173` → Prozess beenden
Zwischenablage (Clipboard) funktioniert nicht	Siehe Abschnitt unten ↓

📋 Zwischenablage freischalten

VS Code im Browser braucht explizite Browser-Erlaubnis, um die Zwischenablage (Copy&Paste) zu nutzen. Einmalig freischalten:

⚠️ „Unable to read from the browser's clipboard" – dieser Fehler erscheint beim ersten Öffnen von VS Code.

✅ Schnell-Fix — 1 Klick

Klicke auf den Button — dein Browser fragt dich, ob er Zugriff erlauben soll. Klicke „Zulassen".

Manueller Weg (Chrome/Edge): Klick auf das 🔒 Schloss-Symbol in der Adressleiste → Website-Einstellungen → Zwischenablage → Zulassen → Seite neu laden.