CTR · encantoshop.es · чат-бот

Как устроен чат-бот ENCANTO

Простыми словами: из чего он состоит, что за что отвечает, как проходит одно сообщение от клиента до ответа, что бот умеет, чего пока не умеет и где это всё крутить.

Состояние на 16.09.2026 · виджет v123 · сервер shop-chat-agent-encanto-prod · код mile-development/shop-chat-agent-encanto

Одним абзацем

В углу сайта висит кнопка чата. Клиент пишет вопрос — отвечает не человек, а ИИ-модель Claude (Anthropic), которой мы дали роль консультанта-визажиста ENCANTO. У бота есть «руки»: он умеет искать в живом каталоге Shopify, открывать карточку товара, класть товар в корзину клиента и читать правила магазина. Всё, что касается доставки, возврата, оплаты и бренда, он знает из нашей базы знаний. Ничего не выдумывает: товары и цены — только те, что вернул Shopify в момент вопроса.

Три части системы

1 · на сайте

Виджет

То, что видит клиент. Живёт внутри темы Shopify как блок приложения — включается один раз и показывается на всех страницах и языках сайта.

  • Кнопка чата, окно, три стартовые кнопки: Доставка, Возврат и обмен, Помочь подобрать
  • Показывает ответ по мере набора (стриминг), карточки товаров с фото, ценой и кнопкой «В корзину»
  • Перед каждым сообщением читает корзину клиента и передаёт её боту; после ответа обновляет значок корзины
  • 11 языков интерфейса, язык берётся из версии сайта
  • Файлы: extensions/chat-bubble/assets/chat.js, chat.css
2 · наш сервер

Бэкенд на Fly.io

Небольшое приложение в Амстердаме. Получает сообщение от виджета, собирает инструкцию для ИИ, вызывает Claude и Shopify, отдаёт ответ обратно по частям.

  • Собирает «системную инструкцию»: роль, правила, знания, настройки магазина, дата, страна и язык покупателя, id его корзины
  • Переводит запросы ИИ к Shopify и обратно, чистит и сжимает данные
  • Хранит историю диалогов в SQLite на диске сервера, бэкап в S3 каждые несколько секунд (Litestream)
  • Аккаунт Fly — клиентский (биллинг у CTR), доступы в Team Pro → проект CTR
3 · внешние сервисы

Claude и Shopify

Мозг и данные. Мы не храним каталог и не учим модель — всё берётся по запросу.

  • Claude API (модель claude-sonnet-4-6) — понимает вопрос, решает, что искать, пишет ответ на языке клиента
  • Shopify UCP (/api/ucp/mcp) — поиск по каталогу, карточка товара, корзина. Новый протокол Shopify 2026 года; старый API теперь отдаёт только правила магазина
  • Shopify MCP (/api/mcp) — политики магазина и FAQ
  • Shopify требует от бота «паспорт агента» — публичный JSON-профиль, мы отдаём его с сервера по адресу /.well-known/ucp

Как это связано

клиент
Пишет в чат«Покажи кисти для тональной основы»
виджет
Отправляет на сервертекст + id диалога + токен корзины + страница, страна, язык
сервер
Собирает инструкциюроль, правила, знания, дата, корзина → вызывает Claude
claude
Думает и действуетпросит сервер выполнить поиск в Shopify, получает 8–10 товаров, пишет ответ
виджет
Показываеттекст по частям, карточки товаров, обновлённую корзину
→ POST /chat
→ system prompt
⇄ Shopify UCP
→ поток событий (SSE)

Одно сообщение по шагам

  1. Клиент пишет «Добавь первую в корзину».
    виджет · читает /cart.js, чтобы знать текущую корзину
  2. Сервер достаёт историю диалога из базы, чистит служебные поля, добавляет новое сообщение.
    сервер · SQLite
  3. Сервер собирает инструкцию для модели: кто она, как отвечать, что запрещено, знания по доставке/возврату/оплате, сегодняшняя дата, страна и язык покупателя, id корзины, список доступных «инструментов».
    сервер · app/prompts + app/services/claude.server.js
  4. Claude решает, что нужно действие, и просит: «update_cart, добавить вариант 57612100141381, 1 шт».
    claude · tool use
  5. Сервер выполняет действие в Shopify. Если корзина уже существует — обновляет её через UCP. Если корзина пустая (у Shopify тогда ещё нет настоящей корзины) — сервер даёт команду виджету, и виджет сам добавляет товар в корзину браузера.
    сервер · app/mcp-client.js · событие cart_add_items
  6. Результат возвращается модели в сжатом виде: что добавлено, ссылка на оформление заказа.
    сервер → claude
  7. Claude пишет ответ на языке клиента: что добавлено, цена, ссылка «перейти к оформлению», одно предложение допродажи.
    claude · стриминг
  8. Виджет показывает текст по мере набора, обновляет значок корзины, а сервер сохраняет ответ в историю.
    виджет + сервер

Обычный ответ без поиска — 3–10 секунд. С поиском по каталогу — 10–18 секунд (два обращения к модели: сначала решить, что искать, потом написать ответ).

Откуда бот знает, что говорить

ИсточникЧто тамГде менять
Кто он, факты бренда, FAQ, примерыРоль и голос бренда, факты и запреты («ручки выдержаны 20 лет», «не обещать рост волос»), база знаний вопрос-ответ, примеры идеальных ответов — редактирует мерчант во вкладке Knowledge в апке, применяется со следующего сообщения, без деплоя. Есть «Reset to default»Админка Shopify → апка → Knowledge
Общие правила поведенияТон, длина ответа, не больше 3 товаров, один уточняющий вопрос, сравнения с брендами, медицинские советы, эмодзи, когда давать почту — логика продукта, одинаковая для всех магазиновapp/prompts/fields/behavioral-rules.md (в коде)
Живые данные магазинаТарифы доставки по странам и зонам с условиями бесплатной доставки, маркеты (страны и валюты), тексты политик (возврат) — бот сам читает их из настроек Shopify раз в час и после нажатия «Refresh now» в Settings. Меняете тариф в админке → бот знает через час, без деплоя. Именно так вскрылось, что страница политики доставки на сайте устарела: реальные тарифы — Испания 7 €, Франция 8 €, Андорра 6 €Shopify admin → Settings → Shipping and delivery / Markets / Policies; код: app/services/store-knowledge.server.js
Знания о магазине (в коде)Сроки обработки и доставки, способы оплаты (Klarna и др. в Shopify не читаются), факты о бренде (2017, Украина/Корея, 30+ стран, ручки выдержаны 20 лет), размер каталога, чего нет в ассортименте. Тарифы тут только как запасной вариант на случай, если Shopify недоступенapp/prompts/knowledge/faq.js, shipping-policies.js
Подробные FAQ по категориямКак ухаживать за кистями, волокна, палетки — длинные справки, бот берёт из них только нужноеapp/prompts/knowledge/product-faqs/
Живые данные ShopifyТовары, цены, скидки, наличие, корзина — запрашиваются в момент вопроса. У нас не хранятсяАдминка Shopify (карточки товаров, коллекции Best Seller и Sale)
Настройки в апке (Settings)Email поддержки, порог бесплатной доставки, окно возврата и обмена — мерчант правит сам в админке Shopify → Apps → encanto-chat-agent → Settings; там же видно, что подтянулось из магазинаАдминка Shopify → апка → Settings
Правило номер один в инструкции: назвать товар, цену или цифру можно только если она пришла из Shopify или лежит в базе знаний. Нет данных — бот честно говорит об этом и предлагает ближайшую реальную альтернативу.

Что бот умеет сейчас

Продажа и подбор

  • Поиск по живому каталогу с карточками (фото, цена, кнопка)
  • Подбор: один уточняющий вопрос → 2–3 варианта с ценой
  • Хиты продаж из коллекции Best Seller, скидки из Sale
  • Корзина: добавить, изменить количество, ссылка на оформление
  • «Добавь палетку и кисть» без уточнений — сам выбирает бестселлеры
  • Допродажа и добор до бесплатной доставки
  • Возражение по цене — через срок службы 8–10 лет, без скидок

Консультация и сервис

  • Доставка по странам и зонам — из живых настроек Shopify (46 зон), сроки, острова и исключения
  • Возврат и обмен 14 дней, кто платит, что делать при браке
  • Оплата: карты, PayPal, Apple/Google Pay, Klarna, Shop Pay и другие
  • Техника нанесения и уход — коротко, до 7 шагов
  • Подростки 14–17, чувствительная кожа, тест на сгибе локтя
  • Опт, счёт для компании, рекламация — собирает детали, почту даёт один раз
  • Отвечает на языке клиента, несколько вопросов — нумерованным списком

Чего пока не умеет

Ждёт материалы клиента

  • Названия оттенков палеток и карандаша
  • Составы INCI, тальк, аллергены — пока отправляет на упаковку
  • Условия опта, CPNP/CPSR, скидки визажистам
  • Порядок нанесения для бровей, уход за палетками и ресницами

Нужны решения или отдельные задачи

  • Статус заказа по номеру — приложению нужно право read_orders, мерчант должен переодобрить
  • Отзывы Judge.me, подарочная упаковка, передача живому менеджеру, GDPR-описание — новые задачи в таблице
  • Скорость: с поиском 10–18 с при цели ТЗ 15 с
  • Срок обмена: сейчас 14 дней как на сайте, в ТЗ было 30 — решение за клиентом

Как это обновляется

сервер

Логика и общие правила

Правим код в репозитории → flyctl deploy --remote-only --app shop-chat-agent-encanto-prod. Через 2–3 минуты в проде. Тексты про бренд и FAQ деплоя не требуют — они во вкладке Knowledge.

виджет

Кнопки, переводы, внешний вид

Правим extensions/chat-bubbleshopify app deploy. Shopify раздаёт новую версию на все страницы сам. Важно: у расширения фиксированный uid, тема ссылается на него — менять нельзя.

shopify

Товары, тарифы, маркеты, политики

Ничего деплоить не надо: новый товар, цена или скидка — у бота сразу (он спрашивает Shopify каждый раз); новый тариф доставки, страна или текст политики — в течение часа или сразу после «Refresh now» в Settings апки.

Как проверяем

Два уровня. Массовый прогон — скрипт шлёт боту серии вопросов (12 вопросов ТЗ × 5 языков + сценарии по строкам таблицы, 86 диалогов) и собирает ответы, время, ошибки, лишние эмодзи, английские вставки, служебные слова. Живой тест — Playwright открывает encantoshop.es, кликает кнопку чата, проходит подбор → карточки → корзина и сверяет корзину Shopify. После правок статусы переносим в таблицу «не выполненные задачи», лист «Бот».

Логи сервера: flyctl logs --app shop-chat-agent-encanto-prod — видно каждое обращение к Shopify и расход токенов по диалогу.

Где что лежит

ЧтоГде
Кодgithub.com/mile-development/shop-chat-agent-encanto, ветка master. Внутри CLAUDE.md — техническая шпаргалка по деплою и архитектуре
СерверFly.io, приложение shop-chat-agent-encanto-prod, регион ams; рядом blog-generate (генератор блога, отдельный продукт)
Приложение ShopifyPartner-апка encanto-chat-agent, установлена на encantoshop.es; виджет — theme app extension chat-bubble. Экраны в админке (Analytics, Conversations, Settings, Debug) — наши страницы из того же репозитория (app/routes/app.*.jsx), встроены через App Bridge, деплоятся вместе с сервером
ДоступыTeam Pro → проект CTR → раздел «Fly.io — хостинг чат-бота» (только админ)
Инструкция «как работаем / как поставить в другой магазин»Team Pro → Довідник → вкладка «Shopify app development usefull»
Статусы доработокGoogle Drive → «не выполненные задачи.xlsx» → лист «Бот»

Как поставить такого бота другому клиенту

  1. Форк репозитория и своя Partner-апка Shopify (shopify app config link).
  2. Свой сервер на Fly: новое приложение, диск для базы, секреты (ключ Claude, ключи апки, адрес сервера).
  3. Заполнить знания под бренд в админке (вкладка Knowledge): кто ассистент, факты и запреты, FAQ, примеры. Тарифы, маркеты, политики и каталог подтягиваются из Shopify сами.
  4. Установить апку в магазин и включить блок чата в теме (цвет, приветствие — в редакторе темы).
  5. Прогнать тесты — те же скрипты, только с другим доменом.