🛠️ Техническая реализация
Архитектура системы
Frontend (Web Widget):- Адаптивный чат-виджет в стиле Material Design 3
- Поддержка iOS Safari с исправлением багов viewport и keyboard
- Сохранение истории диалога в localStorage (24ч)
- Уникальный sessionId для трекинга сессий
Backend (n8n Workflow):- Webhook Endpoint - прием POST-запросов от фронта с валидацией входных данных
- RAG AI Agent - ядро системы на базе LLM:
- Инструмент price_m3: Запросы к Supabase с актуальными ценами (5 типов авто, 30+ услуг)
- Инструмент metadichka_sale: База знаний с техниками продаж SPIN/AIDA
- Инструмент m3_location: Supabase таблица с адресами, координатами, режимом работы 12 студий
- Инструмент calculator: Расчет стоимости комплексных услуг
- Инструмент think: Анализ сложных запросов перед ответом
- Parse Action Node - интеллектуальный парсер ответа агента:
- Извлечение JSON-команд (action: location/booking)
- Regex-парсинг адреса клиента из естественного языка
- Нормализация адреса с добавлением города
- Switch Node - роутинг по типу action:
- location → геокодирование и поиск ближайших точек
- booking → передача лида в CRM
- null → прямой ответ клиенту
- Yandex Geocoder Integration:
- API-запрос геокодирования адреса клиента
- Расчет расстояний до всех 12 студий (формула Haversine)
- Сортировка по удаленности, возврат топ-3
- Build Location Response - форматирование ответа с красивым выводом студий, адресов, режима работы и расстояний
Система безопасности (Security Layer)
Многоуровневая защита от атак:- Уровень 0 (Prompt Injection): Детекция попыток изменения роли агента, извлечения системного промпта, команд "ignore previous instructions"
- Уровень 1 (Canary Token): Скрытый токен CANARY_TOKEN_M3_2025_SECURE_PHOENIX_DELTA_NOVEMBER для обнаружения утечек промпта
- Уровень 2 (Content Filtering): Трехуровневая система фильтрации мата с автоматической эскалацией к оператору
- Уровень 3 (Data Validation): Санитизация входных данных, защита от SQL/XSS/JSON injection
- Уровень 4 (Action Control): Только агент может генерировать JSON-команды, попытки клиента игнорируются
🧠 AI-промпт инжиниринг
Разработан 450+ строковый системный промпт с четкой иерархией правил:
- Персональность: "Эмка" - обаятельный консультант с балансом профессионализма и юмора
- Tone of Voice: Короткие фразы, эмодзи, легкие шутки, никакой канцелярщины
- Структура диалога: 7-этапная воронка от приветствия до записи
- Защита фокуса: Перенаправление офф-топ запросов обратно к услугам
- Техники продаж: Встроенные триггеры (социальное доказательство, срочность, выгода)
💡 Сложные технические челленджи
Challenge 1: Извлечение адреса из естественного языка- Агент пишет: "Найду студию к адресу "Ленская улица, 4" 🎯"
- Regex парсинг текста ДО JSON, фильтрация служебных слов
- Нормализация с добавлением "Санкт-Петербург" если город не указан
Challenge 2: Расчет расстояний без Google Maps API- Реализация формулы Haversine на JavaScript для расчета дистанции между координатами
- Сортировка 12 точек по удаленности за <100ms
Challenge 3: Контекстное понимание запросов- RAG-архитектура с векторным поиском по базе знаний
- Агент сам решает какой инструмент вызвать (цены/локации/расчет)
Challenge 4: iOS Safari keyboard bug- Input field терял фокус при появлении клавиатуры
- Решение: font-size: 16px, transform: translateZ(0), обработка focus/blur событий
📈 Бизнес-результаты
- ⚡ Скорость ответа: с 8-15 минут → <2 секунды (мгновенно)
- 📞 Нагрузка на операторов: -70% рутинных запросов
- 🎯 Конверсия в запись: +40% за счет умного подведения к действию
- 🕐 Доступность: 24/7/365 без выходных и перерывов
- 💬 Обработка запросов: 100% входящих сообщений получают ответ
- 😊 Удовлетворенность клиентов: +35% (по опросам NPS)
🔧 Технологический стек
Backend & Automation:- n8n (workflow orchestration)
- AI Agent node с RAG
- JavaScript/Node.js (custom code nodes)
- Supabase (PostgreSQL для данных)
- Yandex Geocoder API
Frontend:- Vanilla JavaScript (оптимизация веса)
- Material Design 3
- CSS3 animations
- LocalStorage API
Security:- Prompt injection protection
- Content filtering (profanity detection)
- Input sanitization
- Canary tokens
- Rate limiting
📱 Особенности интеграции
- Встраивается на любой сайт одним <script> тегом
- Responsive дизайн: desktop/tablet/mobile
- Кроссбраузерность: Chrome, Safari, Firefox, Edge
- Поддержка iOS 12+, Android 8+
- Graceful degradation при отсутствии JS
🚀 Масштабируемость
Архитектура позволяет легко:
- Добавлять новые студии в Supabase
- Обновлять цены без изменения кода
- Подключать дополнительные AI-инструменты
- Интегрировать с CRM/аналитикой
- Переносить на другие сети автомоек
🎓 Ключевые навыки проекта
✅ AI/LLM промпт-инжиниринг
✅ RAG-архитектура для AI-агентов
✅ n8n workflow automation
✅ Интеграция API (Yandex, Supabase)
✅ JavaScript (frontend + backend)
✅ Геолокация и картография
✅ Security best practices
✅ UX/UI для чат-интерфейсов
✅ Regex и парсинг естественного языка
📊 Метрики проекта
- Строк кода: ~1200+ (JavaScript)
- Промпт: 450+ строк
- Nodes в workflow: 15+
- Время разработки: 3 недели
- Время ответа системы: <2 сек
- Uptime: 99.8%