Uno stimatore di costi con IA: dall’output del LLM a componenti UI interattivi

In B2B e servizi, la stima di prezzo è il passo critico del percorso. Lo stimatore classico è un form con decine di checkbox, dropdown e campi - e l’attrito uccide il tasso di completamento. E se l’utente descrivesse i requisiti in testo piano e il sistema generasse all’istante una stima dettagliata e interattiva?

Questo è uno stimatore di costi con IA. Con un LLM, il linguaggio naturale senza struttura passa a dati strutturati e affidabili. Qui: architettura frontend e backend, structured outputs, validazione Zod e il JSON parsato legato a controlli React.

1. Backend: JSON stretto con structured outputs

Il grande problema delle tool con IA è l’affidabilità. Se chiedete solo al LLM di «restituire JSON», a volte ci mette prosa, JSON invalido o cambia i nomi delle key. In produzione quello rompe il parse della UI.

Le API moderne (OpenAI, Gemini, Anthropic) offrono structured outputs: il modello risponde secondo uno schema JSON. Quello schema si dichiara con Zod, validazione in TypeScript. L’LLM fa da motore di estrazione: la descrizione libera cade nella struttura definita.

2. Lo schema Zod dello stimatore

Per un preventivo di cantiere o ristrutturazione, lo schema cattura dimensioni (area, stanze), requisiti (ricablaggio, demolizione) e una lista di voci. Un esempio TypeScript della struttura JSON di destinazione:

Prima, EstimateSchema: parametri come area e rooms, boolean di demolition e rewiring, e un array estimateItems con task, category e baseCost. Attacchiamo descriptions ai campi (`describe("Area in metri quadrati")`) perché il LLM sappia cosa estrarre in ogni proprietà.

3. Dal JSON IA allo state di React

Quando il backend fa il parse dell’input e restituisce il JSON validato, il frontend lo carica nello state di React. Un flusso interattivo e rapido:

• Carico iniziale: l’utente invia la descrizione. Un loader. Quando l’API restituisce il JSON, riempiamo lo state locale con ciò che è stato estratto.
• Calcoli per formula: l’IA dà voci e prezzi di riferimento; il costo finale si calcola in locale con formule React. Se l’utente cambia variabili, il costo si aggiorna all’istante - senza un’altra chiamata al LLM.
• Controllo ibrido: slider, toggle e dropdown legati allo state. L’utente corregge l’IA. Se non ha preso il ricablaggio, accende il toggle «Ricablaggio».

4. Widget visivi interattivi

Per un’esperienza di qualità, la UI converte numeri grezzi in grafici e widget usabili:

• Slider: il parametro area a un range HTML su misura. Trascinare alza il moltiplicatore di area e scala manodopera e materiali di ogni voce.
• Grafici dinamici: raggruppate per categoria (demolizione, finiture, elettricità) in un pie SVG o barre. Lo spezzatino del budget, a colpo d’occhio.
• Accordion modificabili: voci raggruppate per categoria. L’utente aggiusta il prezzo unitario, toglie task di troppo o aggiunge note.

5. Piano tecnico di implementazione

La UI: un textarea per la descrizione e il pannello dello stimatore. Lo state di area e wiring sta in hook React. Nel render si calcolano i totali: costi base × valore dello slider di area, più tariffa fissa di demolizione se è spuntata. Un riepilogo mostra la somma accanto agli slider.

Unire l’estrazione flessibile del LLM alle constraint strette e al feedback rapido di React e TypeScript: un motore di quotazioni B2B che si sente intelligente, veloce e affidabile.