Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Сайт на Next.js · кабинет, ИИ-помощник, Telegram

Личный кабинет клиента

Клиент типографии звонит менеджеру, чтобы узнать, где тираж, ищет в почте счёт и третью версию макета, а бухгалтер ждёт оригиналы УПД. Здесь всё это — в одном кабинете: видно, на каком этапе каждый заказ, макет утверждается в два клика, а правки отмечаются точками прямо на макете, счёт оплачивается по СБП, документы подписываются электронной подписью. ИИ-помощник отвечает по данным кабинета — где заказ, что оплатить, сколько стоит тираж, — а когда не справляется, передаёт диалог менеджеру.

Сценарий: Типография «Оттиск» из Новосибирска и её клиент, сеть кофеен «Северная кофейня», — вымышленные: восемь заказов на разных этапах, три открытых счёта (один просрочен), три документа на подпись.

Скриншот демо: Личный кабинет клиента

Открыть демо

Открыть сайт

Код из SMS в демо — 4237, или нажмите «Войти по демо-доступу».

Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.

Что показывает демо

  • Вход по номеру телефона и коду из SMS; без входа кабинет закрыт

  • Обзор: что требует действия клиента прямо сейчас — макеты, счета, подписи, — заказы в работе с прогрессом и лента событий

  • Заказы с фильтрами и поиском; в карточке — семь этапов производства, параметры тиража, трекинг курьера, счёт, документы и история

  • Согласование макета: правки ставятся точками на самом макете, утвердить можно только после подтверждения проверки — и заказ сразу уходит в печать

  • Счета с оплатой по СБП (QR-код), картой или платёжкой; оплата двигает заказ дальше — дизайнер готовит макет

  • Документы: договор, УПД, акты сверки с просмотром и электронной подписью по МЧД, можно подписать все сразу

  • Новый заказ с калькулятором: тираж, бумага, отделка, срочность, цена за штуку и дата готовности; «Повторить» подставляет параметры прошлого заказа

  • Чат с ИИ-помощником, который отвечает по данным кабинета и показывает, какие функции вызвал; если не понял дважды — предлагает менеджера

  • Передача менеджеру с историей диалога: заявка уходит в CRM, менеджер отвечает в том же чате

  • Уведомления в Telegram: подключение через бота, выбор событий и предпросмотр сообщений

Как попробовать

  1. Войдите

    Введите любой российский номер, код из SMS в демо — 4237. Или нажмите «Войти по демо-доступу».

  2. Отметьте правку на макете

    Откройте «Утвердить макет — № 2481», нажмите на «Тыквеный латте» в меню и напишите, что исправить. Отправьте правки.

  3. Оплатите счёт

    В колокольчике или в «Счетах» оплатите счёт № 1183 по СБП — заказ на наклейки перейдёт к макету, его можно утвердить и отправить в печать.

  4. Спросите помощника

    В чате нажмите «Где мои капхолдеры?» или «Сколько стоят 500 визиток?», затем «Как это работает» — увидите вызванные функции. Нажмите «Позвать менеджера».

  5. Откройте панель владельца

    Оплата, решение по макету, новый заказ и вопрос менеджеру лежат во вкладке «Заявки» — так их увидела бы CRM типографии.

Без платных нейросетей

Платных запросов к нейросетям нет: на месте языковой модели — локальный разбор вопроса, который вызывает те же функции (заказ, счета, документы, расчёт цены, передача менеджеру) и отвечает по данным кабинета. SMS, оплата, подпись и Telegram имитируются. Ваши действия хранятся только в вашем браузере, заявки видны только вам в «Панели владельца». Типография, клиент, цены и документы — вымышленные.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Данные из учётной системы типографии (1С, CRM или своя MIS) через API; статусы этапов — от производства в реальном времени
  • Вход по SMS через шлюз (SMS.ru, SMSC) с ограничением попыток; роли сотрудников клиента — заказы, счета, только просмотр
  • Оплата через эквайринг с СБП (ЮKassa, Т-Банк), счёт и чек формируются автоматически
  • Подпись документов через оператора ЭДО (Диадок, СБИС) с МЧД
  • ИИ-помощник — языковая модель с вызовом функций (YandexGPT или GigaChat) на данных только этого клиента; передача менеджеру в CRM
  • Telegram-бот с привязкой по одноразовой ссылке и кнопками «Утвердить макет», «Оплатить» прямо в сообщении

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Клиент сам видит, где тираж, и не звонит менеджеру по пять раз за заказ — у менеджера освобождается время на продажи.
  • Макет утверждается в тот же день, а правки точками на макете не теряются в переписке — печать начинается раньше.
  • Счёт оплачивается по СБП из кабинета, документы подписываются электронной подписью — деньги приходят быстрее, оригиналы не нужно возить.

Для разработчиков

  • Состояние кабинета — сидовые данные плюс действия клиента, сведённые чистыми функциями orders, invoices, docs и todos: оплата сама переводит заказ к макету, утверждение — в печать. Покрыто тестами.
  • ИИ-помощник устроен как модель с вызовом функций: get_order, list_invoices, list_documents, calc_price, escalate. В демо их выбирает разбор вопроса, ответ строится из тех же данных, что видит клиент.
  • Каждое действие — Server Action с проверкой полей на сервере: заявка об оплате, решении по макету, новом заказе и вопросе менеджеру попадает в панель владельца, как в CRM.

Советы

  • Совет 01

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

  • Совет 02

    Давайте ИИ-помощнику только функции с данными этого клиента и всегда — кнопку «позвать человека»: так он не выдумает статус и не разозлит клиента.

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Сайт на Next.js · лендинг услуги

    работает

    Лендинг стоматологии

    Одностраничный сайт клиники, который приводит пациентов: квиз подбирает лечение, калькулятор считает план с рассрочкой, онлайн-запись показывает свободное время врачей, ИИ-консультант отвечает по прайсу. Заголовок проверяется A/B-тестом, заявки и цели видны в панели владельца.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · B2B, многостраничный

    работает

    Сайт производственной компании

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

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · каталог, карта, сравнение

    работает

    Каталог недвижимости с умным поиском

    Каталог квартир агентства недвижимости: напишите «двушка у метро до 12 млн» — поиск сам выставит фильтры, покажет квартиры на карте города, сравнит до четырёх и пришлёт новые в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · ИИ-перевод, SEO по языкам

    работает

    Экспортный сайт на четырёх языках

    Сайт экспортёра алтайского мёда на русском, английском, китайском и арабском: переведённые адреса страниц, SEO по языкам, калькулятор оптовой цены с доставкой и студия перевода, которая проверяет черновик нейросети по глоссарию.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · Python в браузере, ИИ-наставник

    работает

    Онлайн-школа с кабинетом ученика

    Онлайн-школа аналитики: лендинг с задачей на Python, которая проверяется прямо в браузере, тест уровня с персональной программой, рассрочка с расчётом налогового вычета, кабинет ученика с домашними заданиями и ИИ-ревью, ИИ-наставник по материалам курса и сертификат с проверкой по QR-коду.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · запись по госномеру, фотоотчёт, согласование

    работает

    Автосервис с записью и статусом ремонта

    Сайт автосервиса: запись по госномеру или VIN в свободные окна постов, разбор «что стучит?» с вероятными причинами и вилкой цены, статус ремонта с фотоотчётом, согласованием доп. работ и оплатой по ссылке, гараж с историей обслуживания и прогнозом следующего ТО.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · разбор ситуации, претензии, калькуляторы

    работает

    Юридическая компания с ИИ-разбором

    Сайт юрфирмы: ситуация своими словами прямо в шапке, ИИ-разбор с оценкой перспектив, претензия в Word, госпошлина, неустойка и срок давности, чек-лист документов, ход дела в личном кабинете, конструктор цены и запись к юристу.

    • Next.js
    • React
    • TypeScript

  • Сайт SaaS на Next.js · песочница, кабинет, API

    работает

    SaaS: ИИ-ответы на отзывы WB и Ozon

    Сайт и кабинет SaaS-сервиса, который отвечает на отзывы Wildberries и Ozon: песочница с разбором отзыва и проверками, автопилот по рейтингу, очередь с согласованием, аналитика тем, тарифы с калькулятором окупаемости, подключение магазина по ключу, счёт по ИНН и документация API с живой консолью.

    • Next.js
    • React
    • TypeScript

  • Сайт ресторана на Next.js · меню, бронь, доставка

    работает

    Ресторан с доставкой

    Сайт ресторана с доставкой: меню с фильтрами по аллергенам и диетам, ИИ-подбор ужина по обычной фразе, бронь стола по схеме зала со свободными столами на выбранное время, корзина с зонами доставки, минимальным заказом и промокодами, отслеживание заказа с курьером на карте.

    • Next.js
    • React
    • TypeScript

  • Сайт фитнес-студии на Next.js · запись, абонементы, кабинет

    работает

    Фитнес-студия

    Сайт фитнес-студии малых групп: расписание на неделю с местами и записью в два клика, лист ожидания с автоматическим переносом в группу, абонементы с заморозкой из кабинета, ИИ-план тренировок на 4 недели по пяти вопросам и личный кабинет со статистикой посещений.

    • Next.js
    • React
    • TypeScript

  • Сайт IT-конференции на Next.js · программа, билеты, нетворкинг

    работает

    Сайт конференции

    Сайт двухдневной конференции: программа по залам и трекам с личным расписанием, ИИ-подбор докладов без пересечений по роли и свободному тексту, билеты волнами с промокодами и скидкой команде, QR-код на каждого участника с проверкой на входе и нетворкинг с подбором собеседников и встречами в перерывах.

    • Next.js
    • React
    • TypeScript

  • Корпоративный сайт логистики на Next.js · калькулятор, трекинг, ИИ-заявка

    работает

    Сайт транспортной компании

    Корпоративный сайт транспортной компании: калькулятор, который сразу сравнивает сборный груз и отдельную машину, отслеживание груза с машиной на карте, ИИ-разбор заявки из письма или накладной с подсветкой пропущенных полей, карта складов и терминалов с расчётом хранения, анкета перевозчика с проверкой допуска и реквизиты с проверкой контрольных сумм.

    • Next.js
    • React
    • TypeScript