Detaillierte Projektbeschreibung des Claude Code UI

Projektübersicht

Claude Code UI ist eine Open-Source-Web- und mobilfreundliche Benutzeroberfläche, die speziell für die offizielle Claude Code CLI von Anthropic entwickelt wurde. Das Projekt ermöglicht Benutzern, alle Claude Code-Sitzungen und -Projekte lokal oder remote anzuzeigen und sie auf die gleiche Weise wie über die CLI zu verwalten. Dies bietet Benutzern eine vollständige Benutzeroberfläche, die überall funktioniert.

Projektmerkmale

🎨 Responsives Design

• Plattformübergreifende Kompatibilität: Nahtlose Unterstützung für Desktop-, Tablet- und Mobilgeräte
• Adaptives Layout: Einklappbare Seitenleiste und intelligente Inhaltspriorisierung
• Berührungsfreundlich: Wischgesten und Touch-Navigation
• Mobile Navigation: Untere Registerkartenleiste für daumenfreundliche Bedienung

💬 Interaktive Chat-Oberfläche

• Integrierter Chat: Integrierte Chat-Oberfläche für nahtlose Kommunikation mit Claude Code
• Echtzeitkommunikation: Streamen von Claude-Antworten über WebSocket-Verbindungen
• Sitzungsverwaltung: Wiederherstellen früherer Gespräche oder Starten neuer Sitzungen
• Nachrichtenverlauf: Vollständiger Gesprächsverlauf mit Zeitstempeln und Metadaten
• Unterstützung mehrerer Formate: Text, Codeblöcke und Dateireferenzen

🖥️ Integrierte Terminalfunktionen

• Direkter CLI-Zugriff: Direkter Zugriff auf die Claude Code CLI über integrierte Shell-Funktionen
• Prozessverwaltung: Prozesserzeugung und -verwaltung, integriert in die Claude CLI
• Befehlsausführung: Unterstützt alle Claude Code CLI-Befehle

📁 Dateiexplorer

• Interaktiver Dateibaum: Interaktiver Dateibaum mit Syntaxhervorhebung und Echtzeitbearbeitung
• Echtzeit-Dateibearbeitung: Dateien direkt in der Oberfläche lesen, ändern und speichern
• Syntaxhervorhebung: Unterstützt mehrere Programmiersprachen
• Dateivorgänge: Erstellen, Umbenennen, Löschen von Dateien und Verzeichnissen

💾 Sitzungspersistenz

• Automatisches Speichern: Alle Gespräche werden automatisch gespeichert
• Sitzungsorganisation: Sitzungen nach Projekt und Zeitstempel gruppieren
• Sitzungsvorgänge: Umbenennen, Löschen und Exportieren des Gesprächsverlaufs
• Geräteübergreifende Synchronisierung: Zugriff auf Sitzungen von jedem Gerät aus

Technische Architektur

Systemarchitekturdiagramm

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Claude CLI │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
└─────────────────┘ └─────────────────┘ └─────────────────┘

Backend-Technologie-Stack

• Express-Server: Bietet RESTful APIs und statische Dateibereitstellung
• WebSocket-Server: Für die Kommunikation bei Chats und Projektaktualisierungen
• Claude CLI-Integration: Prozesserzeugung und -verwaltung
• Sitzungsverwaltung: JSONL-Parsing und Gesprächspersistenz
• Dateisystem-API: Stellt einen Dateibrowser für Projekte bereit

Frontend-Technologie-Stack

• React 18: Moderne Komponentenarchitektur mit Hooks
• CodeMirror: Fortgeschrittener Code-Editor mit Syntaxhervorhebung
• Vite: Schnelles Build-Tool und Entwicklungsserver
• Tailwind CSS: Utility-First CSS-Framework

Installation und Konfiguration

Systemanforderungen

• Node.js v16 oder höher
• Claude Code CLI installiert und konfiguriert

Installationsschritte

1. Repository klonen:

git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui

2. Abhängigkeiten installieren:

npm install

3. Umgebung konfigurieren:

cp .env.example .env
# Bearbeiten Sie die .env-Datei nach Bedarf

4. Anwendung starten:

# Entwicklungsmodus (mit Hot-Reload)
npm run dev

5. Browser öffnen:

• Entwicklungsumgebung: http://localhost:3001

Sicherheitseinstellungen

🔒 Wichtiger Sicherheitshinweis

Alle Claude Code-Tools sind standardmäßig deaktiviert. Dies verhindert, dass potenziell schädliche Operationen automatisch ausgeführt werden.

Um die vollständigen Funktionen von Claude Code nutzen zu können, müssen die Tools manuell aktiviert werden:

1. Tool-Einstellungen öffnen: Klicken Sie auf das Zahnradsymbol in der Seitenleiste
2. Selektive Aktivierung: Aktivieren Sie nur die Tools, die Sie benötigen
3. Einstellungen anwenden: Ihre Präferenzen werden lokal gespeichert

Empfohlene Methode: Beginnen Sie mit der Aktivierung grundlegender Tools und fügen Sie nach Bedarf schrittweise weitere Funktionen hinzu.

Hauptfunktionen

Projektverwaltung

• Automatische Projekterkennung: Die UI erkennt Claude Code-Projekte automatisch aus ~/.claude/projects/
• Visueller Projektbrowser: Zeigt alle verfügbaren Projekte mit ihren Metadaten und der Anzahl der Sitzungen an
• Projektvorgänge: Projekte umbenennen, löschen und organisieren
• Intelligente Navigation: Schneller Zugriff auf die letzten Projekte und Sitzungen

Dateiverwaltung

• Projektstruktur-Browsing: Mit erweiterbaren/einklappbaren Navigationsfunktionen
• Echtzeitbearbeitung: Dateien direkt in der Oberfläche bearbeiten
• Dateivorgänge: Vollständige Datei- und Verzeichnisverwaltungsfunktionen

Sitzungsverwaltung

• Persistente Speicherung: Alle Sitzungen werden automatisch gespeichert
• Verlauf: Vollständige Nachverfolgung des Gesprächsverlaufs
• Unterstützung mehrerer Sitzungen: Gleichzeitige Verwaltung mehrerer Projektsitzungen

Fehlerbehebung

Häufiges Problem 1: Die UI zeigt keine Projekte oder eine leere Projektliste an

Lösung:

• Stellen Sie sicher, dass die Claude CLI korrekt installiert ist
• Führen Sie den Befehl claude in mindestens einem Projektverzeichnis aus, um es zu initialisieren
• Überprüfen Sie, ob das Verzeichnis ~/.claude/projects/ existiert und die entsprechenden Berechtigungen hat

Häufiges Problem 2: Dateien werden nicht geladen, Berechtigungsfehler, leere Verzeichnisse

Lösung:

• Überprüfen Sie die Berechtigungen des Projektverzeichnisses (verwenden Sie ls -la im Terminal)
• Vergewissern Sie sich, dass der Projektpfad existiert und zugänglich ist
• Überprüfen Sie die Serverkonsolenprotokolle für detaillierte Fehlermeldungen
• Stellen Sie sicher, dass Sie nicht versuchen, auf Systemverzeichnisse außerhalb des Projektbereichs zuzugreifen