Présentation détaillée du projet Claude Code UI

Aperçu du projet

Claude Code UI est une interface utilisateur open source, conviviale pour le web et le mobile, conçue spécifiquement pour la CLI officielle de Claude Code d'Anthropic. Ce projet permet aux utilisateurs de visualiser et de gérer toutes les sessions et projets Claude Code, localement ou à distance, de la même manière qu'avec la CLI. Cela offre aux utilisateurs une interface complète fonctionnant partout.

Fonctionnalités du projet

🎨 Conception réactive

• Compatibilité multiplateforme : Prise en charge transparente des ordinateurs de bureau, tablettes et appareils mobiles
• Disposition adaptative : Barre latérale pliable et priorité intelligente du contenu
• Compatible tactile : Gestes de balayage et navigation tactile
• Navigation mobile : Barre d'onglets inférieure pour une utilisation facile avec le pouce

💬 Interface de chat interactive

• Chat intégré : Interface de chat intégrée pour une communication transparente avec Claude Code
• Communication en temps réel : Diffusion en continu des réponses de Claude via une connexion WebSocket
• Gestion des sessions : Reprendre des conversations précédentes ou démarrer de nouvelles sessions
• Historique des messages : Historique complet des conversations, incluant les horodatages et les métadonnées
• Prise en charge de plusieurs formats : Texte, blocs de code et références de fichiers

🖥️ Fonctionnalité de terminal intégrée

• Accès direct à la CLI : Accès direct à la CLI Claude Code via une fonctionnalité de shell intégrée
• Gestion des processus : Génération et gestion des processus intégrées à la CLI Claude
• Exécution de commandes : Prise en charge de toutes les commandes de la CLI Claude Code

📁 Explorateur de fichiers

• Arborescence de fichiers interactive : Arborescence de fichiers interactive avec coloration syntaxique et édition en temps réel
• Édition de fichiers en temps réel : Lire, modifier et enregistrer des fichiers directement dans l'interface
• Coloration syntaxique : Prise en charge de plusieurs langages de programmation
• Opérations sur les fichiers : Créer, renommer, supprimer des fichiers et des répertoires

💾 Persistance des sessions

• Sauvegarde automatique : Toutes les conversations sont automatiquement sauvegardées
• Organisation des sessions : Sessions regroupées par projet et horodatage
• Opérations sur les sessions : Renommer, supprimer et exporter l'historique des conversations
• Synchronisation inter-appareils : Accéder aux sessions depuis n'importe quel appareil

Architecture technique

Diagramme d'architecture système

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

Pile technologique du backend

• Serveur Express : Fournit une API RESTful et un service de fichiers statiques
• Serveur WebSocket : Utilisé pour le chat et la communication d'actualisation de projet
• Intégration de la CLI Claude : Génération et gestion des processus
• Gestion des sessions : Analyse JSONL et persistance des conversations
• API du système de fichiers : Fournit un explorateur de fichiers pour les projets

Pile technologique du frontend

• React 18 : Architecture de composants moderne, utilisant les Hooks
• CodeMirror : Éditeur de code avancé, avec coloration syntaxique
• Vite : Outil de construction rapide et serveur de développement
• Tailwind CSS : Framework CSS axé sur les utilitaires

Installation et configuration

Exigences système

• Node.js v16 ou version ultérieure
• Claude Code CLI installé et configuré

Étapes d'installation

1. Cloner le dépôt :

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

2. Installer les dépendances :

   npm install
   

3. Configurer l'environnement :

   cp .env.example .env
   # Modifier le fichier .env selon les besoins
   

4. Démarrer l'application :

   # Mode développement (avec rechargement à chaud)
   npm run dev
   

5. Ouvrir le navigateur :

   • Environnement de développement : http://localhost:3001

Paramètres de sécurité

🔒 Rappel de sécurité important

Tous les outils Claude Code sont désactivés par défaut. Cela empêche l'exécution automatique d'opérations potentiellement dangereuses.

Pour utiliser toutes les fonctionnalités de Claude Code, vous devez activer manuellement les outils :

1. Ouvrir les paramètres des outils : Cliquez sur l'icône d'engrenage dans la barre latérale
2. Activer sélectivement : N'activez que les outils dont vous avez besoin
3. Appliquer les paramètres : Vos préférences seront enregistrées localement

Méthode recommandée : Commencez par activer les outils de base, puis ajoutez progressivement plus de fonctionnalités selon vos besoins.

Fonctionnalités clés

Gestion de projet

• Découverte automatique des projets : L'interface utilisateur découvre automatiquement les projets Claude Code depuis ~/.claude/projects/
• Navigateur de projets visuel : Affiche tous les projets disponibles avec leurs métadonnées et le nombre de sessions
• Opérations sur les projets : Renommer, supprimer et organiser les projets
• Navigation intelligente : Accès rapide aux projets et sessions récents

Gestion des fichiers

• Navigation dans la structure du projet : Avec des fonctionnalités de navigation extensible/réductible
• Édition en temps réel : Modifier les fichiers directement dans l'interface
• Opérations sur les fichiers : Fonctionnalités complètes de gestion des fichiers et des répertoires

Gestion des sessions

• Stockage persistant : Toutes les sessions sont automatiquement sauvegardées
• Historique : Suivi complet de l'historique des conversations
• Prise en charge de plusieurs sessions : Gérer plusieurs sessions de projet simultanément

Dépannage

Problème courant 1 : L'interface utilisateur n'affiche aucun projet ou une liste de projets vide

Solution :

• Assurez-vous que la CLI Claude est correctement installée
• Exécutez la commande claude dans au moins un répertoire de projet pour l'initialiser
• Vérifiez que le répertoire ~/.claude/projects/ existe et dispose des permissions appropriées

Problème courant 2 : Fichiers non chargés, erreurs de permission, répertoires vides

Solution :

• Vérifiez les permissions du répertoire du projet (utilisez ls -la dans le terminal)
• Vérifiez que le chemin du projet existe et est accessible
• Consultez les journaux de la console du serveur pour des messages d'erreur détaillés
• Assurez-vous de ne pas tenter d'accéder à des répertoires système en dehors de la portée du projet