Створення AI-калькулятора вартості: парсинг відповідей LLM в інтерактивний інтерфейс React

У B2B і послугах кошторис - критичний крок шляху. Класичний калькулятор - форма з десятками чекбоксів, дропдаунів і полів. Тертя вбиває completion. А якщо людина опише вимоги звичайним текстом, і система миттєво збере інтерактивний кошторис?

Оце сила AI-калькулятора. LLM бере неструктуровану мову й парсить її в надійну структуру. Тут: фронтенд і бекенд, LLM Structured Outputs, валідація Zod і зв’язка JSON зі слайдерами React.

1. Бекенд: гарантування чистого JSON через Structured Outputs

Найбільша проблема інструментів на базі ШІ - це стабільність відповідей. Якщо просто попросити LLM «повернути JSON», вона періодично видаватиме супровідний текст, невалідний формат або змінюватиме назви ключів. У продакшені це ламає логіку парсингу на фронтенді.

Для вирішення цієї проблеми сучасні API (як-от OpenAI, Gemini, Anthropic) підтримують функцію Structured Outputs. Вона змушує модель відповідати строго за заданою JSON-схемою. Ми описуємо цю схему за допомогою Zod - бібліотеки для оголошення та валідації схем у TypeScript. Модель працює як двигун екстракції: вона розкладає вільний опис користувача за нашими поличками-ключами.

2. Опис схеми калькулятора за допомогою Zod

Для кошторису ремонту ми описуємо схему, яка фіксує параметри проекту (площу, кількість кімнат), специфічні вимоги (заміна проводки, демонтаж стін) та масив розрахованих послуг. Ось приклад опису такої структури на TypeScript:

Спершу ми створюємо `EstimateSchema`, яка містить базові параметри: `area` та `rooms`, булеві прапорці для `demolition` та `rewiring`, а також масив `estimateItems`, де кожен елемент має поля `task`, `category` та `baseCost`. Ми додаємо описи до кожного поля (наприклад, `.describe("Площа в кв.м")`), щоб допомогти моделі зрозуміти, яку саме інформацію туди записувати.

3. Зв'язка даних AI з реактивним стейтом React

Коли бекенд опрацьовує запит і повертає перевірений JSON, фронтенд завантажує його в локальний стейт React. Це дозволяє побудувати надзвичайно швидкий та інтерактивний інтерфейс:

• Початкове завантаження: Користувач надсилає свій опис. Ми показуємо індикатор завантаження. Щойно API повертає JSON, мы заповнюємо локальний стейт компонента отриманими значеннями.
• Математичні розрахунки формулами: Хоча AI формує початковий набір робіт і базові ціни, кінцева вартість рахується локально за допомогою React-формул. Якщо користувач змінює параметри, сума оновлюється миттєво без повторних запитів до LLM.
• Гібридна система керування: Інтерфейс рендерить слайдери, перемикачі та випадні списки, які прив'язані до стейту. Це дозволяє користувачеві «виправляти» штучний інтелект. Якщо модель не помітила вимогу про заміну проводки, користувач просто вмикає відповідний тумблер.

4. Візуалізація даних: слайдери, діаграми та списки

Щоб створити преміальний досвід, інтерфейс має перетворювати сухі цифри на привабливі віджети та графіки:

• Слайдери: Прив'язуємо параметр площі `area` до повзунка (range slider). Перетягування повзунка збільшує множник площі, динамічно масштабуючи вартість матеріалів та робіт у реальному часі.
• Діаграми: Групуємо елементи кошторису за категоріями (наприклад, Демонтаж, Електрика, Фінішне оздоблення) і відображаємо їх у вигляді кругової діаграми або прогрес-барів. Це дає розуміння структури витрат.
• Редаговані списки-акордеони: Відображаємо детальні роботи в розгортних списках. Даємо можливість користувачеві самостійно коригувати ціни окремих пунктів або видаляти непотрібні завдання.

5. Архітектурний шаблон коду

Фронтенд-частина складається з текстового поля для введення опису та панелі калькулятора. Ми керуємо станом змінних площі `area` та прапорців за допомогою хуків React. При рендерингу ми вираховуємо підсумки: множимо базові ціни на поточне значення слайдера площі й додаємо фіксовані послуги демонтажу. Слайдери та перемикачі дають можливість гнучко змінювати параметри в реальному часі.

Поєднуючи гнучку екстракцію контексту через LLM із жорсткою логікою розрахунків та швидким фідбеком на React, бізнеси отримують автоматизовані B2B-калькулятори, які працюють розумно, швидко й безпомилково.