Боты и автоматизация2026-07-2510 минРедакция Submarine School

Как сделать бот-приложение в Telegram: мини-приложение с ИИ 2026

Как сделать бот-приложение в Telegram: мини-приложение с ИИ 2026

Бот-приложение, оно же мини-приложение Telegram, это веб-страница, которая открывается прямо внутри мессенджера по кнопке «Открыть приложение». Для человека это выглядит как приложение, а внутри лежат обычные HTML, CSS и JavaScript на любом хостинге с HTTPS, привязанные к боту через BotFather. Ниже: из чего такое приложение состоит, как собрать интерфейс с помощью ИИ, какие сценарии реально окупают время и где чаще всего всё ломается.

Чем бот-приложение отличается от бота с кнопками

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

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

Способов запуска в документации семь: кнопка рядом с полем ввода, inline-кнопка под сообщением, кнопка меню, запуск прямо из профиля бота (Main Mini App), inline-режим, прямая ссылка вида telegram.me/имябота/имяприложения и меню вложений. Для первого проекта хватит кнопки меню и прямой ссылки.

Мини-приложения живут не только в Telegram. У ВКонтакте есть VK Mini Apps: те же HTML, CSS и JS внутри соцсети, связь с платформой через библиотеку VK Bridge (база знаний VK). В MAX формат тоже используется: в июле 2026 VK открыла там партнёрскую платформу для бизнеса как мини-приложение, пишут «Ведомости». Логика сборки похожа, но начинать проще с Telegram: меньше требований к оформлению.

Бот приносит пользу, когда он работает, а не когда про него прочитали. На бесплатном эфире показывают, как собрать и запустить бота с помощью ИИ.

Посмотреть запуск бота

Из чего состоит мини-приложение

Частей всего четыре, и смутить может только одна.

  • Бот. Он владелец приложения и точка входа. Создаётся у BotFather за пару минут, подробный путь есть в инструкции как создать бота в Telegram.
  • Веб-страница на HTTPS. Это и есть само приложение: index.html, стили, скрипт. Рабочая среда Telegram принимает только валидные HTTPS-ссылки, http и голые IP допускаются лишь в тестовой.
  • Скрипт Telegram WebApp. Одна строка в <head> страницы: <script src="https://telegram.org/js/telegram-web-app.js?63"></script>. После неё появляется объект window.Telegram.WebApp с данными пользователя, темой и методами вроде отправки данных боту.
  • Бэкенд, но не всегда. Нужен, если приложение принимает заказы, хранит записи клиентов или считает баллы. Калькулятору, викторине и каталогу из десяти позиций сервер не требуется.

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

По теме: Как сделать рассылку в боте Telegram в 2026: база, лимиты, код

Как собрать бот-приложение с помощью ИИ: пошагово

Простой сценарий проходится за вечер. Писать код не придётся, а вот читать то, что выдал ИИ, придётся.

  1. Опишите задачу одним абзацем. Кто пользователь, какие экраны, что происходит по нажатию главной кнопки: «каталог из 8 букетов с фото, ценой и кнопкой «Заказать», по нажатию отправить боту название и телефон». Чем конкретнее, тем меньше правок потом.
  2. Попросите ИИ собрать интерфейс. Рабочая формулировка: сделай один файл index.html со встроенными стилями и скриптом, подключи telegram-web-app.js, бери цвета из Telegram.WebApp.themeParams, для главного действия используй Telegram.WebApp.MainButton. Какие сервисы подходят для такой сборки, сравнивали в разборе как создать приложение с помощью ИИ.
  3. Проверьте страницу в обычном браузере. Откройте файл локально и посмотрите вёрстку, тексты, ссылки. Объекта Telegram.WebApp тут не будет: вне мессенджера он не появляется.
  4. Выложите файлы на хостинг с HTTPS. Подойдут GitHub Pages, Cloudflare Pages, Netlify или Vercel: сертификат выдаётся автоматически. Проверьте, что страница открывается по полученной ссылке с телефона.
  5. Создайте бота. Команда /newbot у BotFather, имя и юзернейм, в ответ придёт токен. Токен никому не показывайте и не вставляйте в код страницы: она открыта всем.
  6. Привяжите приложение к боту. Команда /newapp регистрирует мини-приложение и просит вашу HTTPS-ссылку, /setmenubutton вешает кнопку рядом с полем ввода, а поменять адрес позже можно через /myapps и «Edit link». После регистрации появляется прямая ссылка telegram.me/имябота/имяприложения, её и раздают клиентам.
  7. Откройте приложение с телефона и пройдите путь клиента целиком. Нажмите каждую кнопку, отправьте данные, посмотрите ответ бота. Правки просите у ИИ по одной: «кнопка «Заказать» не видна на маленьком экране, подними её выше поля».

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

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

Отдать боту рутину

Какие мини-приложения имеют смысл

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

  • Каталог товаров. Сетка карточек с фото и ценой, выбор количества, отправка заказа боту. Работает для цветов, выпечки, украшений.
  • Запись на услугу. Календарь свободных дат, выбор времени и мастера, подтверждение. Клиенту не нужно писать «а можно в четверг вечером».
  • Калькулятор. Расчёт стоимости ремонта, доставки, тура: человек двигает ползунки и сразу видит сумму.
  • Викторина или тест. Вопросы с вариантами, счёт, результат с рекомендацией. Годится и для развлечения, и для квалификации клиента перед звонком.
  • Личный кабинет. Баланс, история заказов, статус доставки. Здесь нужен бэкенд и проверка подписи данных, поэтому этот сценарий берите не первым.

Обратная сторона: если сценарий сводится к трём вопросам и заявке, приложение не нужно, обычный бот справится быстрее.

По теме: Как сделать много ботов в Telegram в 2026: один код, много ботов

Где обычно ломается

Ошибки повторяются от проекта к проекту, поэтому проще пройти их списком, чем искать причину наугад.

  • Ссылка без HTTPS. Telegram просто не откроет приложение: в рабочей среде принимаются только валидные HTTPS-адреса.
  • Забыт скрипт telegram-web-app.js. Страница открывается, но кнопки не реагируют: объекта window.Telegram.WebApp нет, подключать его надо вручную.
  • Старый адрес приложения. Файлы переехали на новый хостинг, а в BotFather осталась прежняя ссылка. Меняется через /myapps и «Edit link».
  • Кэш. Обновили файл, а внутри Telegram открывается прежняя версия. Помогает параметр вида ?v=2 в ссылке.
  • Вставки с чужих доменов. С 20 июля 2026 Telegram по умолчанию запрещает вызывать методы мини-приложения с адресов, отличных от домена самого приложения (изменение Bot API 10.2 от 14 июля 2026, отключается через мини-приложение BotFather, есть в чейнджлоге). Вывод простой: держите приложение на одном домене и не подгружайте внутрь чужие виджеты.
  • Бот молчит после отправки данных. Приложение это только интерфейс, обрабатывает данные код бота, а ему нужен постоянно запущенный процесс. Что для этого нужно, разобрано в статье про то, как заставить бота работать круглосуточно.

Сколько это стоит

Сам бот и регистрация мини-приложения в BotFather бесплатны. Расходы появляются на хостинге и на подписке ИИ, если тариф платный.

  • GitHub Pages. Бесплатно: опубликованный сайт до 1 ГБ, мягкий лимит трафика 100 ГБ в месяц и 10 сборок в час (лимиты GitHub).
  • Cloudflare Pages. На бесплатном тарифе 500 сборок в месяц, до 20 000 файлов на проект и не больше 25 MiB на файл (лимиты Cloudflare).
  • Netlify и Vercel. У обоих есть бесплатный тариф для личных проектов (тарифы Netlify, тарифы Vercel).
  • Свой сервер. Нужен только при наличии бэкенда: база записей, оплата, личные кабинеты.

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

Частые вопросы

Нужно ли уметь программировать?

Писать код с нуля не нужно, интерфейс генерирует ИИ. А вот понимать, где какой файл лежит, придётся: без этого не поменять адрес в BotFather и не починить кнопку. Это уровень «разобраться в настройках телефона», а не «выучить язык программирования».

Можно ли сделать бот-приложение бесплатно?

Да, для простого сценария полностью. Бот и регистрация приложения ничего не стоят, статичную страницу принимают бесплатные тарифы GitHub Pages и Cloudflare Pages. Деньги понадобятся, если нужен сервер с базой или платная подписка на ИИ для длинных правок.

Чем мини-приложение отличается от приложения из App Store?

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

Можно ли собрать всё это с телефона?

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

Как люди найдут моё приложение?

Само по себе оно не находится, каталога мини-приложений с поиском у Telegram нет. Раздают прямую ссылку вида telegram.me/имябота/имяприложения: в описании канала, в закрепе, в рассылке бота, в шапке профиля. Кнопка меню в чате нужна тем, кто уже открыл вашего бота.

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

Записаться на вебинар
Разборы, кейсы и фишки вайбкодинга каждую неделю в телеграм-канале «Яков вайбкодит».
Первый проект с ИИ: живой разбор, бесплатно Занять место