Claude Code UI: Open-Source-Tool zur Verwaltung von Code-Projekten auf dem Handy und im Web

Claude Code UI ist ein kostenloses und quelloffenes Tool, das auf der von Anthropic bereitgestellten Claude Code CLI basiert. Es ermöglicht Entwicklern die Verwaltung von Code-Projekten über das Web oder das Mobiltelefon und bietet eine intuitive Schnittstelle, um Dateien zu bearbeiten, Befehle auszuführen und Sitzungen zu verfolgen. Benutzer können jederzeit und überall auf Projekte zugreifen, Code bearbeiten und mit Claude Code interagieren, was den Entwicklungsprozess rationalisiert. Das Tool unterstützt die geräteübergreifende Synchronisation und passt sich an verschiedene Bildschirmgrößen an, so dass es sich sowohl für einzelne Entwickler als auch für die Zusammenarbeit im Team eignet. Seine Hauptstärke liegt in der Integration von Terminal, Dateibrowser und Git, wodurch die Programmierung effizienter wird. Alle Funktionen sind standardmäßig deaktiviert und müssen aus Sicherheitsgründen manuell aktiviert werden.

Funktionsliste

• Integrierte Chat-Schnittstelle für Echtzeit-Interaktion mit Claude Code.
• Integrieren Sie das Terminal und führen Sie die Claude Code CLI-Befehle direkt aus.
• Durchsuchen des Dateibaums mit Unterstützung für das Erweitern/Kollabieren von Verzeichnissen zur Anzeige der Projektstruktur.
• Dateibearbeitung in Echtzeit mit integrierter Syntaxhervorhebung und Unterstützung für mehrere Programmiersprachen.
• Git-Integration, Ansicht, Staging, Änderungen übertragen, Zweigwechsel.
• Sitzungsmanagement zum Speichern, Wiederherstellen und Organisieren von Multiprojektsitzungen.
• Synchronisieren Sie zwischen verschiedenen Geräten und greifen Sie jederzeit von verschiedenen Geräten aus auf Ihre Projekte zu.
• Responsive Design für Desktop-, Tablet- und Mobilbildschirme.

Hilfe verwenden

Einbauverfahren

Um Claude Code UI zu verwenden, müssen Sie zunächst die Umgebung installieren und konfigurieren. Nachfolgend finden Sie die detaillierten Schritte:

1. Klonprojekt
   Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus, um das Projekt lokal zu klonen:

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

   Wechseln Sie dann in das Projektverzeichnis:

   cd claudecodeui
   

2. Installation von Abhängigkeiten
   Verwenden Sie npm, um die erforderlichen Abhängigkeiten zu installieren:

   npm install
   

   Um eine optimale Leistung zu gewährleisten, wird die neueste LTS-Version von Node.js empfohlen.

3. Konfiguration der Umgebung
   Kopieren Sie die Beispiel-Umgebungsdatei und bearbeiten Sie sie:

   cp .env.example .env
   

   Öffnen mit einem Texteditor .env setzen Sie die Portnummer nach Bedarf (z. B. 3001) und andere Konfigurationen. Standardmäßig wird die Claude Code UI in der Datei http://localhost:3001 Laufen.

4. eine Anwendung starten
   Starten Sie das Projekt im Entwicklungsmodus:

   npm run dev
   

   Nach dem Start öffnen Sie Ihren Browser und besuchen Sie http://localhost:3001(oder .env (der im Feld) angegebene Anschluss

5. Ermöglichende Tools
   Aus Sicherheitsgründen sind alle Claude Code Tools standardmäßig deaktiviert. Die Benutzer müssen sie manuell aktivieren:
   • Klicken Sie auf das Zahnradsymbol in der Seitenleiste, um die Schnittstelle "Werkzeugeinstellungen" zu öffnen.
   • Wählen Sie die Werkzeuge aus, die Sie aktivieren möchten (z. B. Dateibearbeitung, Git-Funktionen usw.).
   • Speichern Sie die Einstellungen und die Konfiguration wird lokal gespeichert.

Hauptfunktionen

1. die Chat-Schnittstelle

Die Benutzeroberfläche von Claude Code bietet eine integrierte Chat-Schnittstelle für die Interaktion mit Claude Code. Benutzer können Befehle in natürlicher Sprache eingeben, wie z. B. "ein Python-Skript generieren" oder "diesen Code interpretieren". Schritt für Schritt:

• Klicken Sie im Hauptbildschirm auf das Chat-Fenster.
• Geben Sie einen Befehl oder eine Frage ein, und Claude Code liefert das Ergebnis in Echtzeit über WebSocket.
• Chat-Protokolle werden automatisch gespeichert, mit Unterstützung für die Anzeige historischer Nachrichten, einschließlich Zeitstempel und Metadaten.
• Unterstützt die Ausgabe mehrerer Formate wie Text, Codeblöcke oder Dateiverweise.

2. integrierte Terminals

Die Terminalfunktion ermöglicht es dem Benutzer, Claude Code CLI-Befehle direkt auszuführen, ohne zu einem externen Terminal zu wechseln. Betriebsart:

• Öffnen Sie das Terminal-Panel am unteren Rand der Benutzeroberfläche.
• Geben Sie den CLI-Befehl ein, z. B. claude --help Hilfe anzeigen.
• Das Terminal unterstützt Echtzeit-Feedback und eignet sich für die Code-Generierung, das Debugging oder Projektmanagementaufgaben.

3. der Dokumentationsbaum und die Bearbeitung in Echtzeit

Die Dateibaumfunktion hilft den Benutzern beim Durchsuchen und Bearbeiten von Projektdateien:

• Zeigen Sie den Dateibaum in der linken Navigationsleiste an und klicken Sie auf ein Verzeichnis, um es zu erweitern oder zu reduzieren.
• CodeMirror bietet Syntaxhervorhebung und unterstützt Python, JavaScript und viele andere Sprachen.
• Speichern Sie direkt nach der Bearbeitung und die Änderungen werden in Echtzeit mit dem lokalen Projekt synchronisiert.
• Unterstützung für das Erstellen, Löschen oder Umbenennen von Dateien und Verzeichnissen.

4. die Git-Integration

Git-Funktionen vereinfachen die Versionskontrolle:

• Zeigen Sie den Status von Dateiänderungen im Git-Panel an.
• Wählen Sie eine Datei für das Staging (git add) oder eingereicht (git commit).
• Unterstützen Sie den Zweigwechsel, klicken Sie auf die Zweigliste, um den Zielzweig auszuwählen.
• Alle Vorgänge werden über die Schnittstelle ausgeführt, eine Befehlszeile ist nicht erforderlich.

5. die Verwaltung der Sitzungen

Die Sitzungsverwaltungsfunktion eignet sich für die Entwicklung mehrerer Projekte:

• Jede Projektsitzung wird automatisch mit den Chatprotokollen und dem Dateiverlauf gespeichert.
• Zeigen Sie alle Sitzungen im Fenster "Sitzungen" an, gruppiert nach Projekt und Zeitstempel.
• Unterstützung für das Umbenennen, Löschen oder Exportieren von Sitzungsprotokollen.
• Die geräteübergreifende Synchronisierungsfunktion ermöglicht die Fortsetzung der Arbeit auf Ihrem Telefon oder einem anderen Computer.

6. geräteübergreifende Nutzung

Das responsive Design von Claude Code UI ist mit mehreren Geräten kompatibel:

• Beim Zugriff auf Mobiltelefone passt sich die Benutzeroberfläche automatisch an ein einspaltiges Layout an, um eine einfache Bedienung durch Berührung zu ermöglichen.
• Die Desktop-Seite bietet ein lockereres Layout für größere Bildschirme.
• Sitzungen und Projektdaten werden über die Cloud synchronisiert, eine Internetverbindung muss sichergestellt sein.

caveat

• Prüfen Sie bei der ersten Verwendung .env Konfiguration in der Datei, um sicherzustellen, dass der Anschluss nicht belegt ist.
• Wählen Sie bei der Aktivierung von Tools nur die notwendigen Funktionen aus, um Sicherheitsrisiken zu verringern.
• Aktualisieren Sie den Projektcode regelmäßig mit den neuesten Funktionen:

  git pull origin main
  

Anwendungsszenario

1. Fernentwicklung
   Wenn Entwickler nicht an ihren Computern sitzen, können sie von ihren Mobiltelefonen aus auf die Claude Code UI zugreifen, um Code zu bearbeiten, Befehle auszuführen oder Git-Änderungen zu übertragen, damit ihre Arbeit weiterläuft.
2. Teamarbeit
   Teammitglieder können mehrere Projekte mit gemeinsamen Sitzungen verwalten, Codeänderungen und Chatprotokolle in Echtzeit für verteilte Teams anzeigen.
3. Lernen und Fehlersuche
   Schüler oder Anfänger können Claude Code über die Chat-Schnittstelle Fragen stellen, komplexen Code schnell verstehen und mit den Dateibearbeitungsfunktionen das Programmieren üben.
4. Schnelles Prototyping
   Entwickler können mit Hilfe der Terminal- und Dateibearbeitungsfunktionen schnell Code-Prototypen erstellen, Ideen testen und in Git-Repositories übertragen.

QA

1. Ist für Claude Code UI eine Internetverbindung erforderlich?
   Ja, Claude Code UI erfordert eine Internetverbindung, um auf die KI-Modelle von Claude Code zuzugreifen. Einige Funktionen (z. B. die Dateibearbeitung) unterstützen jedoch die lokale Zwischenspeicherung und sind offline verfügbar.
2. Welche Programmiersprachen werden unterstützt?
   Der integrierte CodeMirror-Editor unterstützt Syntaxhervorhebung und -bearbeitung in Python, JavaScript, Java, C++ und vielen anderen Sprachen.
3. Wie kann ich meine Werkzeuge sichern?
   Alle Tools sind standardmäßig deaktiviert und müssen vom Benutzer manuell aktiviert werden. Es wird empfohlen, nur die notwendigen Funktionen zu aktivieren und sie regelmäßig zu überprüfen .env Konfiguration.
4. Kann ich zwischen verschiedenen Geräten synchronisieren?
   Ja, Sitzungen und Projektdaten werden über die Cloud synchronisiert, und die Arbeit kann nach dem Einloggen von jedem Gerät aus fortgesetzt werden.