Claudable - Constructeur d'applications Web open-source basé sur des agents IA

Aperçu du projet

Claudable est un puissant constructeur d'applications Web basé sur Next.js, qui combine les capacités avancées des agents IA de Claude Code (prenant également en charge Cursor CLI) avec l'expérience de construction d'applications simple et intuitive de Lovable. Décrivez simplement votre idée d'application - "Je veux une application de gestion de tâches avec un mode sombre" - et regardez Claudable générer instantanément le code et afficher un aperçu en temps réel de l'application fonctionnelle.

Ce projet open-source vous permet de construire et de déployer facilement et gratuitement des applications Web professionnelles.

Fonctionnalités clés

🤖 Prise en charge puissante des agents IA

• Claude Code: L'agent de codage IA avancé d'Anthropic, doté de capacités de raisonnement élevées, d'exécution locale et de multiples modes de fonctionnement (interactif, édition automatique, entièrement automatique).
• Cursor CLI: Un agent de codage intelligent, adapté aux tâches de codage complexes.
• Prise en charge native de MCP: Exploite pleinement les capacités des agents Claude Code et Cursor CLI.

💻 Expérience de développement

• Langage naturel vers code: Décrivez simplement ce que vous voulez construire, et Claudable générera du code Next.js prêt pour la production.
• Aperçu en temps réel: Visualisez instantanément les modifications grâce au rechargement à chaud, et voyez les changements en direct pendant que l'IA construit l'application.
• Démarrage sans configuration: Pas de sandbox complexe, de clés API ou de configuration de base de données requises - commencez à construire immédiatement.
• Génération d'UI esthétiques: Générez de belles interfaces utilisateur avec Tailwind CSS et shadcn/ui.

🚀 Déploiement et intégration

• Déploiement en un clic: Poussez votre application vers Vercel en un seul clic, sans configuration.
• Intégration GitHub: Contrôle de version automatique et configuration de déploiement continu.
• Base de données Supabase: Connectez directement une base de données PostgreSQL prête pour la production à votre projet.
• Détection automatique des erreurs: Détecte les erreurs dans l'application et les corrige automatiquement.

💰 Avantages en termes de coûts

• Entièrement gratuit: Pas de frais d'abonnement supplémentaires en dehors du constructeur d'applications.
• Open-source: Licence MIT, utilisable à des fins commerciales.
• Pas de verrouillage fournisseur: Vous possédez le code généré et pouvez le modifier ou l'héberger n'importe où.

Architecture technique

Pile technologique front-end

• Next.js: Framework React moderne.
• Tailwind CSS: Framework CSS axé sur l'utilitaire.
• shadcn/ui: Bibliothèque de composants UI moderne.
• TypeScript: JavaScript typé.

Pile technologique back-end

• Python: Serveur API back-end.
• SQLite: Base de données pour le développement local.
• PostgreSQL: Base de données pour l'environnement de production (optionnel).

Intégration des agents IA

• Claude Code: Agent de codage IA principalement recommandé.
• Cursor CLI: Outil de codage intelligent alternatif.
• Prise en charge MCP: Intégration native du Model Context Protocol.

Installation et configuration

Configuration système requise

# Composants nécessaires
- Node.js 18+
- Python 3.10+
- Claude Code ou Cursor CLI (connecté)
- Git

Installation rapide

# Cloner le dépôt
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# Installer toutes les dépendances (Node.js et Python)
npm install

# Démarrer le serveur de développement
npm run dev

Adresses d'accès à l'application

• Front-end: http://localhost:3000
• Serveur API: http://localhost:8080
• Documentation API: http://localhost:8080/docs

Note : Les ports sont détectés automatiquement ; si les ports par défaut sont occupés, le prochain port disponible sera attribué.

Configuration manuelle (optionnel)

# Configuration front-end
cd apps/web
npm install

# Configuration back-end
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

Processus d'utilisation

1. Connecter l'agent IA

Assurez-vous d'abord d'être connecté à Claude Code ou Cursor CLI :

# Connexion Claude Code
claude
> /login

# Connexion Cursor CLI
cursor-agent login

2. Démarrer Claudable

npm run dev

3. Décrire les exigences du projet

Décrivez l'application que vous souhaitez construire en langage naturel, par exemple :

• "Créer une application de gestion de tâches avec authentification utilisateur."
• "Réaliser un blog personnel prenant en charge le mode sombre."
• "Construire un site e-commerce simple."

4. Regarder l'IA générer le code

L'IA générera automatiquement la structure du projet et le code, et vous pourrez voir un aperçu en temps réel.

5. Déployer en production

Publiez votre application en un clic grâce à la fonction de déploiement Vercel intégrée.

Gestion de la base de données

Développement local

• Utilise une base de données SQLite, située dans data/cc.db.
• Initialisation automatique lors de la première exécution.

Commandes utiles

# Sauvegarder la base de données
npm run db:backup

# Réinitialiser la base de données
npm run db:reset

# Nettoyer toutes les dépendances
npm run clean

Intégration de services

Intégration GitHub

1. Obtenir un jeton : GitHub Personal Access Tokens → Generate new token (classic) → Select repo scope
2. Connecter : Settings → Service Integrations → GitHub → Enter token → Create or connect repository

Déploiement Vercel

1. Obtenir un jeton : Vercel Account Settings → Create Token
2. Connecter : Settings → Service Integrations → Vercel → Enter token → Create new project for deployment

Base de données Supabase

1. Obtenir les identifiants : Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: Clé publique client
   • Service Role Key: Clé de rôle de service (côté serveur)

Résolution des problèmes courants

Erreurs de permission

# Vérifier l'utilisateur actuel
whoami

# Changer la propriété du répertoire du projet
sudo chown -R $(whoami):$(whoami) ~/Claudable

Problèmes de dépendances

# Nettoyer toutes les dépendances et réessayer
npm run clean
npm install

Notes pour les utilisateurs WSL

Assurez-vous d'exécuter Claude Code sous un compte utilisateur et non sous le compte root.

Scénarios d'application

1. Prototypage rapide

• Les entrepreneurs valident des idées de produits.
• Les chefs de produit créent des prototypes de démonstration.
• Les designers créent des maquettes interactives.

2. Apprentissage du développement Web

• Les débutants en programmation observent comment l'IA transforme les exigences en code.
• Comprendre l'architecture des applications Web modernes et les processus de développement.

3. Automatisation du développement front-end

• Les développeurs front-end automatisent les tâches de développement répétitives.
• Mise en place rapide de frameworks de projet et de composants UI.

4. Développement No-code/Low-code

• Les designers ou marketeurs réalisent indépendamment des applications Web simples.
• Réduire la dépendance vis-à-vis des développeurs professionnels.

Avantages du projet

Rentabilité

• Entièrement gratuit: Pas de frais d'abonnement ni de restrictions d'utilisation.
• Pas de frais API supplémentaires: Utilise directement les abonnements Claude ou Cursor existants.

Vitesse de développement

• Développement en quelques minutes: Transformez une idée en application fonctionnelle en quelques minutes seulement.
• Prêt pour la production: Génère un code propre et maintenable, conforme aux meilleures pratiques de l'industrie.
• Retour d'information instantané: La fonction d'aperçu en temps réel raccourcit le cycle de feedback de développement.

Flexibilité

• Prise en charge de plusieurs agents IA: Prend en charge Claude Code et Cursor CLI.
• Pas de verrouillage fournisseur: Propriété complète du code.
• Personnalisable: Le code généré peut être modifié et étendu.

Plans de développement futurs

Selon la feuille de route du projet, les fonctionnalités à venir incluent :

• Nouveaux agents CLI: Prise en charge de davantage d'outils de codage IA.
• Points de contrôle de conversation: Sauvegarde et restauration de l'état de la conversation/base de code.
• Intégration MCP améliorée: Intégration native approfondie de MCP.
• Système de sous-agents: Architecture de système d'agents améliorée.

Informations Open-Source

• GitHub: https://github.com/opactorai/Claudable
• Développeur: OPACTOR (https://opactor.ai)
• Support communautaire: Une communauté open-source active, avec des mises à jour et des améliorations continues.

Conclusion

Claudable représente un nouveau paradigme dans le développement Web, transformant directement les descriptions en langage naturel en applications Web déployables grâce à des agents IA. Il réduit non seulement la barrière à l'entrée du développement Web, mais améliore également considérablement l'efficacité du développement, en faisant un outil indispensable dans la boîte à outils du développeur moderne.