Anyone can Vibe Coding!

Shake a Simple Web with Google AI Studio, Ready to get on the web for free

Tell me, anyone can Vibe Coding!

.

Everyone says AI updates every day. Before, we used Google AI Studio to try generating photos and videos, right? We haven't been in for many months. There are a lot of updates. The team has knowledge sharing, teaching using Google AI Studio, and it can also be coded. Finished, we can use the code in Github for free! You have to try it. You can tell anyone.

.

First of all, what is Google AI Studio? is a tool that makes it easy for us to create and try out AI apps from Gemini. By typing in the prompt what we need, we can open Google AI Studio and login to access it.

So what's the procedure going on? Let's go see.

⭐ Prompt ordered an AI build of

Go to Build and put what we want to try, we can type in English or Thai, here we want a calculator that averages the input count for us, and then compares which one is the cheapest.

"'

Help make a calculator for

- Calculate the average of the input.

- Compute the price and quantity. Which is cheaper?

"'

"'

Create a website calculator for

- Calculate avg value with some output.

- Compare qualtity and price.

"'

The Model we will see Gemini 2.5 Pro. When pressed, it will be Advanced settings. We will change the model. There is Gemini 2.5 Pro and Gemini 2.5 Flash. The System instructions template will be React (TypeScript) as default and Angular (TypeScript). Then we can enter system instructions.

When we type what we want and fix the settings, press Build now, wait for AI to work, create a web for us.

⭐ Try tweaking the fix.

If you want more, type in the chat. See the difference in which one has been solved by pressing View diff or returning to the previous version with Restore checkpoint.

Besides text, we also upload files, whether they are images, text files, pdf files, and speak to order them. Another interesting thing is the add annotation feed like Firebase Studio that is framed or points the point we want. When you finish drawing, click Add to chat, it will screenshot us and tell us what to do, such as putting the average frame here.

If you want to change the name of the app, press the pen to change the name of the app and change the details. But you can't change your mind. Gosh, you can't change the prompt. If you forget that you used to type this prompt, you can see from here. Finish editing, don't forget to press Save.

What we see is the preview section. Select the Mobile and Tablet screen if you want to read the code in the code section.

⭐ Try sharing it with a friend.

Don't forget to press Publish your app, otherwise you can't share it, you can't open it, and you can check it again at Advanced share permissions. If you want to share just a few people, you can choose email like sharing a file from Google Drive.

⭐ Keep our code at Github.

First, press Save to Github to save the code, and it will go up next to us. Press Sign in to Github to continue, then select the one that is our Github user, and then press Install & Authorize to connect to our Github.

Then create a new repository, name it and set visibility to Public and press Create Git repo. Wait a minute. It will file change and commit messages that we do not have to do with it. Press Stage and commit all changes. We will get Github repo.

P.S. If we solve it in Google AI Studio, we can update Github, but if we solve the code in Github, it won't update at Google AI Studio.

⭐ Put the web up, Vercel.

In fact, there is an option to put it on Google Cloud Run. I understand that it will not be free because it thinks like pay-per-use, which some people see as sharing is probably over, haha. But it is long and then copied. It is more convenient to deploy as a website, which this Github Page does not support.

But there's another popular free one, Vercel, that works a lot.

First, go to his web and login with Github, then add New... → Project and select the desired repo. Press Import and then take to the New Project page. The Framework Preset is Vite and then press Deploy.

If the deployment is done, the white page must add this to the body on the index.html page. Because the browser does not understand the TypeScript in this project, it cannot run directly, so transpilation "to convert it to a JavaScript file (this one we ask Google AI Studio again).

"'html

< script type = "module" src =. "/ index.js" > < / script >

"'

When it's deployed, we can get urls that can be forwarded to friends, copy the domain.

If you want to solve it, you can order AI to solve it from Google AI Studio and update the code tab. To solve it, press Save and press Save to Github again. After a while, wait and finish.

I feel that the url is not pretty. Go to Settings → Domain and press the Edit button. Type the name you want, but you can not repeat what you already have, and then save.

.

You see, it's not that hard, right? What AI tools do you want to try? Comments can tell.

# Includes IT matters # Known IT # Today's story # Direct experience # Lemon 8 Howtoo