AI maliyet tahmincisi kurmak: LLM çıktısını interaktif UI bileşenlerine parse etmek

B2B ve hizmet sektöründe fiyat tahmini müşteri yolculuğunun en kritik adımıdır. Klasik tahminciler sıkıcıdır: onlarca checkbox, dropdown ve alan. Bu sürtünme tamamlama oranını düşürür. Kullanıcı gereksinimini düz metinle anlatsa ve sistem anında ayrıntılı, interaktif bir tahmin üretse?

Bu bir AI maliyet tahmincisinin gücüdür. LLM ile yapılaşmamış doğal dil girdilerini yapılandırılmış, güvenilir veri yapılarına parse ederiz. Bu yazıda işin frontend ve backend mimarisi: LLM Structured Outputs, Zod ile şema doğrulama ve parse edilen veriyi React UI kontrollerine bağlamak.

1. Backend: LLM Structured Outputs ile sıkı JSON

AI tool’larının en büyük sorunu güvenilirliktir. LLM’e yalnızca «JSON döndür» derseniz ara sıra metin sarmalı, geçersiz format veya değişen key adları çıkar. Üretimde bu frontend parse mantığını kırar.

Modern API’ler (OpenAI, Gemini, Anthropic) Structured Outputs sunar. Model yanıtı sıkı bir JSON Schema’ya zorlanır. Şemayı TypeScript-first Zod ile tanımlarız. LLM çıkarım motorudur: kullanıcının serbest tarifini tanımlı yapıya map eder.

2. Tahmincinin Zod şeması

İnşaat veya renovasyon tahmini için şema proje boyutlarını (alan, oda sayısı), özel gereksinimleri (tesisat değişimi, yıkım) ve tahmini kalem listesini yakalar. Hedef JSON yapısını TypeScript’te şöyle tanımlarız:

Önce `EstimateSchema`: `area` ve `rooms` gibi temel parametreler, `demolition` ve `rewiring` boolean’ları, her öğede `task`, `category` ve `baseCost` olan `estimateItems` dizisi. Alanlara açıklama ekleriz (`describe("Metrekare cinsinden alan")`) ki LLM her özelliğe ne çıkaracağını anlasın.

3. AI verisini React UI state’e bağlamak

Backend girdiyi parse edip doğrulanmış JSON’u dönünce frontend onu React state’e yükler. Yüksek tepkili, interaktif bir akış:

• İlk yükleme: kullanıcı metin tarifini gönderir. Bir yükleme göstergesi. API JSON dönünce yerel bileşen state’ini AI çıkarım değerleriyle doldururuz.
• Formül tabanlı hesap: AI ilk kalemleri ve taban fiyatları verir; nihai maliyet matematiği React formülleriyle yerelde hesaplanır. Kullanıcı değişken değiştirirse maliyet LLM’e gitmeden anında güncellenir.
• Hibrit kontrol: arayüz, state’e doğrudan bağlı kontroller (slider, toggle, dropdown) çizer. Kullanıcı AI’yı düzeltebilir. AI tesisat değişimini kaçırdıysa «Tesisat» anahtarını açması yeter.

4. İnteraktif görsel widget’lar

Kaliteli deneyim için arayüz ham sayıları çekici grafiklere ve kullanımı kolay widget’lara çevirmelidir:

• İnteraktif slider: `area` parametresini özel bir HTML range slider’a map edin. Sürüklemek alan çarpanını artırır, her kalemin işçilik ve malzeme maliyetini dinamik ölçekler.
• Dinamik grafikler: kalemleri kategoriye göre gruplayın (yıkım, finiş, elektrik) ve dinamik SVG daire veya progress bar’da gösterin. Bütçe kırılımı bir bakışta.
• Düzenlenebilir accordion: tahmin kalemlerini kategoriye göre daralabilir listelerde sunun. Kullanıcı birim fiyatı ayarlasın, fazla işi silsin veya nota eklesin.

5. Teknik uygulama blueprint’i

Frontend kurulumu: tarif için textarea, ardından tahminci paneli. `area` ve `wiring` gibi değişkenlerin state’ini React hook’larıyla yönetiriz. Render’da toplamları hesaplarız: taban maliyetler × güncel alan slider değeri, seçildiyse yıkım için sabit tarife. Özet panel yeniden hesaplanan tutarı interaktif slider’larla gösterir.

LLM’in esnek bağlam çıkarımını React ve TypeScript’in sıkı kısıtları ve hızlı feedback döngüsüyle birleştirerek işletmeler akıllı, hızlı ve tamamen güvenilir duran otomatik B2B teklif motorları kurabilir.