Guide Mode Full-Stack

Créez des applications web complètes avec édition de fichiers, terminal et aperçu en direct alimentés par l'IA.

Qu'est-ce que le Mode Full-Stack ?

Le Mode Full-Stack transforme votre chat en un environnement de développement complet. L'IA peut écrire, modifier et exécuter du code pendant que vous voyez les résultats en temps réel dans un IDE intégré avec explorateur de fichiers, terminal et aperçu en direct.

  • Opérations sur fichiers alimentées par l'IA (créer, modifier, supprimer)
  • Terminal intégré avec exécution de commandes
  • Aperçu en direct avec la technologie WebContainer
  • Support de projets multi-fichiers (React, Next.js, Vue, HTML/CSS/JS)
  • Synchronisation de code en temps réel entre l'IA et l'IDE

Fonctionnalités Clés

Le Mode Full-Stack offre une expérience de développement complète :

🔧 Outils IA

  • write_file - Créer de nouveaux fichiers ou écraser les existants
  • edit_content - Faire des modifications précises avec recherche et remplacement
  • read_file - Lire le contenu des fichiers pour le contexte

🖥️ IDE Intégré

  • Éditeur Monaco - Édition style VS Code avec coloration syntaxique
  • Terminal - Terminal bash complet avec historique des commandes
  • Aperçu en Direct - Voyez votre application s'exécuter en temps réel
  • Explorateur de Fichiers - Naviguez et gérez les fichiers du projet

💡 Comment Ça Marche

Le Mode Full-Stack utilise WebContainers pour exécuter Node.js directement dans votre navigateur. L'IA écrit du code dans un système de fichiers virtuel, et vous pouvez voir les changements instantanément dans le panneau d'aperçu.

Comment Utiliser le Mode Full-Stack

1. Activer le Mode Full-Stack

Cliquez sur le bouton Full-Stack dans la zone de saisie du chat pour activer le mode.

2. Décrivez Votre Projet

Dites à l'IA ce que vous voulez construire. Soyez précis sur les fonctionnalités et technologies.

3. Regardez l'IA Construire

L'IA créera des fichiers, installera les dépendances et configurera la structure de votre projet.

4. Itérez et Affinez

Demandez des changements, ajoutez des fonctionnalités ou corrigez des bugs via une conversation naturelle.

Modèles Supportés

Le Mode Full-Stack supporte divers modèles de projet :

⚛️ Next.js

Configuration complète Next.js 15 avec App Router, TypeScript et Tailwind CSS

⚡ Vite + React

Développement rapide avec Vite + React et remplacement de module à chaud

🌐 HTML/CSS/JS

HTML/CSS/JavaScript simple pour des prototypes rapides

📦 Node.js

Backend Node.js avec Express ou d'autres frameworks

Conseils et Meilleures Pratiques

✅ Best Practices

  • Soyez précis sur vos besoins et technologies préférées
  • Laissez l'IA terminer une tâche avant d'en demander une autre
  • Utilisez le terminal pour exécuter des commandes personnalisées si nécessaire
  • Vérifiez le panneau d'aperçu pour voir les changements en temps réel
  • Demandez des changements progressifs plutôt que des réécritures complètes

⚠️ Limitations

  • Les WebContainers s'exécutent dans le navigateur - certaines API Node.js peuvent ne pas fonctionner
  • Les grands projets peuvent prendre plus de temps à synchroniser et prévisualiser
  • Les connexions à des bases de données externes nécessitent une configuration supplémentaire
  • Des limites de taille de fichier s'appliquent au système de fichiers virtuel

Commencer

Prêt à construire votre premier projet ? Essayez un de ces prompts :

"Créez une landing page Next.js avec une section hero et un tableau de prix"
"Construisez une application todo React avec persistance dans le stockage local"
"Faites un tableau de bord avec des graphiques utilisant Recharts"
"Créez une API REST simple avec Express"

L'IA créera automatiquement la structure du projet, installera les dépendances et démarrera le serveur de développement !