How to create a Telegram Mini App with neural networks

A Telegram Mini App can be created with neural networks: AI handles screen layouts, catalog and form logic, and interface texts well. What stays manual is setting up the bot in Telegram, hosting, checking the user’s data on the server, payment, and testing on a real phone. That is how it was in my project “Taro i Teni”: I started from screen layouts, chose the tools for each stage myself, and then the app was assembled and checked many times inside Telegram itself.

Below I sort out what exactly a neural network speeds up, where a person cannot be left out, and how the work goes from the idea to the first version.

What a Mini App is and how it differs from a bot

An ordinary bot talks in messages and buttons in the chat. A Mini App is a web application that opens inside Telegram over the chat: with its own screens, search, filters and forms. Technically it is a web page, but Telegram passes it data about the user, the colors of the current theme, and access to its interface elements.

When is a bot enough, and when is a mini app needed? If the user asks a question and gets an answer, books one time slot or chooses from three options, an ordinary bot is enough. If they need to browse a catalog, search, compare, save to favorites and fill in a form of several fields, messages in the chat become inconvenient. Then a mini app starts to make sense: the person stays in Telegram but gets the familiar interface of a site.

A mini app can be opened in different ways. According to Telegram’s documentation, a bot can show it through the menu button, a bot can have a main mini app that launches from the bot’s profile or by a direct link of the form t.me/bot_name?startapp. All of this is set up through @BotFather.

The user’s path usually looks like this:

  1. The bot: the person finds it in search, by a link or by a QR code.
  2. The button: it opens the mini app.
  3. The mini app: catalog, cards, form.
  4. The server: it receives the data and checks that they came from Telegram.
  5. The request: it reaches the business owner.

A neural network helps most on the third step. The other links need manual setup.

What a neural network does when a Mini App is created

Interface and screens

Screen layouts are a convenient place to start with AI. In “Taro i Teni” I started exactly with layouts: the card catalog, the card, favorites, tariffs, the form. At this stage variants can be tried quickly, while the logic is not fixed and nothing is a pity to throw away.

The strong side of a neural network here is the speed of drafts. The weak side is that it designs for an abstract screen. A mini app lives inside Telegram on a phone: the Telegram header above, system elements below, a small screen width. This has to be stated in the task, otherwise the layout will be beautiful on a computer and cramped on a phone.

Another detail worth putting into the task at once is themes. Telegram can be light or dark, and the mini app receives the current scheme and colors from it. If the layout is calculated only for a light background, part of the text can disappear in the dark theme. A neural network will take this into account if you ask, but it will not always remember on its own.

So I fix the frame before the layouts: that this is a mini app inside Telegram, at what screen width and with what offsets from the system elements it lives, how it looks in the light and dark themes, which screens it has, and what the person sees when search finds nothing or loading fails. If the frame is not set, a beautiful layout later has to be remade.

Catalog and form logic

A catalog with search, filters and favorites is a clear task for a neural network. In the first version of “Taro i Teni” it is a catalog of 78 cards: 22 Major and 56 Minor Arcana, search by Russian and English names, filters, favorites stored on the device. Also six video-reading topics, tariffs, the request-form interface and entry from the site by a QR code.

For a neural network to assemble that logic without mistakes, the data is better prepared in advance: a list of every catalog item with fields, the filter rules, what counts as a match in search. If search must work in two languages, that also has to be said explicitly.

It is also worth deciding in advance where the user’s data is stored. Favorites in “Taro i Teni” are stored on the device: that is simple and does not need a server, but if the person opens the app on another phone, the favorites will not be there. For a first version that decision is fine. A personal account with order history already needs a server, and that changes the amount of work.

Technically the app is built on React, TypeScript and Vite and works as a PWA. For a mini app this set is not required, but the combination is convenient: pages assemble quickly and are easy to check.

Texts and graphics

Button texts, hints, error messages and empty states are written quickly by a neural network. They still have to be checked: on a narrow screen a long label breaks a button, and a message “something went wrong” explains nothing to the person.

A neural network helps with graphics too, but there is a catch that in “Taro i Teni” cost a separate piece of work: weight. The first screen weighed 2.4 MB, and after optimization about 0.9 MB. Icons at first weighed 227–380 KB each, and after that 13–17 KB. For a mini app opened on a mobile connection, that is a noticeable difference.

So I set the requirements for image weight and load order in advance, and do not fix them at the end. Without them the interface comes out beautiful but takes a long time to open on the metro.

What stays manual work

The bot and settings in Telegram

A mini app does not exist apart from a bot. You need to create the bot, set the menu button or the main mini app, specify the app’s address, and check how it opens from the chat, from the bot’s profile and by a direct link. All of this is done through @BotFather, and here a neural network can only suggest the order of steps.

Everything the person sees before opening the app belongs here too: the bot’s name, the description, the welcome message, the label on the button. A neural network will suggest texts for them, but choosing them and entering them has to be done by hand. These small things decide whether the person understands why to press the button.

Hosting and the address

A mini app is a web page that has to be hosted somewhere. Hosting, the domain, the address that is entered in the bot’s settings — all of this is manual work. Unexpected errors come from here too. In “Taro i Teni” a “Page not found” error appeared: Telegram added its service data to the address, and the app did not recognize the page. I fixed it by handling the routes. A neural network will not predict such an error until it sees it in use.

Checking the user’s data on the server

Telegram passes the mini app data about the user. The documentation warns directly: data from the initDataUnsafe field cannot be treated as reliable, and initData must be checked on the bot’s server before it is used. Otherwise anyone can substitute someone else’s identifier.

In plain words: the mini app opens in Telegram and receives a “pass” with the user’s data from it. By itself that pass guarantees nothing until the server checks Telegram’s signature. If the app has a personal account, orders or anything that must not be shown to others, it cannot be launched without a server-side check.

A neural network can write this check, but the decision of where it runs and what happens if the check fails is made by a person. And checking that everything works is also for a person.

Payment

In the first version of “Taro i Teni” there is no payment: the tariffs are shown, and the request form is prepared to be sent through the bot in later versions. If payment is needed, you have to deal with Telegram’s rules. According to the documentation, physical goods and services are paid through third-party payment providers, and digital goods and services inside Telegram are paid in Telegram Stars. Choosing the scheme and connecting a provider is manual work.

For a first version it is often reasonable to do without payment, as in “Taro i Teni”: show the tariffs and collect requests. That makes it easier to check whether people need the product before dealing with payments, refunds and receipts.

How the work goes: from the idea to the first version

Work on a mini app starts not from code but from the answer to what the person should do inside Telegram and what they should get at the end: choose a product, book, find the right card. That decides the data that must be collected in advance, the screens, the logic, and what will definitely not enter the first version. Then come layouts at phone width, the build, the bot setup, hosting and the address. AI speeds up almost every one of these stages, but tying them into a working app and accepting the result is the task of a person who understands how the interface, Telegram and the server side are built.

The most is found out in the check inside Telegram itself on a phone. In “Taro i Teni”, after that check, more than 20 interface edits were needed, and a screen width of 320–430 px was checked. Automatic checks watch the app’s data and mechanisms: the catalog, search, filters, favorites — everything that is easy to break on the next edit. And a separate decision is what to postpone. In “Taro i Teni” AI readings are a plan for later, not a function of the first version.

Who does what: AI and a person

StageWhat AI doesWhat a person does
Idea and scenarioSuggests screen variantsDecides what the user needs
LayoutsAssembles drafts quicklyChecks them at phone width
Catalog and form logicWrites code from the dataPrepares the data and the rules
Interface textsWrites labels and hintsChecks length and meaning
Bot and settingsSuggests the orderSets them up in @BotFather
Hosting and addressSuggests optionsHosts it and checks the address
User dataWrites the initData checkDecides where and how to check
PaymentHelps with the codeChooses the scheme and the provider

What to check before launch

The list is short, but each point gave an error at least once in my project:

  • The app opens in every way: from the menu button, from the bot’s profile, by a direct link, by a QR code from the site.
  • There is no “Page not found” error when it opens with Telegram’s parameters.
  • The interface fits on narrow screens, nothing is cut off and nothing slides under the system elements.
  • Telegram’s light and dark themes: the text is readable in both.Telegram passes the theme colors to the app, and they are worth using.
  • The first screen loads quickly on a mobile connection: check the weight of the page and the images.
  • The user’s data is checked on the server, and is not taken from initDataUnsafe.
  • The request form says what happened after sending, and does not lose what was entered if there is an error.

After launch the work does not end. Each edit in the code means a new check in Telegram on a phone, because what looks normal in a browser on a computer can behave differently inside Telegram. Automatic checks catch breaks in the data and the logic, but a person still looks at the appearance.

If you are planning your own mini app, look at how Telegram Mini App development is built, and if the task goes beyond a catalog and a form, that is already custom development. The idea can be discussed through the quiz on mara-craft.com: I will look at what goes into the first version and what is better postponed.

Marina Stepnaya