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 с системным промптом. Без доступа к реальным данным компании. Пользователь спрашивает «сколько стоит тариф Премиум» — бот галлюцинирует цену из воздуха. Спрашивает «когда придёт заказ» — получает вежливое «напишите в поддержку». Это не интеграция — это имитация. Мы за 5 лет внедрили RAG-решения в 30+ проектах: от интернет-магазинов до медицинских порталов. Гарантируем: полезная AI-помощь начинается там, где модель читает ваши документы, а не общие ответы.

Как мы строим RAG-системы?

Retrieval-Augmented Generation — стандартная архитектура: запрос → поиск релевантных фрагментов в векторной БД → вставка найденного в контекст → ответ модели. Но дьявол в деталях реализации. Разберём ключевые узлы, которые определяют качество.

Chunking. Резать документ на куски по 500 токенов без оглядки на структуру — гарантия потери смысла. Если разрез пришёлся на середину абзаца, контекст разрывается. Решение — рекурсивный RecursiveCharacterTextSplitter с overlap 10–15% для документации. Для контрактов и инструкций используем семантический сплиттер: выделяем заголовки, списки, блоки кода — каждый раздел становится независимым чанком. Разница в качестве поиска: на одном медицинском проекте precision вырос с 0.55 до 0.84 только за счёт правильной нарезки.

Модель эмбеддингов. Для русскоязычных текстов intfloat/multilingual-e5-large даёт заметный прирост точности против устаревшей text-embedding-ada-002. По нашим замерам, NDCG@10 на тестовой выборке из 10 000 пар «запрос-документ» на 12% выше. OpenAI text-embedding-3-large — хороший вариант для англоязычного контента, но для русского рекомендуем BAAI/bge-m3 или упомянутую e5-large.

Векторная БД. Если у вас уже стоит PostgreSQL — pgvector экономит ресурсы. Ставим расширение CREATE EXTENSION vector, добавляем колонку vector(1024), создаём HNSW-индекс. На проекте с 80 000 статей поддержки p95 поиска — 12 мс. Этого хватает. Для каталогов с миллионами единиц — Qdrant или Weaviate: нативный гибридный поиск и шардирование «из коробки».

Что даёт гибридный поиск?

Только векторный поиск слеп к точным совпадениям: артикулы «ABC-123», имена собственные, аббревиатуры теряются. Только полнотекстовый поиск не улавливает синонимы и перефразирования. Комбинация через RRF (Reciprocal Rank Fusion) даёт лучшее из двух миров: BM25 + векторный поиск, результаты смешиваются. На практике recall@20 растёт с 0.65 до 0.92 — разница заметна пользователю.

Reranking — финальный фильтр: top-20 кандидатов из гибридного поиска прогоняем через cross-encoder cross-encoder/ms-marco-MiniLM-L-6-v2. Он добавляет 50–100 мс к ответу, но relevance поднимает ещё на 5–10%. Без reranking чат-бот может показывать нерелевантные документы.

Семантический поиск на сайте

Поиск «удобные кожаные кресла» должен находить товары с описанием «мягкие стулья из натуральной кожи» — обычный LIKE-поиск не способен. Наша архитектура: при добавлении товара/поста автоматически генерируем эмбеддинг через multilingual-e5-large, сохраняем в pgvector. На запросе — эмбеддим его той же моделью, ищем ближайших соседей через cosine distance с HNSW-индексом. Для каталога из 100 000 позиций индекс строится 3 минуты, в памяти ~400 Мбайт (1536-мерные векторы). Cреднее время поиска — 20 мс.

Рекомендательные системы

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

Стриминг ответов

Пользователь не обязан ждать, пока модель сгенерирует весь текст — это убивает 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 useChat + tools для Next.js позволяет добавить интеграцию в 10 строк кода. Главная сложность — надёжность: модель иногда вызывает не тот инструмент или передаёт кривые параметры. Защита — Zod-схемы на каждый инструмент и structured outputs для гарантии JSON.

Что входит в работу

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

Сроки

Стоимость рассчитывается индивидуально после знакомства с проектом. Оценим ваш проект за 1 день. Свяжитесь с нами — расскажем, как превратить AI из игрушки в инструмент, который приносит прибыль.