Un estimador de costes con IA: del output del LLM a componentes de UI interactivos

En B2B y servicios, la estimación de precio es el paso crítico del recorrido. El estimador clásico es un formulario con decenas de checkboxes, dropdowns y campos - y la fricción mata la tasa de finalización. ¿Y si el usuario describe los requisitos en texto plano y el sistema genera al instante una estimación detallada e interactiva?

Eso es un estimador de costes con IA. Con un LLM, el lenguaje natural sin estructura pasa a datos estructurados y fiables. Aquí: arquitectura frontend y backend, structured outputs, validación Zod y el JSON parseado ligado a controles de React.

1. Backend: JSON estricto con structured outputs

El gran problema de las herramientas con IA es la fiabilidad. Si solo pide al LLM que «devuelva JSON», a veces cuela prosa, JSON inválido o cambia nombres de claves. En producción eso rompe el parseo de la interfaz.

Las APIs modernas (OpenAI, Gemini, Anthropic) ofrecen structured outputs: el modelo responde según un esquema JSON. Ese esquema se declara con Zod, validación en TypeScript. El LLM hace de motor de extracción: la descripción libre cae en la estructura definida.

2. El esquema Zod del estimador

Para un presupuesto de obra o reforma, el esquema captura dimensiones (área, habitaciones), requisitos (recableado, demolición) y una lista de partidas. Un ejemplo TypeScript de la estructura JSON de destino:

Primero, EstimateSchema: parámetros como area y rooms, booleanos de demolition y rewiring, y un array estimateItems con task, category y baseCost. Pegamos descriptions a los campos (`describe("Área en metros cuadrados")`) para que el LLM sepa qué extraer en cada propiedad.

3. Del JSON de IA al state de React

Cuando el backend parsea el input y devuelve el JSON validado, el frontend lo carga en state de React. Un flujo interactivo y rápido:

• Carga inicial: el usuario envía la descripción. Un loader. Cuando la API devuelve el JSON, rellenamos el state local con lo extraído.
• Cálculos por fórmula: la IA da partidas y precios de referencia; el coste final se calcula en local con fórmulas de React. Si el usuario cambia variables, el coste se actualiza al instante - sin otra llamada al LLM.
• Control híbrido: sliders, toggles y dropdowns ligados al state. El usuario corrige a la IA. Si no pilló el recableado, enciende el toggle «Recableado».

4. Widgets visuales interactivos

Para una experiencia de calidad, la UI convierte números crudos en gráficos y widgets usables:

• Sliders: el parámetro area a un range HTML a medida. Arrastrar sube el multiplicador de área y escala mano de obra y materiales de cada partida.
• Gráficos dinámicos: agrupe por categoría (demolición, acabados, electricidad) en un pie SVG o barras. El desglose del presupuesto, de un vistazo.
• Acordeones editables: partidas agrupadas por categoría. El usuario ajusta el precio unitario, quita tareas de más o añade notas.

5. Plano técnico de implementación

La UI: un textarea para la descripción y el panel del estimador. El state de area y wiring va en hooks de React. En el render se calculan totales: costes base × valor del slider de área, más tarifa fija de demolición si está marcada. Un resumen enseña la suma junto a los sliders.

Juntar la extracción flexible del LLM con las constraints estrictas y el feedback rápido de React y TypeScript: un motor de cotizaciones B2B que se siente inteligente, rápido y fiable.