Как собрать Telegram Mini App без программиста в 2026: калькулятор цен нейросетью

Telegram Mini App - это обычная веб-страница, которая открывается прямо внутри Telegram, без перехода в браузер. Собрать такую без программиста реально за один вечер: страницу целиком пишет нейросеть по твоему описанию, ты выкладываешь готовый HTML-файл на бесплатный хостинг и регистрируешь ссылку в @BotFather командой /newapp. Код руками не пишешь ни на одном шаге.

В этом гайде соберём сквозной пример - калькулятор стоимости услуг. Попросим Claude или ChatGPT написать одностраничный HTML-калькулятор, выложим его на бесплатный хостинг и подключим к боту через BotFather. Дам готовый промпт для генерации, реальный пошаговый флоу с командами, разберу частые ошибки и честно скажу, где у этого способа границы.

Коротко: словарик

• Telegram Mini App - веб-страница (сайт), которая открывается внутри Telegram по кнопке. Технически это твой HTML на хостинге плюс ссылка, зарегистрированная в BotFather.
• Бот - аккаунт в Telegram, который отвечает на сообщения и команды. Именно к боту прикрепляется Mini App.
• @BotFather - официальный бот Telegram для создания и настройки ботов и приложений. Через него идут все команды вроде /newbot и /newapp.
• Хостинг статики - бесплатный сервис, который держит твою HTML-страницу в интернете и даёт на неё ссылку с HTTPS.
• HTTPS - защищённый адрес с замочком. Для рабочего Mini App обязателен, бесплатные хостинги дают его сами.

Если сама идея «нейросеть делает за тебя рабочую вещь» тебе ещё в новинку, сначала загляни в гайд про Claude Code для нетехнарей - там разобрано, как ИИ реально собирает файлы и страницы, а не просто советует.

Что такое Telegram Mini App простыми словами

Разберём на трёх сущностях, которые легко путают: бот, сайт и Mini App.

Бот - это собеседник. Ты пишешь ему сообщение или жмёшь кнопку, он отвечает текстом. Общение идёт лентой сообщений, как в переписке. Бот хорош для сценариев «вопрос - ответ»: записать на приём по шагам, прислать прайс, ответить на частый вопрос.

Сайт - это отдельная страница в браузере. Ты переходишь по ссылке, открывается Chrome или Safari, там твоя страница. Человек уходит из Telegram в браузер.

Mini App - это тот же сайт, но открытый прямо внутри Telegram, без выхода в браузер. Человек жмёт кнопку в боте или в меню, и поверх чата разворачивается полноценный экран: поля, ползунки, кнопки, картинки. Закрыл - вернулся в переписку.

Простая метафора: бот - это продавец, который отвечает на сообщения. Mini App - это витрина, которую продавец показывает, не выпуская клиента из магазина.

По ресёрчу на июль 2026, Mini App технически - это обычное веб-приложение (HTML-страница), которое Telegram открывает во встроенном окне и связывает с твоим ботом. Никакой особой «телеграмной» технологии для простого калькулятора не нужно: подойдёт обычная HTML-страница.

Mini App или бот: что выбрать под задачу

Прежде чем собирать, реши, что тебе вообще нужно. Для калькулятора цен Mini App почти всегда удобнее бота. В боте человеку пришлось бы отвечать на вопросы по одному: «сколько комнат?», «какой метраж?», «нужен ли демонтаж?». В Mini App он видит весь экран сразу, двигает ползунки и мгновенно получает сумму. Меньше шагов, меньше отказов.

Но бывают задачи, где бот сильнее. Вот таблица, чтобы выбрать за минуту.

Вывод простой: где человеку надо что-то повыбирать глазами и руками (посчитать, полистать, отметить) - бери Mini App. Где нужен диалог по шагам или серверная логика с сохранением - бери бота или связку «бот плюс приложение».

Что мы соберём: калькулятор стоимости услуг

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

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

Весь путь - четыре шага:

1. Нейросеть пишет одностраничный HTML-калькулятор по твоему промпту.
2. Ты выкладываешь этот файл на бесплатный хостинг и получаешь ссылку с HTTPS.
3. Регистрируешь ссылку как Mini App через @BotFather командой /newapp.
4. Прикрепляешь приложение к боту, чтобы люди открывали его кнопкой.

Ни на одном шаге не нужно писать код руками. Дальше по порядку.

Шаг 1. Готовый промпт: нейросеть пишет калькулятор

Открываешь Claude или ChatGPT и даёшь промпт ниже. Он написан так, чтобы на выходе получился один самодостаточный HTML-файл, который сразу работает.

Ты фронтенд-разработчик. Напиши мне ОДИН самодостаточный HTML-файл -
калькулятор стоимости ремонта квартиры. Требования:
 
1. Весь код (HTML, CSS, JavaScript) в одном файле, без внешних библиотек
   и без подключения файлов - чтобы работало открытием в браузере.
2. Поля ввода:
   - Тип помещения: выпадающий список (квартира, офис, дом).
   - Площадь в м2: числовое поле.
   - Тип ремонта: переключатель (косметический 4000 ₽/м2,
     капитальный 8000 ₽/м2, дизайнерский 14000 ₽/м2).
   - Чекбоксы допработ: демонтаж (+800 ₽/м2), электрика (+1200 ₽/м2),
     сантехника (+1500 ₽/м2).
3. Итоговая сумма считается и обновляется сразу при любом изменении полей,
   без кнопки "рассчитать". Показывай сумму крупно.
4. Внизу кнопка "Оставить заявку".
5. Дизайн: чистый, современный, крупные кнопки под палец, адаптив под телефон.
   Подключи скрипт Telegram Web App: https://telegram.org/js/telegram-web-app.js
   и используй цвета темы Telegram, чтобы приложение выглядело родным внутри мессенджера.
6. Все цены вынеси в начало JavaScript в понятные переменные,
   чтобы я мог легко их поменять.
 
Выдай только код файла, целиком, готовый к сохранению как index.html.

Цены в промпте условные - поставь свои. Нейросеть вернёт код целиком. Скопируй его, вставь в обычный «Блокнот» (или TextEdit на Mac в режиме простого текста) и сохрани файлом с именем index.html.

Проверь локально: открой этот файл двойным кликом, он запустится в браузере. Подвигай поля, убедись, что сумма считается правильно. Если что-то не так - вернись в чат и напиши нейросети конкретно: «сумма не пересчитывается при смене площади, поправь» или «сделай кнопки крупнее». Это диалог, правь до нужного результата.

Шаг 2. Выкладываем страницу на бесплатный хостинг

Готовый index.html нужно разместить в интернете, чтобы у него появилась ссылка с HTTPS. Для Mini App это обязательное условие: рабочее приложение Telegram примет только по защищённому адресу с замочком.

Хорошая новость - все популярные бесплатные хостинги статики выдают HTTPS автоматически. Вот варианты, проверенные веб-поиском на июль 2026.

Для первого раза проще всего Netlify Drop: заходишь на страницу перетаскивания, кидаешь туда папку с твоим index.html, и через несколько секунд получаешь готовую ссылку вида https://твоё-имя.netlify.app. Скопируй её, она понадобится на следующем шаге.

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

Проверь ссылку: открой её на телефоне. Калькулятор должен открыться и работать так же, как локально. Если открывается - переходим к регистрации в Telegram.

Шаг 3. Создаём бота через @BotFather

Mini App всегда прикрепляется к боту, поэтому сначала нужен бот. Создаётся он за минуту.

1. В поиске Telegram набери @BotFather и открой официальный бот (у него синяя галочка).
2. Отправь команду /newbot.
3. BotFather спросит имя бота (как он будет называться в списке чатов) - введи любое, например «Калькулятор ремонта».
4. Затем спросит username - он должен заканчиваться на bot, например remont_calc_bot. Если занят, придумай другой.
5. В ответ BotFather пришлёт токен - длинную строку вида 123456:ABC-DEF.... Это ключ доступа к боту. Скопируй и сохрани его в надёжном месте, никому не показывай.

Всё, бот создан. Для калькулятора-витрины токен по факту не понадобится, но сам бот нужен как «дом» для приложения. Если хочешь, чтобы бот ещё и отвечал на сообщения или собирал заявки кодом, это отдельная история - её разбираем в гайде как создать бота в Телеграме самому бесплатно.

Шаг 4. Регистрируем Mini App командой /newapp

Теперь привяжем нашу страницу к боту как Mini App. По официальной документации Telegram Mini Apps (проверено веб-поиском на июль 2026), флоу такой:

1. Вернись в чат с @BotFather.
2. Отправь команду /newapp.
3. BotFather попросит выбрать бота - отправь username твоего бота (тот, что оканчивается на bot).
4. Дальше он по очереди спросит:
   • Title - название приложения, которое увидят люди (например, «Калькулятор ремонта»).
   • Description - короткое описание, что делает приложение.
   • Photo - картинку-обложку размером 640×360 пикселей. Можно быстро сгенерировать нейросетью или сделать простую в Canva.
   • Demo GIF - демо-гифку. Необязательно, можно пропустить командой /empty, если BotFather её предложит.
   • Web App URL - вот сюда вставляешь твою HTTPS-ссылку с хостинга из шага 2.
   • Short name - короткое имя приложения латиницей для адреса (например, calc).
5. После этого приложение готово. BotFather пришлёт прямую ссылку вида https://t.me/твой_бот/calc.

Эта ссылка и есть твой Mini App. Открой её - калькулятор развернётся прямо внутри Telegram.

Шаг 5. Кнопка запуска: делаем приложение удобным

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

1. В @BotFather отправь /setmenubutton.
2. Выбери твоего бота.
3. Укажи ссылку на твоё приложение (ту же HTTPS-ссылку с хостинга).
4. Задай текст кнопки - например, «Рассчитать стоимость».

Теперь у бота в углу поля ввода появится кнопка меню. Человек открывает бота, жмёт её - и сразу попадает в калькулятор. Это самый короткий путь для пользователя.

Как приходят заявки из калькулятора

Калькулятор считает сумму, но заявку по-настоящему собрать сложнее. Тут честно про варианты.

Самый простой способ без кода. Кнопка «Оставить заявку» в калькуляторе ведёт в личку бота или сразу тебе в Telegram по ссылке https://t.me/твой_username?text=... с подставленным текстом заявки. Человек жмёт, у него открывается чат с уже заполненным сообщением (тип ремонта, площадь, сумма), он отправляет - ты получаешь. Быстро и без сервера.

Способ чуть сложнее. Внутри Mini App есть механизм отправки данных обратно боту (метод sendData). Но чтобы бот их принял и переслал тебе, нужен уже работающий бот с кодом, который слушает эти данные. Это уже полноценный бот, а не «одна HTML-страница» - как собрать его нейросетью, разбираем в гайде про бота без программирования.

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

Сделай кнопку "Оставить заявку" ссылкой на https://t.me/мой_username
с параметром text. В text подставь готовый текст заявки, где перечислены
выбранные параметры (тип помещения, площадь, тип ремонта, отмеченные
допработы) и итоговая сумма. Текст собирай из текущих значений полей,
чтобы при клике у меня в личке появлялось заполненное сообщение.

Примеры под задачу: 4 калькулятора из жизни

Каркас один, меняются параметры и формула. Вот как тот же промпт переделать под свою нишу - просто замени поля и цены в пунктах 2 и 6.

Клининг квартиры. Поля: тип уборки (поддерживающая, генеральная, после ремонта), площадь в м2, чекбоксы (мытьё окон, химчистка дивана, холодильник). Формула: базовая ставка за м2 умножается на коэффициент типа уборки, сверху фиксированные суммы за опции. Кнопка «Записаться на уборку».

Фотосъёмка. Поля: формат (портрет, семейная, предметная), число часов, чекбоксы (визажист, аренда студии, срочная обработка). Формула: часовая ставка умножить на часы плюс опции. Итог показываешь крупно, кнопка «Забронировать дату».

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

Репетитор. Поля: предмет, число занятий в месяц, формат (онлайн, очно), чекбоксы (подготовка к экзамену, проверка домашки). Формула: цена занятия умножить на количество, скидка за пакет от восьми занятий. Кнопка «Записаться на пробное».

Частые ошибки и как их избежать

Собрал калькулятор, а он «не работает». Почти всегда причина в одном из пяти пунктов ниже, и все они чинятся за пару минут.

Ссылка на HTTP вместо HTTPS. Самая частая. Приложение не открывается у людей, хотя у тебя в тесте всё было нормально. Проверь адрес: в начале должно стоять https:// с замочком. Хостинги из таблицы дают его сами, если видишь http:// - ты выложил файл не туда.

Файл назвали не index.html. Многие хостинги открывают по умолчанию именно index.html. Если сохранил как calc.html или калькулятор.html, ссылка на корень может отдавать пустую страницу. Переименуй в index.html латиницей, без пробелов.

Блокнот сохранил в .txt. В стандартном «Блокноте» Windows при сохранении легко получить index.html.txt - тогда браузер покажет код текстом, а не страницу. В окне сохранения выбери «Тип файла: Все файлы» и впиши имя с расширением .html вручную.

Username бота не оканчивается на bot. BotFather не пропустит username без окончания bot. Если он ругается на шаге /newbot - добавь bot или _bot в конец, например remont_calc_bot.

Обложка не того размера. На шаге /newapp для Photo нужен размер строго 640×360 пикселей. Загрузишь другой - BotFather попросит переделать. Сгенерируй картинку нейросетью с этим размером или обрежь в Canva заранее.

Как проверить, что всё работает

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

1. Открой ссылку на телефоне в браузере. Калькулятор грузится, поля видны, кнопки нажимаются пальцем без промаха. Если что-то налезает друг на друга - попроси нейросеть «поправь вёрстку под узкий экран телефона».
2. Подвигай все поля. Смени тип помещения, впиши площадь, поставь и сними чекбоксы. Сумма должна пересчитываться сразу при каждом изменении, без нажатия отдельной кнопки.
3. Проверь крайние значения. Впиши ноль, впиши очень большое число, отметь все допработы. Сумма не должна ломаться, показывать NaN или уходить в минус.
4. Открой приложение внутри Telegram. Перейди по ссылке https://t.me/твой_бот/calc или нажми кнопку меню в боте. Приложение разворачивается поверх чата, а не в браузере, и подхватывает цвета твоей темы Telegram.
5. Нажми «Оставить заявку». Должен открыться чат с заполненным сообщением: параметры и сумма на месте, текст читаемый. Отправь его сам себе и убедись, что всё пришло.

Прошли все пять - можно давать ссылку клиентам. Что-то из пунктов не сходится - вернись в чат с нейросетью и опиши симптом конкретно, одним предложением.

Честно про ограничения этого способа

Чтобы не было завышенных ожиданий, скажу прямо, где границы.

• Это витрина, а не система. Простой Mini App-калькулятор считает и показывает. Он не хранит историю заявок, не ведёт базу клиентов, не принимает оплату. Для этого нужен настоящий бэкенд, а это уже работа для разработчика.
• Заявки без кода приходят «в лоб». Способ с ссылкой в личку работает, но не даёт аналитики и автоматизации. Считать конверсию и вести воронку придётся руками.
• HTTPS обязателен. На тестовом окружении Telegram пускает HTTP, но для реальных людей нужна защищённая ссылка. Бесплатные хостинги её дают, так что проблема решается сама, но помни про это условие.
• Модерация и правила Telegram. Приложение должно соответствовать правилам платформы. Для честного калькулятора услуг проблем нет, но если задумаешь что-то на грани - изучи правила заранее.
• Нейросеть ошибается. Сгенерированный калькулятор надо проверить руками: правильно ли считает, работает ли на телефоне. Не выкладывай, не протестировав на разных значениях.

Если задача сложнее калькулятора - с базой клиентов, оплатой, личным кабинетом - честнее сразу заложить разработчика. Приложение на одной HTML-странице хорошо ровно до того момента, пока тебе не нужна серверная логика.

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

Чек-лист: что у тебя теперь есть

• Понимание, чем Mini App отличается от бота и от сайта: это мини-сайт внутри Telegram.
• Готовый промпт, по которому нейросеть пишет калькулятор одним HTML-файлом.
• Таблица «Mini App или бот», чтобы выбрать формат под свою задачу.
• Знание, где бесплатно выложить страницу и получить HTTPS-ссылку.
• Реальный флоу @BotFather: /newbot для бота, /newapp для приложения, /setmenubutton для кнопки.
• Рабочий способ собирать заявки из калькулятора без кода - ссылкой в личку.
• Пять проверок перед публикацией и разбор частых ошибок.
• Честная картина ограничений: где витрина на HTML заканчивается и начинается работа для разработчика.

Дальше логичный шаг - научить самого бота что-то делать: отвечать на сообщения, принимать заявки, слать уведомления. Как собрать такого бота нейросетью без программирования, разбираем в гайде как создать бота в Телеграме самому бесплатно. А если хочешь глубже понять, как ИИ вообще собирает рабочие штуки по текстовому описанию, начни с Claude Code для нетехнарей или разбора Claude Code с нуля из России. Сам калькулятор для встройки не только в Telegram, но и на сайт, разбираем в гайде калькулятор для сайта нейросетью.

Источники проверки флоу и хостингов: официальная документация Telegram Mini Apps (docs.telegram-mini-apps.com), обзоры бесплатных хостингов статики по состоянию на июль 2026.