Сайт на Next.js · каталог, карта, сравнение
Каталог недвижимости с умным поиском
Покупатель не думает фильтрами — он думает фразами: «двушка у метро, до двенадцати, не первый этаж». На обычном сайте он десять раз щёлкает по чекбоксам и бросает. Здесь он пишет как в мессенджере, а под строкой сразу видно, что поиск понял — каждое условие можно убрать одним нажатием. Если точно ничего нет, сайт не показывает пустую страницу, а предлагает ближайшее и говорит, что ослабил. Дальше — карта с ценами, сравнение, запись на просмотр в свободный слот и подписка на новые квартиры в Telegram.
Сценарий: Агентство «Квартал» в Казани — вымышленное: 48 квартир в семи районах у одиннадцати станций метро, новостройки и вторичка, история цен, три агента.
Открыть демо
Начните с главной: напишите запрос своими словами и нажмите «Как это работает».
Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.
Что показывает демо
Как попробовать
Найдите словами
На главной напишите «двушка у метро до 12 млн». Под строкой появятся три условия — нажмите «Как это работает» и посмотрите, во что превратился текст.
Уточните на карте
В каталоге нажмите «Обвести область» и обведите центр. Останутся квартиры внутри; уберите чип «до метро» — найдётся больше.
Попросите невозможное
Напишите «однушка до 3 млн у Козьей слободы». Сайт не покажет пустоту, а предложит ближайшее и скажет, какие условия ослабил.
Сравните и запишитесь
Нажмите весы на двух-трёх карточках и откройте «Сравнить». Затем на странице квартиры выберите день и свободное время просмотра.
Откройте панель владельца
Кнопка в верхней полосе: запись на просмотр, подписка и оценка лежат во вкладке «Заявки», а поиск и сравнение — в «Целях».
Без платных нейросетей
Платных запросов к нейросетям нет: запрос разбирает локальный разборщик на правилах, в продакшене на его месте языковая модель с вызовом функции поиска. Формы проверяются на сервере, но ничего не хранится: заявка возвращается в ваш браузер и видна только вам в «Панели владельца». Квартиры, цены и схема города — вымышленные.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- Разбор запроса языковой моделью YandexGPT или GigaChat с function calling: понимает опечатки и «чтобы кот не мешал соседям»
- Объекты из CRM агентства (Intrum, amoCRM) или фида ЦИАН и Авито, фото — с CDN, обновление каждые 15 минут
- Настоящая карта (Яндекс Карты или 2ГИС) с теми же кластерами и областью поиска, время до метро по маршрутам
- Бот подборок в Telegram: новые объекты по сохранённому запросу, запись на просмотр в календарь агента
- Яндекс Метрика с целями: какие запросы пишут, где бросают, сколько записей принёс умный поиск
Стек
- Все демо по стеку:
- Next.js
- React
- TypeScript
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Server Actions
Основано на
Книги и дисциплины, идеи из которых работают в этом демо.
Книга · Райан Дэй
Прикладные API для искусственного интеллекта и Data Science
Блок «Как это работает» показывает поисковую фразу как вызов функции для языковой модели: API описан так, чтобы его поняли и человек, и модель.
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Покупатель пишет как думает и сразу видит результат — меньше брошенных поисков и больше записей на просмотр.
- Пустая выдача не теряет клиента: сайт предлагает ближайшее, а подписка в Telegram возвращает его, когда появится точное.
- Агент получает заявку с конкретной квартирой и временем просмотра, а не «перезвоните, интересуюсь».
Для разработчиков
- Разбор запроса — чистая функция «текст → фильтры» с юнит-тестами; тот же контракт, что у вызова функции в языковой модели, поэтому её можно подменить без правок интерфейса.
- Карта — SVG с собственными масштабом, перетаскиванием, щипком и кластеризацией в экранных координатах, область поиска проверяется алгоритмом точки в многоугольнике.
- Состояние каталога синхронизируется с адресом через history.replaceState без запроса к серверу; карточки квартир собираются статикой через generateStaticParams.
Советы
Совет 01
Показывайте, как поиск понял запрос, и давайте убрать любое условие — без этого «умный» поиск раздражает, когда ошибается.
Совет 02
Никогда не показывайте пустую выдачу: ослабьте условия и честно скажите, что изменили.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Сайт на Next.js · лендинг услуги
Лендинг стоматологии
Одностраничный сайт клиники, который приводит пациентов: квиз подбирает лечение, калькулятор считает план с рассрочкой, онлайн-запись показывает свободное время врачей, ИИ-консультант отвечает по прайсу. Заголовок проверяется A/B-тестом, заявки и цели видны в панели владельца.
- Next.js
- React
- TypeScript
- работает
Сайт на Next.js · B2B, многостраничный
Сайт производственной компании
Многостраничный сайт завода металлоконструкций, который продаёт сам: калькулятор считает стоимость здания с живым чертежом, конструктор собирает техзадание, кейсы фильтруются по отрасли, на вакансии можно откликнуться с резюме, а поиск по сайту понимает запросы своими словами.
- Next.js
- React
- TypeScript
- работает
Сайт на Next.js · ИИ-перевод, SEO по языкам
Экспортный сайт на четырёх языках
Сайт экспортёра алтайского мёда на русском, английском, китайском и арабском: переведённые адреса страниц, SEO по языкам, калькулятор оптовой цены с доставкой и студия перевода, которая проверяет черновик нейросети по глоссарию.
- Next.js
- React
- TypeScript
- работает
Сайт на Next.js · кабинет, ИИ-помощник, Telegram
Личный кабинет клиента
Кабинет клиента типографии: заказы с этапами производства, согласование макета с правками прямо на макете, счета с оплатой по СБП, документы с электронной подписью, новый заказ с расчётом цены, чат с ИИ-помощником и менеджером, уведомления в Telegram.
- 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