Erstellen eines KI-Kostenschätzers: Parsen von LLM-Ausgaben in interaktive UI-Komponenten

Im B2B und bei Services ist der Kostenvoranschlag der kritische Schritt. Klassische Kalkulatoren sind mühsam: Dutzende Checkboxen, Dropdowns, Felder. Reibung senkt Completion. Was, wenn User Anforderungen in Klartext beschreiben - und das System sofort einen detaillierten, interaktiven Estimate baut?

Das ist die Kraft eines KI-Kalkulators. Mit LLMs wird unstrukturierte Sprache zu zuverlässigem JSON. Hier: Frontend- und Backend-Architektur, LLM Structured Outputs, Zod-Validierung und Bindung an React-UI.

1. Backend: Durchsetzung von striktem JSON mit strukturierten LLM-Ausgaben

Die größte Herausforderung bei KI-gestützten Werkzeugen ist die Zuverlässigkeit. Wenn Sie ein LLM einfach auffordern, „JSON zurückzugeben“, kann es gelegentlich zu Textumbrüchen, ungültigen Formaten oder geänderten Schlüsselnamen kommen. In der Produktion unterbricht dies Ihre Frontend-Parsing-Logik.

Dagegen helfen moderne APIs (OpenAI, Gemini, Anthropic) mit Structured Outputs: das Modell muss einem JSON-Schema folgen. Wir definieren das Schema mit Zod, einer TypeScript-first Validierungsbibliothek. Das LLM wird zur Extraktionsmaschine und legt die Freitextbeschreibung des Nutzers direkt in unsere Struktur.

2. Definieren des Estimator-Zod-Schemas

Für einen Bau- oder Renovierungsvoranschlag beschreiben wir ein Schema, das die Projektdimensionen (z. B. Fläche, Anzahl der Räume), spezifische Anforderungen (Austausch der Verkabelung, Abriss) und eine Liste der geschätzten Kostenpositionen erfasst. Hier ist ein TypeScript-Beispiel, wie wir die Ziel-JSON-Struktur definieren:

Zuerst definieren wir „EstimateSchema“, das grundlegende Parameter wie „Fläche“ und „Räume“, boolesche Flags für „Abriss“ und „Neuverkabelung“ und ein Array „estimateItems“ enthält, in dem jedes Element eine „Aufgabe“, eine „Kategorie“ und „Basiskosten“ hat. Wir fügen Beschreibungen zu Feldern hinzu (z. B. „describe("Fläche in Quadratmetern")), um dem LLM zu helfen, zu verstehen, welche Daten in jede Immobilie extrahiert werden sollen.

3. KI-Daten mit React UI State verbinden

Sobald das Backend die Eingabe analysiert und das validierte JSON-Objekt zurückgibt, lädt die Frontend-Anwendung es in den React-Status. Dadurch entsteht ein äußerst reaktionsschneller, interaktiver Ablauf:

• Erster Ladevorgang: Der Benutzer übermittelt seine Textbeschreibung. Wir zeigen eine Ladeanzeige. Sobald die API den JSON zurückgibt, füllen wir den lokalen Komponentenstatus mit den AI-Extraktionswerten.
• Formelbasierte Berechnungen: Während die KI die ersten geschätzten Artikel und Grundpreise bereitstellt, wird die endgültige Kostenberechnung lokal mithilfe von React-Formeln berechnet. Wenn der Benutzer Variablen ändert, werden die Kosten sofort aktualisiert, ohne dass Anfragen an das LLM zurückgesendet werden müssen.
• Hybrides Steuerungssystem: Die Benutzeroberfläche rendert Steuerelemente (Schieberegler, Umschalter und Dropdowns), die direkt an den Status gebunden sind. Dadurch kann der Benutzer die KI korrigieren. Wenn die KI übersehen hat, dass die Verkabelung ausgetauscht werden muss, schaltet der Benutzer einfach den Kippschalter „Neuverkabelung“ ein.

4. Rendern interaktiver visueller Widgets

Um ein qualitativ hochwertiges Erlebnis zu bieten, sollte die Benutzeroberfläche rohe Zahlen in optisch ansprechende Diagramme und benutzerfreundliche Widgets umwandeln:

• Interaktive Schieberegler: Ordnen Sie den Parameter „Bereich“ einem benutzerdefinierten HTML-Bereichsschieberegler zu. Durch Ziehen des Schiebereglers wird der Flächenmultiplikator erhöht und die Arbeits- und Materialkosten jeder Position dynamisch skaliert.
• Dynamische Diagramme: Gruppieren Sie Elemente nach Kategorie (z. B. Abriss, Ausbau, Elektrik) und zeigen Sie sie in einem dynamischen SVG-Kreisdiagramm oder Fortschrittsbalken an. Dadurch wird die Budgetaufschlüsselung auf einen Blick visuell kommuniziert.
• Bearbeitbare Akkordeons: Präsentieren Sie die Kostenvoranschlagselemente nach Kategorien gruppiert in zusammenklappbaren Akkordeonlisten. Ermöglichen Sie dem Benutzer, den Stückpreis anzupassen, überflüssige Aufgaben zu entfernen oder benutzerdefinierte Notizen zu einzelnen Artikeln hinzuzufügen.

5. Technischer Implementierungsplan

Das Frontend-Setup besteht aus einem Textbereich zur Beschreibungseingabe, gefolgt vom Schätzer-Dashboard. Wir verwalten den Zustand von Variablen wie „Bereich“ und „Wiring“ mithilfe von React-Hook-Zuständen. In der Render-Funktion berechnen wir die Gesamtsummen: Wir multiplizieren die Grundkosten mit dem aktuellen Wert des Bereichsschiebereglers und fügen, falls ausgewählt, Pauschalen für den Abriss hinzu. Ein Zusammenfassungsbereich zeigt die neu berechnete Summe zusammen mit interaktiven Schiebereglern an.

Durch die Kombination der flexiblen Kontextextraktion von LLMs mit den strengen Einschränkungen und der schnellen Feedbackschleife von React und TypeScript können Unternehmen automatisierte B2B-Angebots-Engines erstellen, die sich intelligent, schnell und absolut zuverlässig anfühlen.