Comment Coderblock transforme un simple prompt en application web full-stack

Une application peut naître d’une simple phrase. Mais pour transformer cette phrase en un produit fonctionnel, il faut bien plus : une interface, une logique applicative, des données persistantes, une authentification, des autorisations, des fichiers, des paiements et une infrastructure.

Avec Coderblock, ces différentes couches ne sont pas développées séparément. Décrivez ce que vous souhaitez créer et la plateforme génère une véritable application web full-stack, prête à être testée dans un environnement de développement en direct. Dès lors, la conversation devient votre espace de travail : vous pouvez voir ce qui a été créé, le tester et continuer à le modifier en décrivant simplement le résultat souhaité.

Le premier prompt n’est donc pas une spécification définitive. C’est le début d’une conversation avec votre produit.

Tout commence par la description du produit

Le premier prompt n’a pas besoin de contenir toutes les réponses. Il doit fournir à l’agent suffisamment de contexte pour comprendre ce que vous créez, à qui le produit s’adresse et quels sont les parcours les plus importants. Par exemple :

Crée une plateforme de réservation pour une petite salle de sport. Les visiteurs doivent pouvoir consulter les cours, créer un compte, réserver une place et voir leurs prochaines réservations. Le personnel a besoin d’un tableau de bord d’administration pour gérer les cours et les présences.

Ces quelques lignes contiennent déjà plusieurs éléments liés : un catalogue public, des comptes utilisateurs, des réservations, des espaces personnels et un rôle d’administrateur. Coderblock utilise ces informations pour construire l’application de bout en bout, du frontend au backend. Pour démarrer plus rapidement, vous pouvez également choisir l’un des 32 modèles de produits disponibles, couvrant des cas d’usage comme l’e-commerce, les réservations, les tableaux de bord, le bien-être et le gaming. Plus de 20 modèles de fonctionnalités permettent aussi d’ajouter rapidement des éléments courants tels que l’authentification, les paiements, les paniers, le chat et les panneaux d’administration.

Le modèle vous offre une base concrète. La conversation vous permet de la transformer en votre propre version du produit.

De la description à l’interface en quelques secondes

Coderblock génère le frontend avec React, Vite, TypeScript et Tailwind CSS, puis le met immédiatement à disposition sur une adresse de développement dédiée, <app>.coderblock.dev. C’est là que l’idée devient enfin quelque chose que vous pouvez voir et utiliser.

C’est précisément lorsqu’un produit commence à prendre forme que de nombreuses décisions deviennent plus faciles à prendre. Un tableau de bord peut proposer toutes les fonctionnalités nécessaires, mais présenter une hiérarchie peu efficace. Un tableau peut fonctionner correctement tout en étant trop dense sur mobile. Un parcours peut être pertinent, mais comporter une étape superflue.

Au lieu de revenir au brief initial, vous pouvez simplement poursuivre la conversation :

• Fixe la barre de navigation et ajoute un menu pour les appareils mobiles.
• Affiche le nombre de places encore disponibles sur la fiche de chaque cours.
• Ajoute des filtres par instructeur et par niveau de difficulté.
• Crée une vue hebdomadaire des présences pour le personnel.
• Utilise une palette de couleurs plus apaisante et augmente le contraste des formulaires.

L’aperçu se met à jour en quelques secondes grâce au rechargement à chaud.

Le résultat est un cycle très simple : décrivez → observez → testez → modifiez

À chaque étape, le produit se rapproche un peu plus de ce que vous aviez en tête.

Quand l’interface devient une véritable application

À ce stade, vous ne travaillez plus sur une simple interface.

Un véritable produit a besoin de données persistantes, d’utilisateurs, d’autorisations et d’une logique backend. C’est pourquoi, pour les applications web standard, Coderblock connecte le frontend à un projet Supabase dédié comprenant Postgres, Supabase Auth, Storage, Row Level Security et Deno Edge Functions.

L’agent peut concevoir et mettre à jour le schéma de la base de données directement à partir de la conversation. Dans le cas de la salle de sport, par exemple, il peut traduire le produit en entités telles que les cours, les calendriers, les profils et les réservations, puis définir les relations nécessaires à leur fonctionnement commun.

Vous pouvez continuer à raisonner uniquement en termes de produit.

Ajoute une liste d’attente lorsqu’un cours est complet et permet au personnel d’admettre la personne suivante lorsqu’une place se libère.

Cette demande ne modifie pas seulement un écran. Elle peut nécessiter de nouvelles données, de nouvelles règles et de nouveaux comportements. Coderblock gère ces changements au sein de la même application, sans vous demander de configurer manuellement des routes d’API ou des migrations.

Depuis l’onglet Backend de l’éditeur, vous pouvez tout de même voir ce qui se trouve en coulisses : les tables, les utilisateurs authentifiés, le stockage et les fonctions. Pour les projets Enterprise Web Platform, Coderblock utilise à la place une architecture backend reposant sur Python, FastAPI et Neon Postgres.

L’accès aux données dépend de l’identité de l’utilisateur

Dès qu’il existe des comptes et des données personnelles, une autre question essentielle se pose : qui peut voir quoi ? Vous pouvez le décrire directement dans la conversation :

Ajoute une connexion et des comptes utilisateurs, avec des accès distincts pour les clients et le personnel.

Coderblock peut configurer Supabase Auth, les pages d’inscription et de connexion, la gestion des sessions et les routes protégées. Une connexion via les réseaux sociaux peut également être ajoutée sur demande. Chaque application comprend déjà une table de profils et une structure de base pour les rôles, que l’agent peut utiliser pour créer des expériences différentes pour les clients, les collaborateurs et les administrateurs.

Mais authentifier un utilisateur ne suffit pas. Les règles d’accès doivent s’appliquer jusqu’au niveau des données. Avec Row Level Security, par exemple, vous pouvez faire en sorte que chaque client ne voie que ses propres réservations, tandis que le personnel peut accéder à la vue d’administration.

Il n’est donc pas nécessaire de créer manuellement un système JWT, de gérer les mots de passe avec une logique personnalisée ou de créer des tables dédiées aux identifiants. L’identité est gérée par Supabase Auth, tandis que les politiques définissent les actions que chaque utilisateur peut effectuer sur les données.

Les paiements commencent eux aussi dans la conversation

Lorsque le produit est prêt à être monétisé, vous n’avez pas besoin de changer d’outil. Il vous suffit d’ajouter une nouvelle demande :

Permets aux membres de payer 9,99 € par mois.

Coderblock peut gérer l’intégralité du parcours Stripe : les produits, les prix, le paiement, l’interface et la logique backend. Dans le mode géré par défaut, l’agent configure un compte Stripe pour le projet après avoir recueilli quelques informations de base, comme le pays et le nom de l’entreprise. Aucune clé API n’est nécessaire et la plateforme gère le webhook de paiement. La configuration permettant de recevoir les paiements et la vérification de l’identité peuvent être effectuées ultérieurement grâce au lien Stripe hébergé fourni par l’agent.

Si vous préférez utiliser votre propre compte Stripe, vous pouvez choisir le mode BYOK. Dans ce cas, Coderblock demande STRIPE_SECRET_KEY par l’intermédiaire d’une invite sécurisée pour les variables d’environnement, puis configure automatiquement le webhook. Le secret reste côté serveur et n’est ajouté ni au code généré ni à la conversation. La même approche est utilisée pour les autres intégrations nécessitant des identifiants. Les applications peuvent également intégrer des fonctionnalités d’IA au moyen de Coderblock AI Gateway, compatible avec OpenAI, en utilisant une clé API propre au projet et une facturation à l’usage.

Quand le projet se développe, les Agent Teams entrent en jeu

Plus une application devient complexe, plus les décisions concernent des domaines différents.

Un nouveau panneau d’administration peut nécessiter simultanément des modifications du frontend, de la base de données, des autorisations et de la sécurité. Une nouvelle fonctionnalité peut avoir des conséquences sur l’UX et sur la manière dont les utilisateurs interagissent avec le produit.

C’est pourquoi Coderblock propose les Agent Teams : des agents d’IA spécialisés dans des domaines comme le frontend, le backend, l’UX, la sécurité et le marketing. Vous pouvez les faire intervenir au sein du projet pour traiter des aspects précis sans perdre le contexte de l’application. L’avantage ne réside pas simplement dans le fait de disposer de plusieurs agents. Il tient à la possibilité de conserver une vision unifiée du produit tout en abordant différents problèmes avec des compétences spécialisées.

Le prompt initial ne devient donc jamais un document immuable. Il reste le point de départ d’une conversation qui évolue avec l’application.

De l’environnement de développement à la production

Lorsque le produit est prêt, le passage de l’aperçu à la production est tout aussi direct. Avec Publish, l’application est déployée sur <app>.coderblock.app, avec SSL inclus. Les publications suivantes peuvent profiter de mises à jour à chaud rapides, ce qui vous permet de continuer à améliorer le produit sans recréer tout le processus de déploiement. Si vous souhaitez utiliser un domaine personnalisé, vous pouvez le connecter depuis Settings → Domains en suivant l’assistant de configuration DNS. Vous pouvez également acheter le domaine directement dans Coderblock : le paiement, le DNS et le SSL sont alors gérés au sein de la plateforme. Pour les équipes qui souhaitent intégrer Coderblock à leur workflow de développement, une intégration avec GitHub est également disponible.

Une conversation qui devient un produit

Le parcours commence par une description, mais ne s’arrête pas à la première génération.

Décrivez l’idée. Observez ce qui prend forme. Testez l’application. Ajoutez du contexte. Affinez. Publiez.

Tel est le modèle de développement conversationnel de Coderblock. La valeur du prompt ne réside pas dans votre capacité à prévoir chaque détail de l’application avant de commencer. Elle consiste à donner à l’IA suffisamment de contexte pour créer une première version fonctionnelle, tout en conservant assez de souplesse pour continuer à l’améliorer avec vous.

Autrement dit, vous n’avez pas besoin de tout concevoir avant de commencer à construire. Vous pouvez construire, observer et décider au fur et à mesure.