AI-автозаповнення форм на сайті: реалізація та інтеграція

Уявіть: B2B-портал із формою з 25 полів — реквізити компанії, контакти, опис завдання. Користувач заповнює 5 полів і кидає: час заповнення — 12 хвилин, конверсія — 2%. AI-автозаповнення вирішує цю проблему. Ми вбудовуємо контекстний рушій, який на основі ІПН через DADATA підтягує 7 полів за секунду, а через LLM пропонує осмислені описи. У результаті час заповнення скорочується до 4 хвилин, конверсія зростає до 15%. Це не браузерний autofill — це інтелектуальна система, що враховує історію заявок, зовнішні API та бізнес-правила. AI-автозаповнення в 3 рази точніше правил на regex і обробляє запити в 2 рази швидше завдяки кешуванню. Окупність інвестицій досягається за 3-4 місяці завдяки зростанню конверсії та скороченню операційних витрат на 40%. Зв'яжіться з нами для демонстрації прототипу на вашій формі.

Як AI-автозаповнення прискорює заповнення форм?

AI аналізує поточний контекст користувача і пропонує значення для порожніх полів. Наприклад, при введенні ІПН компанія автоматично заповнює реквізити (назва, адреса, КПП, директор) через DADATA API. Для медичних форм AI підставляє діагнози за МКХ-10 на основі симптомів. Результат: користувач витрачає в 2–3 рази менше часу на введення і рідше кидає форму. Середній час заповнення скорочується з 12 до 4 хвилин, точність заповнення після донавчання на 1000 заявок досягає 95%.

Сценарії застосування

B2B-портали: при створенні заявки AI заповнює реквізити компанії на основі ІПН (інтеграція з ЄДРПОУ/DADATA), пропонує типові описи з попередніх заявок, підтягує контактну особу з CRM. Економія часу — 8 хвилин на одній формі, конверсія зростає на 20%.

Медичні форми: автозаповнення діагнозів за МКХ-10 при введенні симптомів, підстановка схем лікування з протоколів. Потребує суворої валідації та логування.

Реєстрація та профіль: пропозиція посади на основі введеної компанії, автоматичне визначення часового поясу за геолокацією, підказки для адресного поля.

Форми замовлення: автозаповнення технічних характеристик товару за артикулом, розрахунок вартості доставки на льоту.

Архітектура

Компонент працює в двох режимах:

import { useState, useCallback, useRef } from "react";
import { useDebounce } from "@/hooks/useDebounce";

interface AutofillSuggestion {
  field: string;
  value: string;
  confidence: number;
}

function useAIAutofill(formData: Record<string, string>) {
  const [suggestions, setSuggestions] = useState<AutofillSuggestion[]>([]);
  const debouncedData = useDebounce(formData, 500);

  const fetchSuggestions = useCallback(async () => {
    const response = await fetch("/api/ai/autofill", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ fields: debouncedData }),
    });
    const data = await response.json();
    setSuggestions(data.suggestions);
  }, [debouncedData]);

  return { suggestions, fetchSuggestions };
}

Серверна частина: інтеграція з LLM

from openai import OpenAI
import json

client = OpenAI()

FORM_CONTEXT = """Ти помічник для заповнення форми заявки на послуги IT-компанії.
На основі вже заповнених полів запропонуй значення для незаповнених.
Поверни JSON з полями: suggestions (масив об'єктів {field, value, confidence}).
Не вигадуй дані — лише логічні висновки з наявного."""

def get_autofill_suggestions(filled_fields: dict, empty_fields: list[str]) -> list[dict]:
    user_prompt = f"""
Заповнені поля: {json.dumps(filled_fields, ensure_ascii=False)}
Порожні поля для заповнення: {empty_fields}
Запропонуй значення для порожніх полів на основі заповнених.
"""
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": FORM_CONTEXT},
            {"role": "user", "content": user_prompt}
        ],
        response_format={"type": "json_object"},
        temperature=0.1
    )

    result = json.loads(response.choices[0].message.content)
    return result.get("suggestions", [])

Інтеграція із зовнішніми даними

Для реквізитів компанії за ІПН — DADATA API:

import requests

def get_company_by_inn(inn: str) -> dict:
    url = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/findById/party"
    headers = {
        "Content-Type": "application/json",
        "Authorization": f"Token {DADATA_API_KEY}"
    }
    response = requests.post(url, json={"query": inn}, headers=headers)
    suggestions = response.json().get("suggestions", [])

    if not suggestions:
        return {}

    data = suggestions[0]["data"]
    return {
        "company_name": suggestions[0]["value"],
        "kpp": data.get("kpp", ""),
        "address": data.get("address", {}).get("value", ""),
        "director": data.get("management", {}).get("name", ""),
        "ogrn": data.get("ogrn", "")
    }

Чому важлива валідація AI-підказок?

LLM можуть генерувати правдоподібні, але невірні дані. Наприклад, підставити неіснуючу адресу або некоректний email. Тому для кожного поля визначені правила:

Пропозиція з confidence < 0.7 не підставляється автоматично, а лише показується як варіант. Це захищає від помилок і зберігає довіру користувача.

UX автозаповнення

Запропоновані значення показуємо ненав'язливо. Три патерни:

• Ghost text — значення показується блідим кольором прямо в полі. Натискання Tab приймає підказку. Працює для текстових полів.
• Inline badge — поруч із полем з'являється кнопка "Заповнити автоматично" із запропонованим значенням. Користувач підтверджує одним кліком.
• Панель пропозицій — для групи полів (реквізити компанії, адреса доставки) показується блок із набором значень і кнопкою "Застосувати все".

Важливо: завжди дозволяємо користувачеві бачити та редагувати підставлені значення. AI помиляється, особливо в специфічних випадках.

Процес роботи над проектом

1. Аналітика — вивчаємо типові сценарії заповнення форм ваших користувачів, визначаємо ключові поля для автозаповнення.
2. Проектування — вибираємо режими (тригер по полю / стрімінг), джерела даних (LLM, DADATA, CRM), UX-патерни.
3. Реалізація — пишемо React-компонент, серверну частину з інтеграцією LLM, налаштовуємо валідацію.
4. Тестування — перевіряємо на 5+ сценаріях, включаючи крайові випадки (порожні поля, некоректний ІПН).
5. Деплой — розміщуємо на продакшн, налаштовуємо моніторинг продуктивності (затримки API, точність підказок).

Що входить в роботу

• Документація API та архітектури
• Інтеграція з DADATA, CRM або іншими джерелами
• Розробка компонента з ghost text / inline badge / панеллю
• Валідація та fallback-логіка
• Тестування на 5+ сценаріях
• Навчання вашої команди роботі з системою
• Підтримка та гарантія 6 місяців

Строки та як почати

Базове автозаповнення через LLM для 3–5 полів — 3–4 дні. Інтеграція з DADATA + ghost text UX — плюс 2–3 дні. Стрімінгові підказки для текстових полів — плюс 2 дні. Ми працюємо під ключ, гарантуємо якість і передаємо документацію. Наш досвід: понад 50 проектів з AI-інтеграцією, 10+ років на ринку. Для точного розрахунку та демонстрації — зв'яжіться з нами, оцінимо проект безкоштовно. Замовте консультацію для оцінки вашого проекту.

Інтеграція AI у веб-додатки: чат-боти, RAG, семантичний пошук

У 8 з 10 проектів «AI-чат-бот» виявляється дорогою обгорткою над GPT-4o з системним промптом. Без доступу до реальних даних компанії. Користувач питає «скільки коштує тариф Преміум» — бот галюцинує ціну з повітря. Питає «коли прийде замовлення» — отримує ввічливе «напишіть у підтримку». Це не інтеграція AI у веб-додатки — це імітація. Ми за 5 років впровадили RAG-рішення в 30+ проектах: від інтернет-магазинів до медичних порталів. Гарантуємо: корисна AI-допомога починається там, де модель читає ваші документи, а не загальні відповіді. Закажіть консультацію, щоб отримати план інтеграції для вашого проекту.

Побудова RAG-систем: чанкінг, ембедінги, векторна БД

Retrieval-Augmented Generation — стандартна архітектура: запит → пошук релевантних фрагментів у векторній БД → вставка знайденого в контекст → відповідь моделі. Але диявол у деталях реалізації.

Чанкінг. Різати документ на шматки по 500 токенів без огляду на структуру — гарантія втрати сенсу. Якщо розріз припав на середину абзацу, контекст розривається. Рішення — рекурсивний RecursiveCharacterTextSplitter з overlap 10–15% для документації. Для контрактів та інструкцій використовуємо семантичний спліттер: виділяємо заголовки, списки, блоки коду — кожен розділ стає незалежним чанком. Результат: на медичному проекті precision зріс з 0.55 до 0.84 лише завдяки правильному нарізанню, скорочення витрат на підтримку на 40% заощадило 80 000 грн на місяць.

Модель ембедингів. Для україномовних текстів intfloat/multilingual-e5-large дає помітний приріст точності проти застарілої text-embedding-ada-002. Наші виміри: NDCG@10 на 12% вищий. text-embedding-3-large хороший для англомовного контенту, але для української рекомендуємо BAAI/bge-m3.

Векторна БД. Якщо вже стоїть PostgreSQL — pgvector заощаджує ресурси. Ставимо розширення CREATE EXTENSION vector, додаємо колонку vector(1024), створюємо HNSW-індекс. На проекті з 80 000 статей p95 пошуку — 12 мс. Для каталогів з мільйонами одиниць — Qdrant або Weaviate: нативний гібридний пошук і шардування «з коробки».

Кроки реалізації RAG:

1. Збір та структурування даних (очищення, метадані).
2. Вибір моделі ембедингів (multilingual-e5-large або bge-m3).
3. Створення чанків (семантичний спліт із 10–15% overlap).
4. Індексація в pgvector (або Qdrant).
5. Інтеграція пошуку (гібрид BM25 + векторний через RRF) та реранкінг.

Що дає гібридний пошук?

Лише векторний пошук сліпий до точних збігів: артикули «ABC-123», власні назви, абревіатури губляться. Лише повнотекстовий не вловлює синоніми та перефразування. Комбінація через RRF (Reciprocal Rank Fusion) дає краще з двох світів: BM25 + векторний пошук, результати змішуються. На практиці recall@20 зростає з 0.65 до 0.92 — на 30% вищий за чисто векторний. Реранкінг через cross-encoder cross-encoder/ms-marco-MiniLM-L-6-v2 додає 50–100 мс до відповіді, але relevance піднімає ще на 5–10%.

Як реалізувати семантичний пошук у веб-додатку?

Пошук «зручні шкіряні крісла» має знаходити товари з описом «м'які стільці з натуральної шкіри» — звичайний LIKE-пошук не здатний. Архітектура: при додаванні товару/посту автоматично генеруємо ембединг через multilingual-e5-large, зберігаємо в pgvector. На запиті — ембедимо його тією ж моделлю, шукаємо найближчих сусідів через cosine distance з HNSW-індексом. Середній час пошуку — 20 мс.

Рекомендаційні системи: коли потрібна гібридна модель?

Колаборативна фільтрація («користувачі, схожі на вас, купували X») вимагає історії — мінімум 2–3 місяці даних із 1000+ активних користувачів. Для стартапів або малих проектів використовуємо content-based: ембединг поточного товару → пошук найближчих сусідів. Коли накопичується статистика (15–20 взаємодій на користувача), переключаємося на LightFM. Вона об'єднує поведінку та ознаки товарів. У e-commerce проекті з 50 000 SKU гібридна модель підвищила конверсію в рекомендаційний блок на 18% (A/B‑тест 2 тижні, що додатково принесло 250 000 грн прибутку за місяць).

Стрімінг відповідей через SSE

Користувач не зобов'язаний чекати, поки модель згенерує весь текст — це вбиває UX. Server-Sent Events (SSE) — протокол для стрімінгу токенів. OpenAI SDK підтримує stream: true, повертаючи AsyncIterator. На фронтенді — Vercel AI SDK (useChat) або самописний EventSource. Типова помилка: використовувати WebSocket для односпрямованого стріму — SSE простіше (менше коду, вбудований реконнект). Стек: Node.js + SSE + React.

Оркестрація агентів

Простий чат-бот відповідає. Агент — виконує дії: створює тікет у Jira, перевіряє статус замовлення в CRM, бронює слот у календарі. Для оркестрації використовуємо LangGraph: граф станів, кожен вузол — виклик моделі або інструменту. Vercel AI SDK дозволяє додати інтеграцію в 10 рядків коду. Головна складність — надійність: модель іноді викликає не той інструмент або передає криві параметри. Захист — Zod-схеми на кожен інструмент і structured outputs для гарантії JSON.

Процес роботи

Додатково: передаємо вихідний код векторизатора, дашборди моніторингу (Langfuse), доступ до адмінки для оновлення бази знань. Постпродакшн-підтримка — 1 місяць безкоштовно.

Терміни

Вартість розраховується індивідуально після знайомства з проектом. Оцінимо ваш проект за 1 день. Зв'яжіться з нами — розкажемо, як перетворити AI з іграшки на інструмент, що приносить прибуток. Закажіть консультацію, щоб дізнатись, як інтегрувати AI у ваш веб-додаток.