Реализация AI-автозаполнения форм на сайте

Реализация AI-автозаполнения форм на сайте

Автозаполнение форм через AI — это не браузерный autofill и не просто подсказки на основе истории. Речь о системе, которая анализирует контекст пользователя, данные из связанных источников и предлагает релевантные значения для полей в реальном времени.

Сценарии применения

B2B-порталы: при создании заявки на услугу AI заполняет реквизиты компании на основе ИНН (интеграция с ЕГРЮЛ/DADATA), предлагает типовые описания из предыдущих заявок, подтягивает контактное лицо из CRM.

Медицинские формы: автозаполнение диагнозов по МКБ-10 при вводе симптомов, подстановка схем лечения из протоколов. Требует строгой валидации и логирования.

Регистрация и профиль: предложение должности на основе введённой компании, автоматическое определение часового пояса по геолокации, подсказки для адресного поля.

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

Архитектура

Компонент работает в двух режимах:

Триггер по полю — при уходе фокуса или изменении ключевого поля (например, ИНН) отправляется запрос к API, ответ заполняет зависимые поля.

Стриминговые подсказки — при наборе текста в поле "описание" или "комментарий" AI предлагает продолжение, как в IDE с Copilot. Реализуется через SSE или WebSocket.

// React-компонент с AI-подсказками
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", "")
    }

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

Предложенные значения нужно показывать ненавязчиво. Три паттерна:

Ghost text — значение показывается бледным цветом прямо в поле. Нажатие Tab принимает подсказку. Работает для текстовых полей.

Inline badge — рядом с полем появляется кнопка "Заполнить автоматически" с предложенным значением. Пользователь подтверждает одним кликом.

Панель предложений — для группы полей (реквизиты компании, адрес доставки) показывается блок с набором значений и кнопкой "Применить всё".

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

Валидация предложений

Не доверяйте LLM слепо. Для каждого поля определите правила валидации:

• Email: regex + MX-запрос
• ИНН: контрольная сумма
• Телефон: нормализация через libphonenumber
• Дата: проверка допустимого диапазона

Предложение с confidence < 0.7 лучше не подставлять автоматически, а только показывать как вариант.

Сроки

Базовое автозаполнение через LLM для 3–5 полей — 3–4 дня. Интеграция с DADATA + ghost text UX — плюс 2–3 дня. Стриминговые подсказки для текстовых полей — плюс 2 дня.