Etude de cas
Fenado AI
Plateforme d'IA agentique qui transforme des instructions textuelles en applications web fonctionnelles.
50K
utilisateurs generant des apps
Full-stack
output a partir d'une seule instruction
Temps reel
generation WebSocket
Le defi
Une IA qui ecrit du code, pas des fragments
La plupart des outils de code par IA produisent des fragments. Une fonction ici, un composant la. Le fondateur de Fenado voulait autre chose : une plateforme ou un utilisateur tape "construis-moi un systeme de gestion d'inventaire" et recoit une application fonctionnelle avec un frontend React, un backend FastAPI, une base de donnees MongoDB et une authentification JWT. Pas de cablage manuel. Pas d'assemblage par copier-coller.
Le probleme technique avait trois couches. Premierement, l'agent IA devait decomposer une instruction vague en ecrans specifiques, modeles de donnees et routes API. Deuxiemement, chaque ecran devait s'afficher en temps reel via WebSockets pour que les utilisateurs puissent voir leur application prendre forme. Troisiemement, l'output devait compiler et fonctionner. Des imports casses ou des dependances manquantes auraient detruit la confiance des la premiere generation.
Le modele commercial exigeait une facturation par abonnement Stripe a trois niveaux ($199/mois, $1 999/mois, $9 999/mois), une collaboration d'equipe avec des controles de budget par membre et une application de bureau macOS pour le developpement local. Tout cela devait etre livre comme un seul produit.
Ce que nous avons construit
Instruction en entree. Application en sortie.
Pipeline d'IA agentique avec LangChain
Un utilisateur soumet une instruction textuelle. Les agents LangChain decomposent cette instruction en un plan structure : ecrans, modeles de donnees, endpoints API et hierarchie de composants. Chaque agent gere une responsabilite. L'agent planificateur cartographie l'architecture de l'application. L'agent designer genere les mises en page des ecrans. L'agent code ecrit les composants React et les routes FastAPI. Les agents se coordonnent via un graphe d'etat partage, transmettant les artefacts sans re-interroger.
Generation en temps reel par WebSockets
Les utilisateurs regardent leur application s'assembler dans le navigateur. A chaque fois qu'un agent LangChain termine une etape, le serveur envoie le resultat via une connexion WebSocket. Les designs d'ecran apparaissent un par un. Les fichiers de code affluent dans l'arborescence du projet. Les indicateurs de progression montrent quel agent est actif et ce qu'il produit. Cette boucle de retour a transforme une attente de 60 secondes en une experience de construction captivante qui a garde les utilisateurs sur la page.
Output d'application full-stack
Chaque application generee comprend un frontend React 19 avec des composants shadcn/ui, un backend FastAPI avec MongoDB et une authentification JWT integree. Le systeme de templates impose une structure de projet coherente : les routes API suivent les conventions RESTful, les modeles de base de donnees incluent la validation, et le frontend se connecte au backend via des clients API types. Les utilisateurs telechargent ou deploient un projet qui se lance avec une seule commande.
Facturation Stripe et collaboration d'equipe
Trois niveaux d'abonnement Stripe controlent l'acces : Business a $199/mois, Business Plus a $1 999/mois et Business Express a $9 999/mois. Chaque niveau definit des limites de generation et des portes de fonctionnalites. Les proprietaires d'equipe invitent des membres par email, assignent des budgets par membre et suivent l'utilisation de la generation dans l'organisation. Les webhooks Stripe gerent les mises a niveau, les retrogradations et les paiements echoues sans intervention manuelle.
Infrastructure de la plateforme
- Generation de design par IA ecran par ecran. L'agent planificateur cartographie chaque ecran avant que l'agent code ne l'ecrive, pour que l'output suive une hierarchie visuelle coherente.
- Application de bureau macOS pour le developpement local. Les utilisateurs generent des applications dans le navigateur, puis les ouvrent dans l'app de bureau pour editer, executer et deployer depuis leur machine.
- Authentification Firebase avec controle d'acces base sur les roles, separant les utilisateurs individuels des proprietaires d'equipe et des membres d'organisation.
- Systeme de templates avec des valeurs par defaut definies : FastAPI + MongoDB en backend, React 19 + shadcn/ui en frontend, et authentification JWT pre-cablee sur les deux couches.
Architecture
Comment fonctionne le pipeline
Etape 1
Reception de l'instruction
L'utilisateur decrit ce qu'il veut en texte brut. L'agent planificateur analyse l'instruction en une specification structuree : nombre d'ecrans, entites de donnees, relations et exigences d'authentification.
Etape 2
Design des ecrans
L'agent designer genere des mises en page ecran par ecran. Chaque ecran correspond a une route dans l'application finale. Le placement des composants, les liaisons de donnees et le flux de navigation sont definis avant l'ecriture du moindre code.
Etape 3
Generation de code
L'agent code ecrit les composants React, les routes FastAPI, les modeles MongoDB et le middleware JWT. Chaque fichier est transmis au client par WebSockets des qu'il est termine. L'output suit les conventions du systeme de templates.
Etape 4
Sortie
Le projet assemble comprend un frontend fonctionnel, un backend, un schema de base de donnees et une couche d'authentification. Les utilisateurs telechargent le projet ou l'ouvrent dans l'app de bureau macOS. L'application se lance avec une seule commande.
Resultats
Chiffres de production
50K
utilisateurs generant des applications web fonctionnelles
Full-stack
frontend + backend + API a partir d'une seule instruction
3 niveaux
plans d'abonnement Stripe de $199 a $9 999/mois
Nous contacter
Demarrer une conversation
Parlez-nous de votre projet. Nous vous repondrons sous 24 heures avec un plan clair, un calendrier estime et une fourchette de prix.
Base a
EAU et Inde
Message reçu
Nous examinerons votre projet et vous répondrons sous 24 heures.
Vous pouvez aussi nous écrire à hello@savibm.com