build-resturant-telegram-mini-app-with-stitch-ai-studio

Build a Restaurant Telegram Mini App with Google Stitch and Google AI Studio

AI-assisted development becomes much easier to understand when we use it
to build a real application.

In this tutorial, we will create a Restaurant Telegram Mini App
using Google Stitch, Google AI Studio, GitHub, Visual Studio Code,
deployment tools, and Telegram.

Rather than generating everything with one enormous prompt, we will
build the application incrementally and test every important stage.

Our final goal is a restaurant application that customers can open
online or directly inside Telegram.

The application will eventually allow customers to:

• view the restaurant
• browse the menu
• search for dishes
• view dish details and prices
• reserve a table
• enter their contact information
• receive a reservation confirmation
• use the application on desktop and mobile
• open the application inside Telegram

This article assumes that you have already read Google AI App
Development Fundamentals — Stitch, AI Studio, GitHub & Deployment,
where we introduced the technologies used in this project.

1. What Are We Going to Build?

Our project will be called:

Restaurant Telegram Mini App

For development purposes, we can initially use the restaurant name:

Test Restaurant

The name can easily be changed later for a real customer.

The project will progress through several stages:

Google Stitch

↓

UI/UX Design

↓

Google AI Studio

↓

Functional Web Application

↓

GitHub

↓

Visual Studio Code

↓

Testing and Improvements

↓

Deployment

↓

Public HTTPS URL

↓

Telegram Bot

↓

Telegram Mini App

The important point is that we are not simply asking AI to create a
website.

We are following a complete application-development workflow.

2. Project Requirements

Before opening an AI development tool, we should define what we want to
build.

This prevents the AI from making too many assumptions.

Main Application Sections

Our first version should contain:

• Home
• About
• Menu
• Dish Details
• Reservation
• Contact

Later versions can include additional functionality.

Menu Features

The menu should eventually support:

• starters
• main courses
• desserts
• drinks
• food images
• dish descriptions
• prices
• menu search
• dish detail view

Reservation Features

The reservation form should eventually contain:

• customer name
• email
• phone number
• number of guests
• date
• available time
• special requests
• reservation confirmation

Language

The application should eventually support:

• English
• Swedish

We will initially design the application in English and add multilingual
functionality later.

3. Why Mobile-First Design Is Important

This project will eventually run as a Telegram Mini App.

Many customers will therefore use it from a smartphone.

For that reason, our design should be mobile-first.

That means we should prioritize:

• readable text
• large buttons
• touch-friendly controls
• simple navigation
• fast interaction
• responsive images
• uncluttered screens

The application should still look professional on desktop computers, but
the mobile experience has priority.

4. Step 1 — Open Google Stitch

Open a modern web browser such as Google Chrome or Microsoft Edge and go
to:

Google Stitch: Go to
https://stitch.withgoogle.com/ and
click Try Stitch in the upper-right corner (in the first time). Sign
in with your Google account if requested; you will then enter the Stitch
workspace, at the upper-right you have two choices:

• + Start with your design — start from an existing
  design/image.
• + Blank project — create a new empty project.

For our Restaurant Telegram Mini App, click + Blank project. and in
the uper left you see New project with edit button click to it and give
the project name, for me i give the name:
restaurant-telegram-mini-app

After creating the Restaurant Telegram Mini App project, Stitch
opens the design workspace. “What would you like to change or
create?”, in the next step you will use to generate the first design.

5. Step 2 — Create the First Restaurant Design

We will begin with one structured prompt.

Do not ask Stitch to create the database, email system, Telegram
integration, and every other feature yet.

At this stage, our objective is design.

Copy the following prompt into Google Stitch prompt field labeled (
“What would you like to change or create?”), paste the following
prompt, and then click the ↑ arrow on the right to generate the
first design.

Google Stitch Prompt — Version 1

Create a modern, elegant, mobile-first restaurant web application.

Restaurant name: Test Restaurant.

The application should be designed primarily for smartphones and
should also work beautifully as a future Telegram Mini App.

Create the following sections:

Home:

• Elegant restaurant hero section
• Restaurant name
• Short welcome message
• Book a Table button
• View Menu button

About:

• Short restaurant introduction
• Elegant food or restaurant imagery
• Brief description of the restaurant experience

Menu:

• Categories for Starters, Main Courses, Desserts and Drinks
• Food cards containing image, dish name, short description and
  price
• Search interface
• Selecting a dish should provide access to more detailed
  information

Reservation:

• Customer name
• Phone number
• Email
• Number of guests
• Date
• Reservation time
• Special requests
• Reserve Table button

Contact:

• Address
• Telephone
• Email
• Opening hours
• Map placeholder

Language:

• Prepare the interface so that English and Swedish can be
  supported.

Design requirements:

• Premium Scandinavian restaurant style
• Modern and elegant
• Mobile-first responsive design
• Large touch-friendly buttons
• Clear typography
• High-quality food imagery
• Simple navigation
• Suitable for use inside a Telegram Mini App
• Avoid overcrowding the interface
• The desktop version should also look professional and responsive.

Wait design process is finished, when it finished Stitch shows in the
left side what have been created and in the right side shows design.

6. What Should Happen After the Prompt?

Stitch should now interpret our requirements and create an initial
restaurant interface.

Do not immediately accept everything that AI generates.

Examine the result carefully.

Look at:

• header
• navigation
• hero section
• typography
• colors
• menu presentation
• food cards
• reservation form
• contact section
• mobile layout

Ask yourself:

Would I be comfortable showing this design to a restaurant customer?

If the answer is no, we improve it before continuing.

This is one of the most important principles in AI-assisted development:

Generate → Review → Improve → Test

not:

Generate → Accept Everything

7. Step 3 — Refine the Stitch Design

We should make improvements using smaller prompts.

For example:

Make the restaurant design feel more premium and elegant. Reduce
unnecessary visual elements and use more whitespace.

Another prompt could be:

Improve the mobile navigation. Make all important controls easy to use
with one hand on a smartphone.

Another:

Make the menu cards more visually appealing. Use larger food images
and make the dish name and price immediately visible.

And another:

Improve the reservation form for mobile users. Use large input
controls and clear labels.

Notice that these prompts are focused.

We are not regenerating the entire application every time.

8. Step 4 — Test the Design Before Moving On

Before leaving Stitch, check the major screens.

Home

Does the visitor immediately understand that this is a restaurant?

Are View Menu and Book a Table easy to find?

Menu

Are food items easy to browse?

Are prices visible?

Reservation

Can a smartphone user comfortably complete the form?

Contact

Can the visitor quickly find:

• address
• phone
• opening hours

Mobile Experience

Does everything fit comfortably on a narrow screen?

If something does not look right, correct it in Stitch before moving to
application development.

9. Development Checkpoint 1

At this point we should stop and record what Stitch actually created.

For this tutorial, we will document:

• the final Stitch prompt
• screenshots of the generated design
• changes we requested
• problems we encountered
• the final accepted UI

This gives us our first project milestone:

Version 1 — Restaurant UI Design

We should not continue until this version looks good.

10. Step 5 — Export the Stitch Design to Google AI Studio

Once you are satisfied with the restaurant design in Google Stitch, the
next stage is to turn the visual design into a working application.

In the Stitch project workspace, look at the upper-right corner. You
should see controls including:

• Preview/Run
• Export
• Share

For this project, we want to continue development in Google AI
Studio.

Select the Restaurant Screens

Click Export.

If no screens are currently selected, Stitch displays:

No screens selected

Select the screens that you want to use in the application.

Because we want to continue with the complete restaurant project, we can
select all the screens by pressing:

Ctrl + A

After selecting the screens, the Export panel displays the available
export formats.

Depending on the current version of Stitch, you may see options such as:

• AI Studio
• Figma
• MCP
• Netlify
• Lovable
• Bolt
• .zip
• Code to Clipboard
• Project Brief

Some options may be marked Preview, and the available choices may
change as Google continues developing Stitch.

Export to AI Studio

Select:

AI Studio

Stitch explains that AI Studio will open and that the required HTML and
image files will be transferred/downloaded in the background. If many
screens are selected, this process may take a minute or two.

Now click:

Build with AI Studio

This is an important step. We are not creating another restaurant
application from scratch. Instead, we are handing the screens and
assets from our existing Stitch project to Google AI Studio.

Our development workflow is now:

Google Stitch → Export to AI Studio → Build Application → Test &
Improve → GitHub → VS Code → Deployment → Telegram Mini App

11. Step 6 — Build the Exported Stitch Design in Google AI Studio

After clicking Build with AI Studio in Google Stitch, Google AI
Studio opens automatically.

If Google asks you to sign in, use your Google account.

AI Studio opens its application-building environment and prepares a new
build request based on the screens and assets that we exported from
Stitch.

Check the Exported Stitch Files

Before starting the build, look at the files attached to the AI Studio
request.

You should see several files representing parts of the Stitch project,
such as:

• PNG images
• JPEG images
• SVG assets
• HTML files
• Other design-related files

These files are important because they give AI Studio visual and
structural information about the application we designed in Stitch.

AI Studio also automatically prepares an initial instruction similar to:

Build me an app with screens that look like this. You can hotlink
images from the html

This confirms that AI Studio is using the exported Stitch screens as
references for generating the application.

Do Not Create Another New App

You may notice + New app under the BUILD section in the AI
Studio menu.

Do not use + New app for this project at this stage.

We already started the application in Google Stitch and exported its
screens directly to AI Studio.

Creating another app separately and entering another restaurant prompt
would start a separate AI Studio project instead of continuing from the
design that we already created in Stitch.

Our workflow is:

Stitch Design → Export to AI Studio → Build → Test → Improve

Start the Initial Build

Check that the exported Stitch files are visible in the AI Studio build
request.

At this point, do not remove the automatically attached files or replace
the initial instruction.

Click the Build button.

AI Studio will now analyze the exported Stitch screens and assets and
begin generating the application.

Wait for the Build to Finish

During the build process, you may see AI Studio creating and modifying
many source-code files.

For example, AI Studio may generate:

• .html — HTML files used by the web application
• .css — application styling and visual presentation
• .ts — TypeScript files containing data, types, utilities, and
  application logic
• .tsx — React components written using TypeScript and JSX
• .json — application configuration and metadata

Do not worry if you did not create these files yourself.

This is one of the important differences between Stitch and AI
Studio.

Stitch helped us create the visual design and user experience.

AI Studio is now interpreting that design and generating the actual
application source code.

The build may take several minutes, particularly when many Stitch
screens and images have been exported.

Allow AI Studio to finish before making additional changes.

When the build is complete, AI Studio indicates that the application is
ready and displays the generated application under Preview.

Review the Action History

After the build, AI Studio may display an Action history showing
which files Gemini created or modified.

For example, our restaurant application generated files such as:

• metadata.json
• index.html
• src/index.css
• src/types.ts
• src/data/restaurantData.ts
• React components such as Header.tsx and Navigation.tsx

You do not need to understand every generated file at this stage.

The important point is that we have moved beyond a visual prototype. AI
Studio has now generated a real application structure containing source
code that we can later inspect, modify, test, and store in GitHub.

Review the AI Studio Build Summary

AI Studio may also provide a written summary explaining what Gemini
created.

For our restaurant project, AI Studio reported that it had built the
Test Restaurang & Matsal application and described features
including:

• Scandinavian restaurant styling and typography
• Home screen and restaurant hero section
• Seasonal menu
• Dish search and filtering
• Table reservation flow
• About and restaurant information
• Contact and location information
• English and Swedish language controls
• Guest and reservation-related interface elements

Your own build summary may be slightly different depending on the Stitch
screens, prompts, assets, and the version of AI Studio being used.

The summary is useful because it tells us what Gemini intended to
implement.

However, there is an important rule:

Do not assume that a feature works simply because AI Studio lists it
in the build summary.

For example, AI Studio may mention:

reservation confirmation, real-time search, Telegram
integration, or guest reservations.

At this stage, some of these may only be frontend interfaces,
demonstrations, or simulated interactions.

They do not necessarily mean that we already have:

• A production database
• A real reservation backend
• Email confirmation
• Telegram Bot integration
• Persistent customer data
• A production booking system

We will add and verify those capabilities step by step later.

Preview the Initial Application

Now look at the Preview area.

AI Studio should display the running application that it generated from
the Stitch design.

Do not immediately give AI Studio another large prompt or start adding
more features.

First, explore what has already been generated.

Check areas such as:

• Home page
• Navigation
• Menu
• Menu categories
• Food images
• Dish information
• Search and filters
• Reservation interface
• Contact information
• About page
• Mobile navigation
• Buttons and controls
• English and Swedish language switching
• Overall visual design

Click the navigation buttons and interact with the application just as a
restaurant customer would.

Compare AI Studio with the Stitch Design

The generated AI Studio application does not have to reproduce every
Stitch screen pixel-for-pixel.

Stitch provided the design foundation and visual references, while
AI Studio interpreted those references and converted them into
application code.

AI Studio may therefore make some design or implementation decisions of
its own.

This is normal.

What matters is that the application maintains the intended restaurant
experience and gives us a good technical foundation that we can continue
improving.

At this point, our project has moved from:

Designing the application in Google Stitch to: Building and
testing the application in Google AI Studio

12. Step 7 — Test the Initial AI Studio Application

Before giving AI Studio additional development requirements, we should
test the application it has already generated.

This is an important part of AI-assisted development.

AI Studio may already have created more functionality than we expected
from the initial Stitch export. Instead of immediately asking Gemini to
rebuild or add features, we first need to determine:

What already works? What works only partially? What is still
missing?

For now, do not modify the generated code and do not give Gemini
another development prompt.

We are going to use the Preview area in Google AI Studio and test
the generated application just as a restaurant customer would.

Where Do We Test the Application?

Look at the Preview panel on the right side of Google AI Studio.

This is the running version of the application that AI Studio generated
from our Stitch design.

You do not need to open another application or browser window for this
initial test.

At the bottom of our generated restaurant application, we have the main
navigation:

• Home
• Menu
• Book Table
• About
• Contact

We will test these sections one by one.

Do not try to fix problems immediately. First, identify and record them.
After testing the complete application, we can give AI Studio a more
precise development prompt.

Test 1 — Home

Start with Home.

You are probably already on this screen when the application first
opens.

Scroll slowly from the top of the Home page to the bottom.

Check:

• Does the restaurant hero image load correctly?
• Is the restaurant name displayed correctly?
• Is all text readable?
• Does the page fit correctly on the mobile-sized screen?
• Are any elements overlapping or cut off?
• Are buttons large enough to use comfortably?
• Are images displayed correctly?
• Is the visual style consistent?
• Is English and Swedish text being mixed unexpectedly?

Also inspect important Home buttons such as:

Book a Table

and:

Explore Seasonal Menu

Do not assume that a button works simply because it appears on the
screen. We will test the actions as part of our application testing.

Test 2 — Menu

At the bottom of the Preview, click:

Menu

Check whether the Menu screen opens correctly.

Then inspect:

• Menu categories
• Dish names
• Dish descriptions
• Food images
• Prices
• Search
• Category filters
• Dietary filters, if available
• Dish details
• Tasting-menu information, if available

Try the interactive controls.

For example, if there is a search box, search for one of the displayed
dishes.

If there are category buttons such as Starters, Main Courses,
Desserts, or Drinks, click them and check whether the displayed
dishes change correctly.

If clicking a dish opens additional information, test that as well.

Test 3 — Book Table

Next, click:

Book Table

Check whether the reservation interface opens correctly.

Inspect whether you can select or enter information such as:

• Number of guests
• Reservation date
• Reservation time
• Seating option, if available
• Customer name
• Phone number
• Email
• Special requests, if available

Use test information, not real customer information.

For example:

Name: Test Customer Email: test@example.com

Try submitting the reservation and observe what happens.

If AI Studio displays a confirmation and booking reference, make a note
of it.

However, remember that a confirmation screen does not necessarily mean
that the reservation has been permanently stored. We have not yet
intentionally implemented and verified a production database.

Test 4 — About

Click:

About

Check that the About screen opens correctly.

Inspect:

• Restaurant description
• Images
• Chef or restaurant information
• Typography
• Page layout
• Expandable sections, if available
• Mobile presentation

If AI Studio has generated interactive elements, test those as well.

Test 5 — Contact

Click:Contact and Check:

• Restaurant address
• Telephone number
• Email
• Opening hours
• Map or location information
• Contact buttons
• Telegram-related controls, if present
• Any expandable FAQ sections

Again, click interactive controls where appropriate and note anything
that does not work as expected.

Test the English and Swedish Languages

After testing the main sections, test the language controls:

EN / SV

First select EN and navigate through several screens.

Then select SV and repeat the test.

Check whether:

• Headings change language
• Navigation changes language
• Buttons are translated
• Menu information changes
• Reservation labels change
• Contact information remains correct
• English and Swedish are not unintentionally mixed

Our initial generated Home screen, for example, contained both Swedish
and English text. This is exactly the kind of issue that this test
should identify.

Test the Mobile Experience

Because our application will eventually be used as a Telegram Mini
App, mobile usability is particularly important.

While testing each section, check:

• Text readability
• Button size
• Navigation
• Scrolling
• Image sizing
• Form controls
• Spacing
• Bottom navigation
• Whether content extends outside the screen
• Whether important actions are easy to reach

The application should be comfortable to use on a smartphone, not merely
able to shrink to a mobile screen.

Keep a Simple Test List

As you test the application, make a simple list of what works and what
needs improvement.

For example:

Working

• Home screen loads
• Main navigation works
• Menu opens
• Food images display
• Reservation form opens
• Mobile bottom navigation works

Needs Improvement

• English and Swedish are mixed
• Restaurant name is inconsistent
• A menu filter does not work
• Reservation validation is incomplete
• Some buttons do nothing
• Confirmation needs improvement

Your results will probably be different. The purpose is to create a list
based on the actual generated application.

Do Not Fix Problems One by One Yet

If you discover a problem, resist the temptation to immediately send
Gemini a new prompt for every small issue.

Complete the initial test first.

We want to understand the state of the entire application before making
changes.

Once we know what works and what does not, we can give AI Studio a clear
and focused development request while telling it to preserve the parts
that already work.

This gives us a much safer AI-assisted development cycle:

Build → Preview → Test → Identify Problems → Give Requirements →
Rebuild → Test Again

13. Step 8 — Give AI Studio the Development Requirements

Now that we have tested the initial application, we know what already
works and what needs to be corrected.

This is a better time to give AI Studio additional development
instructions.

Instead of asking Gemini to rebuild the entire application, we should
provide a specific list of improvements while telling it to preserve
the parts that already work.

Use the Test Results as Development Requirements

During our initial test, we discovered several issues:

• Some English and Swedish text is mixed.
• The restaurant name is inconsistent.
• The reservation date is incorrect.
• The reservation date cannot be changed properly.
• Reservation navigation needs improvement.
• Done / Klart does not correctly start a new reservation.
• The purpose of View Flow in the tasting menu is unclear.
• Telephone and email actions on the Contact page are not functional.
• Email reservation confirmation has not yet been implemented.

Instead of fixing these problems one at a time, we can give AI Studio a
clear development prompt based on our test results.

AI Studio Development Prompt — Version 1

In Google AI Studio, look at the bottom-left area below the Gemini
conversation. You should see an input box labeled:

“Make changes, add new features, ask for anything”

Click inside this box. This is where we can give Gemini additional
instructions for modifying the existing application.

Paste the following development prompt:

Continue developing the existing Test Restaurang application.

Preserve the current visual design, mobile-first layout, navigation,
menu structure, images, typography, and functionality that already
works.

Do not redesign the application.

Make the following corrections and improvements:

1. Restaurant name

Use Test Restaurang consistently throughout the entire
application. Remove “& Matsal” from the restaurant name.

2. English and Swedish

Correct the EN/SV language switching throughout the application.

When EN is selected, all interface text should be in English.

When SV is selected, all interface text should be in Swedish.

For example:

EN: Welcome to Test Restaurang

SV: Välkommen till Test Restaurang

Check all pages, navigation labels, buttons, reservation controls,
menu text, confirmation text, and other interface labels for language
consistency.

3. Reservation date

Fix the reservation date handling.

The application must use the actual current date instead of a
hard-coded example date.

Allow the customer to navigate through available future reservation
dates.

Do not allow reservation dates in the past.

4. Reservation navigation

Make the reservation flow easy to navigate.

Allow the customer to move forward and backward through the
reservation steps where appropriate without losing previously entered
information.

5. Done / Klart

After a reservation reaches the confirmation screen, clicking Done
or Klart should close the completed reservation and return the
customer to the beginning of the reservation process.

Reset the reservation form so another reservation can be created.

6. Tasting menu

Replace the unclear View Flow label with:

View Tasting Menu in English

and an appropriate Swedish translation when SV is selected.

When the customer selects it, display the six courses included in the
tasting menu with the course name and a short description.

7. Contact actions

Make the telephone action functional so that selecting the telephone
number can initiate a phone call on supported devices.

Make the email action functional so that selecting the email address
can open the user’s email application.

8. Preserve existing functionality

Do not remove or unnecessarily change features that already work.

Keep the existing menu, search, filters, dish information, mobile
navigation, reservation interface, About page, Contact page, and
responsive layout unless a change is required to fix one of the issues
above.

Do not add a production database, authentication system, backend API,
or real reservation email service yet.

First implement these frontend corrections and then make the updated
application available for testing.

Why We Use a Detailed Prompt

Compare the prompt above with simply telling AI Studio:

Fix the app.

The detailed prompt tells the coding agent:

what is wrong → what behavior we expect → what should remain
unchanged

This reduces the chance that Gemini changes parts of the application
that already work correctly.

Why We Are Not Adding the Database or Email Service Yet

At this stage, we are deliberately concentrating on the frontend and
reservation workflow.

Before connecting a database, email service, backend API, or Telegram
integration, we want to make sure that:

• Navigation works
• Languages work correctly
• Dates work correctly
• Reservation steps work
• Forms behave correctly
• Confirmation works
• Mobile usability is good

This makes problems much easier to identify and correct.

Let AI Studio Make the Changes

Submit the development prompt and allow AI Studio to modify the
application.

While it works, you may again see Gemini creating or editing .ts,
.tsx, .css, and other project files.

Wait until AI Studio reports that the updated application is ready.

Do not assume that all requested changes were implemented correctly
simply because the build completed.

Our next task is to test the updated application again.

14. Step 9 — Test the Improvements

After AI Studio finishes applying the development prompt, it provides an
Action history showing the files that were changed and a summary of
the improvements it attempted to implement.

In our project, AI Studio reported that it:

• Standardized the restaurant name to Test Restaurang
• Corrected the EN/SV language switching
• Replaced the hard-coded reservation date with a dynamic current-date
  system
• Added forward and backward navigation to the reservation process
• Added a reservation review step
• Changed Done / Klart so that it resets the reservation flow
• Added functional telephone and email links
• Preserved the existing application design and functionality

AI Studio also created or modified several application files, including
React/TypeScript components such as the reservation view, menu view,
contact view, header, and tasting-menu modal.

However, the AI Studio summary tells us what Gemini attempted to
implement. We should still verify each change ourselves.

Retest Only the Changed Areas

Return to the Preview and test the problems we identified earlier.

Restaurant Name

Check several screens.

The restaurant should now consistently be called:

Test Restaurang

There should no longer be references to:

Test Restaurang & Matsal

English and Swedish

Select EN.

Check Home, Menu, Book Table, About, Contact, and the reservation
confirmation.

All interface text should be English.

Then select SV and repeat the test.

All interface text should be Swedish.

Pay particular attention to the Home heading that previously remained:

Välkommen till Test Restaurang & Matsal

when English was selected.

Reservation Date

Open Book Table.

The reservation calendar should begin with the actual current date
rather than the previously hard-coded October date.

Check that:

• Today’s date is correct
• Future dates can be selected
• Past dates cannot be selected
• Day and month information is correct
• EN/SV changes the date labels appropriately

Reservation Flow

Complete a test reservation.

Verify that you can move:

Table & Time → Guest Details → Review

and also move backward without losing the information you already
entered.

Do not use real personal information during testing.

Done / Klart

Complete the test reservation until the confirmation appears.

Click:

Done in English

or:

Klart in Swedish.

The confirmation should close, the reservation form should reset, and
the application should return to the beginning of the reservation
process ready for a new booking.

Tasting Menu

Open Menu and find the six-course tasting menu.

The unclear View Flow label should have been replaced with a clearer
action such as:

View Tasting Menu

Click it.

Verify that the application displays the six courses with their names
and descriptions.

Also test the Swedish version.

Telephone and Email

Open Contact.

Test the telephone action. On a supported device or browser, it should
use a telephone link.

Test the email action. It should open the configured email application
using an email link.

At this stage, this is not the same as automatically sending a
reservation-confirmation email. That functionality will be implemented
later.

Some Problems May Still Remain

Our second test showed that several requested improvements were
implemented successfully, but not everything worked correctly.

For example:

Working:

• The reservation date now starts with the correct current date.
• Telegram contact functionality works.

Still needs correction:

• After the current date, the reservation date selection unexpectedly
  jumps to November.
• The customer cannot properly navigate forward and backward through
  reservation dates/months.
• The telephone action still does not work.
• The email action still does not work.

This demonstrates an important principle when working with AI coding
agents:

Do not assume that a change works simply because the agent reports
that it implemented it. Always test the actual application.

When a problem remains, give the coding agent another small, focused
correction prompt instead of asking it to rebuild the entire
application.

AI Studio Correction Prompt — Version 2

Now go back to the bottom-left input:

Make changes, add new features, ask for anything

and use this smaller prompt:

Continue working on the existing Test Restaurang application.

Preserve the current design and all functionality that is already
working. Do not redesign the application.

The previous changes improved the application, but the following
problems remain after testing:

1. Reservation date selection

The reservation date correctly begins with today’s actual date, but
the following available dates incorrectly jump to November.

Fix the date selector so future dates continue chronologically from
the current date.

The customer must be able to navigate forward through future dates and
months and back to earlier available dates/months, but never select a
date before today.

Add clear previous and next navigation controls to the date selector.

The month and year heading must update correctly as the customer
navigates.

Preserve the selected reservation information when navigating between
dates.

2. Telephone action

The telephone action on the Contact screen is still not functional.

Implement it as a real clickable tel: link using the restaurant
telephone number so that supported devices can open their phone/dialer
application.

3. Email action

The email action on the Contact screen is still not functional.

Implement it as a real clickable mailto: link using the restaurant
email address so that the user’s configured email application can
open.

This is only a contact email link. Do not implement automatic
reservation-confirmation email yet.

4. Preserve working functionality

Telegram contact functionality is currently working correctly. Do not
change or remove it.

Preserve the existing restaurant name, EN/SV language functionality,
menu, reservation flow, navigation, responsive layout, and other
features that are already working.

Do not add a database, backend API, authentication, or production
email service.

Make only the corrections described above and make the updated
application available for testing.

Then let Gemini finish.

Test → Find Problem → Give Precise Instruction → Rebuild → Retest

Final Frontend Retest

After applying Correction Prompt — Version 2, we tested the
application again.

The reservation date selector and navigation now work correctly.

The Telegram contact action also works correctly.

The telephone action invokes the device/browser telephone-link handling.
On a desktop computer, this may display a list of applications capable
of handling telephone calls rather than immediately making a call. On a
smartphone, a tel: link would normally open the phone application.

The email action still requires verification. A mailto: link depends
on the browser and operating system having an email application or mail
handler configured. If nothing happens, this does not automatically mean
that the application code is incorrect.

Once these frontend corrections pass our tests, we can continue to the
next development stage.

15. Step 10 — Connect the Project to GitHub

Our application is now working in Google AI Studio. The next step is to connect it to GitHub.

This gives us version control, stores the source code in a repository, and prepares the project for development in Visual Studio Code.

Our workflow is now:

Google Stitch → Google AI Studio ↔ GitHub → Visual Studio Code → Backend → Deployment → Telegram Mini App

Open GitHub Sync in Google AI Studio

Stay inside the existing Test Restaurang project.

In the top-right area of Google AI Studio, click: Settings (gear) the GitHub

The GitHub sync panel opens.

If GitHub has not yet been connected, AI Studio asks you to sign in to GitHub.

Follow the sign-in process and authorize Google AI Studio.

Install and Authorize Google AI Studio on GitHub

GitHub may open a page called:

Install & Authorize Google AI Studio

Make sure your correct GitHub account is displayed.

GitHub then asks which repositories Google AI Studio may access.

The available options include:

All repositories

or:

Only select repositories

For our tutorial, we selected:

All repositories

This was useful because AI Studio was going to create a new repository that did not yet exist.

Review the requested permissions and click:

Install & Authorize

GitHub redirects you back to Google AI Studio.

If AI Studio Reports Insufficient Permissions

During our test, the connection did not work immediately. Google AI Studio displayed:

Failed to create GitHub repository, Insufficient permissions to create the GitHub repository.

If you receive this message, do not repeatedly create or delete repositories.

Instead, verify the GitHub authorization.

Open GitHub, click your profile picture, and go to:

Settings → Applications

Here you will find several tabs, including:

Installed GitHub Apps

and:

Authorized GitHub Apps

Check Authorized GitHub Apps

First open:

Authorized GitHub Apps

Look for:

Google AI Studio

This confirms that your GitHub account has authorized Google AI Studio.

In our case, Google AI Studio appeared here, but the repository connection was still not working correctly.

We used Revoke to remove the existing authorization and then went through the Google AI Studio authorization process again.

Use Revoke only when the existing authorization appears to be incorrect or the connection continues to fail. Normally, you should not need to do this.

Check Installed GitHub Apps

Next open:

Settings → Applications → Installed GitHub Apps

Look for:

Google AI Studio

After reconnecting, Google AI Studio appeared correctly in our Installed GitHub Apps list.

Click:

Configure

Under Repository access, verify which repositories Google AI Studio can access.

For our tutorial, we selected:

All repositories

The configuration also showed that Google AI Studio had the required read and write permissions for code and repository operations.

Save the configuration if GitHub asks you to do so.

Complete the Authorization

Return to Google AI Studio and continue the GitHub connection.

GitHub may display another authorization screen showing that Google AI Studio wants permission to:

• Verify your GitHub identity
• Know which resources you can access
• Act on your behalf

Click:

Authorize

After authorization, you should be redirected back to Google AI Studio.

Create the Repository from Google AI Studio

Now return to:

Google AI Studio → GitHub sync

Click:

Create new repository

For our project, we used:

Repository name:

restaurant-telegram-mini-app

Repository description:

Restaurant Telegram Mini App built with Google Stitch and Google AI Studio.

Visibility:

Public

Then click:

Create GitHub repository

Do not manually create a repository with the same name first. In this workflow, Google AI Studio creates the repository and establishes the synchronization automatically.

Push the Project to GitHub

After the repository is created, Google AI Studio displays the files that are ready to be pushed.

In our project, AI Studio reported 24 changed files.

For the first commit, we used:

Initial Test Restaurang application from Google AI Studio

Then click:

Push changes to GitHub

When synchronization finishes, AI Studio displays:

GitHub & Google AI Studio are currently in sync

Our repository is connected to the:

main

branch.

Verify the Files on GitHub

Open the repository from the GitHub Sync panel.

Our repository is:

restaurant-telegram-mini-app

We verified that GitHub contained the application source code, including:

src/
.env.example
.gitignore
index.html
metadata.json
package.json
tsconfig.json
vite.config.ts

We could also see our first commit:

Initial Test Restaurang application from Google AI Studio

This confirms that the project has been successfully transferred from Google AI Studio to GitHub.

GitHub Connection Complete

We now have the connection we wanted:

Google AI Studio ↔ GitHub

This is more than simply storing a copy of the project on GitHub. AI Studio’s GitHub Sync allows the project and repository to stay synchronized as development continues.

Our next stage is therefore:

GitHub → Visual Studio Code

We will clone the repository to our computer, open it in VS Code, inspect the generated React/TypeScript project, install its dependencies, and run Test Restaurang locally before beginning the backend development.

16. Why We Use GitHub

GitHub gives us:

• source-code history
• backup
• commits
• version tracking
• collaboration
• easier deployment
• local development

Most importantly, it prevents our application from existing only inside
an AI development tool.

Our project now becomes a normal software project.

17. Suggested Git Milestones

We should create meaningful milestones.

For example:

Initial restaurant design from Stitch

Add functional restaurant frontend

Add menu search and dish details

Add reservation validation

Add reservation confirmation

Later:

Add backend reservation API

Add database

Add Telegram Mini App integration

This makes it much easier to understand how the project evolved.

restaurant-telegram-mini-app

https://github.com/mehzan07/restaurant-telegram-mini-app.git

C:\Utvecklingprogram\AI

<span class="ͼl">cd</span> <span class="ͼl">C:</span>\<span class="ͼm">Utvecklingprogram</span>\<span class="ͼm">AI</span>

<span class="ͼm">git</span> <span class="ͼm">clone</span> <span class="ͼm">https</span><span class="ͼg">://</span><span class="ͼm">github</span>.<span class="ͼm">com</span><span class="ͼg">/</span><span class="ͼm">mehzan07</span><span class="ͼg">/</span><span class="ͼm">restaurant-telegram-mini-app</span>.<span class="ͼm">git</span>

C:\Utvecklingprogram\AI\restaurant-telegram-mini-app

<span class="ͼl">cd</span> <span class="ͼm">restaurant-telegram-mini-app</span>

<span class="ͼm">code</span> .

restaurant-telegram-mini-app/
│
├── src/
├── .env.example
├── .gitignore
├── index.html
├── metadata.json
├── package.json
├── tsconfig.json
└── vite.config.ts

<span class="ͼm">python</span> <span class="ͼm">app</span>.<span class="ͼm">py</span>

<span class="ͼm">git</span> <span class="ͼm">status</span>

19. Step 12 — Install the Development Environment and Run the Application

Before running the application, the dependencies required by the React/Vite project must be installed.
Check Node.js and npm

The first time we tried:

<span class="ͼm">npm</span> <span class="ͼm">install</span>

We verified this with:

<span class="ͼg">where</span>.<span class="ͼm">exe</span> <span class="ͼm">node</span>

We therefore installed the Node.js LTS version.

On Windows, this can be installed with:

<span class="ͼm">winget</span> <span class="ͼm">install</span> <span class="ͼm">OpenJS</span>.<span class="ͼm">NodeJS</span>.<span class="ͼm">LTS</span>

Then verify Node.js and npm.

<span class="ͼm">node</span> <span class="ͼg">--</span><span class="ͼm">version</span>
<span class="ͼm">npm</span> <span class="ͼg">--</span><span class="ͼm">version</span>

11.17.0

When we first tried:

<span class="ͼm">npm</span> <span class="ͼm">install</span>

npm.ps1 cannot be loaded.
The file is not digitally signed.

As a temporary solution, we could use:

<span class="ͼm">npm</span>.<span class="ͼm">cmd</span> <span class="ͼm">install</span>

<span class="ͼm">npm</span>.<span class="ͼm">cmd</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

<span class="ͼm">npm</span> <span class="ͼm">install</span>
<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

<span class="ͼl">Get-ExecutionPolicy</span> <span class="ͼg">-</span><span class="ͼm">List</span>

CurrentUser    Undefined
LocalMachine   AllSigned

<span class="ͼl">Set-ExecutionPolicy</span> <span class="ͼg">-</span><span class="ͼm">Scope</span> <span class="ͼm">CurrentUser</span> <span class="ͼg">-</span><span class="ͼm">ExecutionPolicy</span> <span class="ͼm">RemoteSigned</span>

<span class="ͼl">Get-ExecutionPolicy</span> <span class="ͼg">-</span><span class="ͼm">List</span>

CurrentUser    RemoteSigned
LocalMachine   AllSigned

<span class="ͼm">npm</span> <span class="ͼg">--</span><span class="ͼm">version</span>

Next, we ran:

<span class="ͼm">npm</span> <span class="ͼm">install</span>

However, we discovered another issue in the application generated by Google AI Studio.

npm reported a dependency conflict between Vite and esbuild.

The generated package.json contained:

<span class="ͼk">"vite"</span>: <span class="ͼk">"^8.3.0"</span>

but under devDependencies it contained:

<span class="ͼk">"esbuild"</span>: <span class="ͼk">"^0.25.0"</span>

Vite 8.3.0 required a newer compatible esbuild version.

Instead of bypassing npm’s dependency checking with:

--force

or:

--legacy-peer-deps

We changed:

<span class="ͼk">"esbuild"</span>: <span class="ͼk">"^0.25.0"</span>

<span class="ͼk">"esbuild"</span>: <span class="ͼk">"^0.28.0"</span>

<span class="ͼm">npm</span> <span class="ͼm">install</span>

again.

The installation succeeded and npm created the local dependency environment, including:

node_modules/
package-lock.json

The node_modules directory contains the installed packages and should normally remain excluded from Git through .gitignore.

The package-lock.json file, however, should normally be committed because it records the resolved dependency versions used by the project.

Understand the Development Command

Our package.json contains this script:

<span class="ͼk">"scripts"</span>: {
  "dev": <span class="ͼk">"vite --port=3000 --host=0.0.0.0"</span>
}

Therefore, when we run:

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

npm executes:

vite --port=3000 --host=0.0.0.0

Vite then starts the development server.

This explains why we use:

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

instead of:

<span class="ͼm">python</span> <span class="ͼm">app</span>.<span class="ͼm">py</span>

The current application is a React/TypeScript frontend usi

VITE v8.3.0 ready

Local: http://localhost:3000/

We could then open:

http://localhost:3000/

The Test Restaurang application was now running directly from our local Visual Studio Code project.

Vite Warning

Vite also displayed a warning concerning __dirname in vite.config.ts.
The application nevertheless started and worked correctly.
Because this was a warning rather than a runtime failure, we decided not to change the Vite configuration at this stage. We will only modify it if it becomes necessary later.

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

http://localhost:3000/

Ctrl+C

<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

<span class="ͼm">git</span> <span class="ͼm">status</span>

modified:   package.json

Untracked files:
    package-lock.json

<span class="ͼm">git</span> <span class="ͼm">add</span> <span class="ͼm">package</span>.<span class="ͼm">json</span> <span class="ͼm">package-lock</span>.<span class="ͼm">json</span>

<span class="ͼm">git</span> <span class="ͼm">status</span>

<span class="ͼm">git</span> <span class="ͼm">commit</span> <span class="ͼg">-</span><span class="ͼm">m</span> <span class="ͼk">"Fix dependencies and verify local development"</span>

<span class="ͼm">git</span> <span class="ͼm">tag</span> <span class="ͼg">-</span><span class="ͼm">a</span> <span class="ͼm">v1</span><span class="ͼj">.0.0</span> <span class="ͼg">-</span><span class="ͼm">m</span> <span class="ͼk">"Test Restaurang frontend V1 - verified locally"</span>

<span class="ͼm">git</span> <span class="ͼm">tag</span>

v1.0.0

<span class="ͼm">git</span> <span class="ͼm">push</span> <span class="ͼm">origin</span> <span class="ͼm">main</span>

<span class="ͼm">git</span> <span class="ͼm">push</span> <span class="ͼm">origin</span> <span class="ͼm">v1</span><span class="ͼj">.0.0</span>

<span class="ͼl">cd</span> <span class="ͼl">C:</span>\<span class="ͼm">Utvecklingprogram</span>\<span class="ͼm">AI</span>\<span class="ͼm">restaurant-telegram-mini-app</span>
<span class="ͼm">npm</span> <span class="ͼm">run</span> <span class="ͼm">dev</span>

http://localhost:3000/

21. Step 14 — Add the Backend

Once the frontend is stable, we can add real reservation storage.

Our architecture becomes:

Restaurant UI

↓

Reservation Form

↓

Backend API

↓

Database

The backend should validate reservation data before storing it.

Never rely only on browser validation.

Later, we can ask AI Studio or another coding agent to implement this
part while we review the generated code.

22. Step 15 — Add Reservation Storage

The database should eventually store information such as:

• reservation reference
• customer name
• email
• phone
• number of guests
• date
• time
• special requests
• reservation status
• creation time

At this stage we must also begin thinking seriously about privacy and
security because we are storing customer information.

23. Step 16 — Add Confirmation Notifications

After a reservation is successfully stored, the application can send a
confirmation.

For example:

Reservation confirmed

Reference: TR-260919-1234

Date: September 25, 2026

Time: 19:00

Guests: 4

Notifications could later be delivered through:

• email
• Telegram
• both

Credentials for email providers, Gemini, databases or other external
services must never be committed directly to GitHub.

Use environment variables and secret-management features instead.

24. Step 17 — Prepare the Application for Deployment

Before deployment, perform another complete test.

Check:

• desktop layout
• mobile layout
• navigation
• menu
• search
• reservation
• validation
• confirmation
• backend
• database
• error handling

Also verify that no passwords, tokens or API keys have accidentally been
committed to GitHub.

25. Step 18 — Choose the Deployment Method

Our final deployment method depends on the architecture we actually end
up with.

If the project is only a static frontend, GitHub Pages can publish HTML,
CSS and JavaScript directly from a repository.

However, GitHub Pages is static hosting.

A restaurant application with a server, database, email integration or
protected API credentials requires backend hosting as well.

Google AI Studio can deploy full-stack applications to Google Cloud Run.

Other deployment platforms may also be appropriate.

We will choose the final platform after examining the application that
AI Studio actually generates.

26. Step 19 — Why We Need HTTPS

Our deployed application should have an HTTPS address.

For example:

https://restaurant-example...

HTTPS protects communication between the customer and the server.

It is also important for integration with platforms such as Telegram.

Once deployment is complete, we should test the public URL from:

• desktop browser
• mobile browser
• private/incognito browser

This confirms that the application is genuinely available to customers
rather than only working on our development computer.

27. Step 20 — Create the Telegram Bot

Now we move to Telegram.

Open Telegram and search for the official:

@BotFather

BotFather is Telegram’s tool for creating and configuring bots.

Start a conversation with BotFather.

Create a new bot using:

/newbot

BotFather will ask for:

• bot display name
• bot username

The username must follow Telegram’s bot naming requirements.

For example, we might choose something similar to:

Test Restaurant

and:

test_restaurant_demo_bot

The actual username must be available.

28. Protect the Bot Token

After creating the bot, BotFather provides a bot token.

Treat this token like a password.

Never:

• publish it in the article
• include it in screenshots
• commit it to GitHub
• place it directly in public JavaScript

Store secrets in environment variables or an appropriate secrets
manager.

If a real token is accidentally exposed publicly, revoke/regenerate it
immediately.

29. Step 21 — Configure the Telegram Mini App

A Telegram Mini App is still fundamentally a web application.

Telegram opens our deployed web application inside its interface.

Conceptually:

Telegram

↓

Restaurant Bot

↓

Mini App

↓

Our HTTPS Application

Telegram allows a bot’s Mini App to be configured through BotFather.

We can configure the restaurant application as the bot’s Main Mini App
or expose it through an appropriate menu/button.

The public application URL created during deployment becomes the URL
Telegram opens.

30. Step 22 — Add Telegram’s Web App Integration

Telegram provides a JavaScript interface that allows the web application
to communicate with the Telegram client.

Once integrated, the application can access Telegram Mini App
functionality.

For example, the application can adapt to Telegram’s environment and
receive initialization information.

This also opens possibilities for later functionality such as:

• Telegram-aware user experience
• theme integration
• Telegram buttons
• Telegram-based confirmation
• launching the application from bot interactions

Telegram initialization data must be validated on the server before it
is trusted.

Client-side user information alone should never be treated as secure
authentication.

31. Step 23 — Test Inside Telegram

Now test the complete flow from a smartphone.

Open Telegram.

Open the restaurant bot.

Launch the Mini App.

Then test:

Open Restaurant

↓

Browse Menu

↓

Search Dish

↓

View Dish

↓

Book Table

↓

Submit Reservation

↓

Receive Confirmation

Also test closing and reopening the Mini App.

The application should feel like a natural mobile experience rather than
a desktop website squeezed into Telegram.

32. Final Architecture

If all stages are completed, our project will look approximately like
this:

Customer

↓

Telegram

↓

Restaurant Bot

↓

Restaurant Mini App

↓

Web Frontend

↓

Reservation API

↓

Database

↓

Email / Telegram Confirmation

GitHub remains the source-code repository behind the development
workflow.

Our development tools may include:

Google Stitch → Google AI Studio → GitHub → VS Code → Deployment →
Telegram

33. Showing the Application to Restaurant Customers

The same application can potentially be demonstrated in two ways.

Public Web Application

Send the customer the HTTPS address.

They can open it directly in a browser.

Telegram Mini App

Send the customer the Telegram bot or Mini App link.

They can experience the restaurant application directly inside Telegram.

This makes the project useful not only as a technical experiment but
also as a demonstration application for potential restaurant customers.

34. Important Development Principle

Throughout this project, we will follow one rule:

Do not move to the next major stage until the current stage works.

Our development process is therefore:

Design

→ Test

Frontend

→ Test

Reservation

→ Test

Backend

→ Test

Database

→ Test

Deployment

→ Test

Telegram

→ Test

AI can accelerate development enormously, but testing remains essential.

35. Where We Start

The complete roadmap is now defined.

But we will not perform all of these steps at once.

Our first practical task is:

Google Stitch — Restaurant UI Version 1

We will:

1. Open Google Stitch.
2. Create the project.
3. Submit our first restaurant prompt.
4. Examine the generated UI.
5. Test the mobile design.
6. Improve the design with additional prompts.
7. Save the result as our first project milestone.

Only when the Stitch design is satisfactory will we continue to Google
AI Studio.

Conclusion

In this project, we are combining AI-assisted design, AI-assisted
development and traditional software-development practices.

Google Stitch will help us design the restaurant experience.

Google AI Studio will help us turn the design into a functional
application.

GitHub will manage our source code and project history.

Visual Studio Code will allow us to inspect, run and modify the
application locally.

A deployment platform will make the application available through a
public HTTPS address.

Finally, Telegram will allow customers to open the restaurant
application as a Mini App.

Our complete journey is:

Stitch → AI Studio → GitHub → VS Code → Deployment → Telegram

The next practical action is to open Google Stitch and create Version
1 of the restaurant interface.

This post is part of Google AI App Development — Step by Step

Back to home page