Création d'un estimateur de coûts IA : parser les sorties LLM en composants d'interface interactifs

En B2B et services, l’estimation de prix est l’étape critique. L’estimateur classique est un formulaire avec des dizaines de checkboxes, dropdowns et champs - la friction tue le taux de complétion. Et si l’utilisateur décrivait le besoin en texte brut, et le système générait instantanément une estimation détaillée et interactive ?

C’est la puissance d’un estimateur IA. Avec des LLM, le langage naturel non structuré devient des données fiables. Ici : architecture frontend et backend, structured outputs, validation Zod, et le JSON lié aux contrôles React.

1. Backend : application du JSON strict avec des sorties structurées LLM

Le plus grand défi des outils basés sur l’IA est la fiabilité. Si vous demandez simplement à un LLM de « renvoyer JSON », il peut occasionnellement générer des retours à la ligne, des formats non valides ou modifier les noms de clés. En production, cela brise votre logique d'analyse frontale.

Pour résoudre ce problème, les API modernes (comme OpenAI, Gemini et Anthropic) proposent des sorties structurées. Cette fonctionnalité force le modèle à répondre strictement selon un schéma JSON. Nous définissons ce schéma à l'aide de Zod, une bibliothèque de déclaration et de validation de schéma typeScript. Le LLM agit comme un moteur d'extraction, mappant la description libre de l'utilisateur directement dans notre structure définie.

2. Définition du schéma Zod de l'estimateur

Pour une estimation de construction ou de rénovation, nous décrivons un schéma qui capture les dimensions du projet (par exemple, superficie, nombre de pièces), les exigences spécifiques (remplacement du câblage, démolition) et une liste des éléments de coût estimés. Voici un exemple TypeScript de la façon dont nous définissons la structure JSON cible :

Tout d'abord, nous définissons `EstimateSchema` contenant des paramètres de base tels que `area` et `rooms`, des indicateurs booléens pour `demolition` et `rewiring`, et un tableau `estimateItems` où chaque élément a une `tâche`, `category` et `baseCost`. Nous attachons des descriptions aux champs (par exemple, `describe("Zone en mètres carrés")`) pour aider le LLM à comprendre quelles données doivent être extraites dans chaque propriété.

3. Connexion des données IA à l'état de l'interface utilisateur de React

Une fois que le backend analyse l'entrée et renvoie l'objet JSON validé, l'application frontend le charge dans l'état React. Cela crée un flux interactif et hautement réactif :

• Chargement initial : l'utilisateur soumet sa description textuelle. Nous montrons un indicateur de chargement. Une fois que l'API renvoie le JSON, nous remplissons l'état du composant local avec les valeurs d'extraction AI.
• Calculs basés sur des formules : tandis que l'IA fournit les éléments d'estimation initiale et les prix de référence, le calcul du coût final est calculé localement à l'aide des formules React. Si l'utilisateur modifie les variables, le coût est mis à jour instantanément sans renvoyer de requêtes au LLM.
• Système de contrôle hybride : l'interface utilisateur restitue les contrôles (curseurs, bascules et listes déroulantes) qui sont directement liés à l'état. Cela permet à l'utilisateur de corriger l'IA. Si l'IA a oublié qu'elle avait besoin de remplacer le câblage, l'utilisateur allume simplement l'interrupteur à bascule « Recâblage ».

4. Rendu de widgets visuels interactifs

Pour offrir une expérience de haute qualité, l'interface doit transformer les chiffres bruts en graphiques visuellement attrayants et en widgets faciles à utiliser :

• Curseurs interactifs : mappez le paramètre « zone » à un curseur de plage HTML personnalisé. Faire glisser le curseur augmente le multiplicateur de zone, augmentant ainsi de manière dynamique le coût de la main-d'œuvre et des matériaux de chaque élément de campagne.
• Graphiques dynamiques : regroupez les éléments par catégorie (par exemple, démolition, finitions, électricité) et affichez-les dans un graphique circulaire SVG dynamique ou des barres de progression. Cela communique visuellement la répartition du budget en un coup d’œil.
• Accordéons modifiables : présentez les éléments d'estimation regroupés par catégorie dans des listes d'accordéon pliables. Permettez à l'utilisateur d'ajuster le prix unitaire, de supprimer les tâches redondantes ou d'ajouter des notes personnalisées à des éléments individuels.

5. Plan de mise en œuvre technique

La configuration frontale se compose d'une zone de texte pour la saisie de la description, suivie du tableau de bord de l'estimateur. Nous gérons l'état des variables comme « zone » et « câblage » à l'aide des états de hook React. Dans la fonction de rendu, nous calculons les totaux : nous multiplions les coûts de base par la valeur actuelle du curseur de zone, en ajoutant des taux forfaitaires pour la démolition si cette option est sélectionnée. Un panneau récapitulatif affiche la somme recalculée à côté de curseurs interactifs.

En combinant l'extraction de contexte flexible des LLM avec les contraintes strictes et la boucle de rétroaction rapide de React et TypeScript, les entreprises peuvent créer des moteurs de devis B2B automatisés qui semblent intelligents, rapides et totalement fiables.