Как собрать Telegram Mini App: 4 шага без программиста

Зачем городить Mini App, если есть обычный бот

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

Mini App решает это по-другому: внутри Telegram открывается настоящая страница с полями, кнопками и мгновенным пересчётом суммы на экране - клиент видит итог сразу, а не после десятого сообщения

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

Что нужно подготовить до старта

Три вещи, и все бесплатные:

1. Бот в Telegram. Если он уже есть - пропускай пункт. Если нет - десять минут по гайду выше
2. Окно, где ты словами пишешь ИИ задачу. Я использую Claude Code - это не терминал для команд, а окно в редакторе, куда печатаешь обычными русскими предложениями, что нужно сделать, и получаешь готовый результат. Если ты его ещё не ставил - вот инструкция за пять минут, а что такое подход «объясни агенту задачу словами вместо кода» в целом - разбирает гайд про вайбкодинг. Работать можно и не с компьютера - Claude Code с телефона разбирает такой вариант отдельно
3. Бесплатное место в интернете под одну страницу, с адресом на https://. Разберу его в Шаге 2 отдельно

Шаг 1. Собрать страницу калькулятора словами через ИИ-агента

Открываешь окно ИИ-агента (у меня - Claude Code) и словами описываешь задачу: нужна одна HTML-страница с полями для количества по каждой услуге, с ценой рядом с каждым полем, и с суммой внизу, которая пересчитывается сама при вводе. Дополнительно просишь подключить скрипт Telegram Web App и кнопку «Отправить смету», которая передаёт сумму обратно в чат с ботом

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

Свой прогон я довёл до конца: заполнил три поля (1 маникюр, 1 покрытие, 2 дизайна ногтя) и получил на экране «Итого: 2400 руб» - расчёт 1200 + 900 + 150 × 2 верен. Файл получился на 40 строк вместе со стилями, никакого отдельного языка вёрстки изучать не пришлось

Шаг 2. Опубликовать страницу бесплатным сервисом с адресом на https://

Telegram требует, чтобы адрес Mini App начинался с https:// - это тот же замочек, что стоит рядом с адресом в браузере у любого банка или магазина, он означает связь защищена. Без него BotFather страницу не примет вообще, адрес без замочка годится только для собственных экспериментов на своём компьютере, не для настоящего запуска

Самый простой бесплатный вариант под ровно одну страницу, без своего компьютера-сервера - GitHub Pages: он выдаёт готовый адрес вида имя.github.io, где замочек https:// уже включён, ничего донастраивать не нужно. Если тебе нужно сравнение всех бесплатных способов опубликовать страницу (Netlify, Vercel, готовый конструктор без кода) - подробный разбор с плюсами и минусами каждого лежит в «Как выложить сайт в интернет бесплатно: 4 способа», здесь беру самый быстрый путь для одной страницы

Что увидишь: после публикации у тебя появляется собственный адрес, который начинается с https:// и открывается в обычном браузере без ошибок. Что это даёт: этот адрес - единственное, что попросит BotFather на следующем шаге

Тот же приём «объясни агенту задачу словами» работает и для более сложной страницы, не только для калькулятора - если хочется сайта с несколькими разделами, а не одной формы, путь разобран в «Как создать сайт с помощью ИИ: 4 пути и страница за 40 минут»; для Mini App достаточно одной страницы, поэтому здесь берём короткий путь

Шаг 3. Включить Mini App у своего бота через BotFather

По официальной справке Telegram, привязка страницы к боту делается одной командой в диалоге с BotFather - /newapp. Дальше BotFather спрашивает: у какого бота включаем приложение, короткое имя приложения, адрес страницы (тот самый https://-адрес из Шага 2) и, по желанию, иконку

Есть и альтернативный путь тем же итогом: /mybots → выбрать своего бота → «Bot Settings» → «Configure Mini App» → «Enable Mini App» - там же можно настроить цвета заставки при запуске. Оба пути ведут к одному результату, разница только в том, с какого экрана BotFather ты стартуешь

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

Шаг 4. Проверить запуск и получение суммы в чате

Открываешь своего бота в Telegram (с телефона или с компьютера) и нажимаешь кнопку запуска Mini App. Что увидишь: твоя страница открывается прямо поверх переписки, без адресной строки браузера - будто отдельный экран внутри самого Telegram

Заполняешь поля количеством услуг, смотришь на пересчитанную сумму и жмёшь кнопку отправки. Что даёт этот шаг: сумма приходит в переписку с ботом уже готовым числом - клиенту не нужно ничего диктовать голосом или печатать вручную, а тебе не нужно пересчитывать смету в уме

Если кнопка запуска не появилась сразу - чаще всего дело в одной из двух мелочей: адрес страницы указан без https:// в начале, либо страница ещё не успела опубликоваться на сервисе (у GitHub Pages первая публикация иногда занимает пару минут)

Что Mini App умеет ещё, кроме калькулятора

Тот же принцип - страница внутри бота вместо диалога текстом - подходит для задач шире одной сметы:

• Каталог товаров с корзиной, где клиент сам выбирает позиции и видит итог
• Форма записи на услугу с выбором даты и времени вместо переписки «а какое время у вас свободно»
• Приём оплаты внутри Telegram через встроенные методы платежей (официальная документация упоминает такую возможность отдельно от расчёта суммы)

Каждую из этих задач та же связка «объясни агенту словами → получи страницу → подключи через BotFather» решает без переписывания подхода с нуля - меняется только содержимое самой страницы. Если задача разрастётся до полноценного диалога с проверкой (например бот сам должен спрашивать уточнения) - об этом отдельно рассказывает «Бот не видит сообщения: как починить», там разобраны частые причины, почему бот теряет реплики клиента

Три ограничения, которые стоит знать заранее

Лимит 4096 знаков на одну отправку данных боту назван в справке Telegram про Mini Apps - разберём в таблице, что это значит на практике

Сколько времени уходит на весь путь

В своём прогоне я убедился, что основное время уходит не на технику, а на формулировку задачи агенту: первая версия текста задачи была короче и абстрактнее, а после уточнения (назвал три конкретные услуги с ценами) агент сразу выдал рабочий результат без правок, и я подтвердил это, заполнив поля и получив верную сумму 2400 руб

Что можно поручить агенту помимо HTML

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

По официальной документации Telegram, Mini App способно «полностью заменить веб-сайт» для простых задач вроде расчёта сметы, каталога или формы записи

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

Что делать, если своей идеи для BotFather пока нет

Если результат этой статьи хочется повторить не на калькуляторе, а на чём-то своём - логика подготовки задачи для ИИ-агента остаётся той же: сначала опиши словами, какие поля нужны и что должно посчитаться или сохраниться, а дальше повтори шаги 1-4 на своём тексте задачи вместо моего примера про маникюр

Что ещё почитать по теме

• Как создать телеграм-бота: 2 пути для новичка с нуля - без своего бота Mini App подключать некуда, начни отсюда
• Как создать мобильное приложение до магазина - нужно в магазины (App Store, Google Play), а не страница внутри Telegram - вот путь натива
• Как создать сайт с помощью ИИ: 4 пути и страница за 40 минут - тот же принцип «объясни агенту словами», применённый к самостоятельному сайту, а не к странице внутри бота
• Как выложить сайт в интернет бесплатно: 4 способа - полное сравнение бесплатных способов опубликовать страницу с адресом на https://, если GitHub Pages не подошёл
• Что такое вайбкодинг - откуда вообще берётся подход «пиши агенту задачу словами вместо кода»
• Как установить Claude Code - окно, где ты словами объясняешь ИИ задачу, шаг раньше сборки страницы
• Claude Code: что это и как работает - если сам инструмент для тебя пока новое слово
• Claude Artifacts: как это работает - соседний способ показать мини-приложение прямо в диалоге, без отдельной публикации страницы
• Как сделать свой Skill в Claude - если захочешь один раз объяснить агенту, как именно собирать такие страницы, и не повторять инструкцию заново
• 22 скилла для Claude Code: список с командами установки - готовые автоматизации на выбор, если своей задачи для агента пока не нашлось
• Бот не видит сообщения: как починить - частая проблема уже готового бота, разбор причин
• Claude Code с телефона: как работать без компьютера - если хочешь объяснять агенту задачу не с ноутбука
• Нейросети и ИИ-инструменты - вся подборка разборов про работу с ИИ-агентами на одной странице

Источники

Все страницы открыты живым браузером 3 сентября 2026 года

• core.telegram.org/bots/webapps - официальная документация Telegram про Mini Apps (Web Apps), структура JS API
• Telegram Bots Docs: Web Apps#initializing-mini-apps - подключение скрипта и инициализация страницы
• Telegram Bots Docs: Web Apps#events-available-for-mini-apps - события и методы объекта WebApp
• core.telegram.org/bots/features - обзорная страница возможностей ботов Telegram
• Telegram Bots Docs: Features#dedicated-tools-for-mini-apps - инструменты и требования к Mini Apps, включая обязательный замочек https://
• pages.github.com - официальная страница GitHub Pages, бесплатная публикация статичных страниц с адресом на https://

Памятка: Mini App внутри Telegram без программиста

Четыре пункта от идеи до рабочей кнопки в боте

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