A few days ago, I saw Logan Kilpatrick’s Tweet about the new AI-first vibe coding experience in AI Studio:
Last time I tried AI Studio for vibe coding, it was mostly a single-page web application with all the code in a single file (which wasn’t ideal).
I decided to give it a try again, to see what it takes to create a simple app, and what the code looks like. For the app, I decided to create an AI generated trivia app where a user selects a topic and gets questions to answer on that topic (a simplified version of Quizaic that we created last year). The more questions users answer correctly, and the quicker they answer, the more points they get.
App and Video
If you want to skip reading and see the end result, here’s the app deployed to the cloud:
If you would rather see me talk about the vibe coding experience, here’s a video:
If you prefer reading, continue 😀
Prompts
For the initial prompt for the app, I used the following:
Generate an AI-powered trivia game where a user picks a topic and then answers
multiple choice questions on that topic with the following rules:-The user chooses a topic from a drop-down of 10 pre-set topics such as
geography, history, science, etc. but there's also a way to enter a free-form
topic.
-Once the user selects a topic, generate an image on that topic and use that
as the image of the game throughout the game.
-Multiple-choice questions are generated on that topic. 5 is the default
number but there's a way to change it.
-There's a difficulty drop-down for question difficulty with Easy, Medium,
Hard and defaults to Easy.
-The quiz language is in English but there's a way to change it
-The quicker the user answers the question, the higher the points. Give 10
seconds for each question where the points go down 10 points each second:
100 points for 1 second or less, 90 points for 2 seconds or less, ...
0 points for wrong answer or 10 seconds
As you can see, it’s quite a detailed prompt and the app I’m asking for is not trivial. To my surprise, AI Studio was able to generate a functional and great-looking app in about 70 seconds.
In a second prompt, I used this prompt to change the language drop-down to add more languages with flags:
Change the language to be a drop-down with top 50 most popular languages
sorted alphabetically and with country flags
This also worked flawlessly in less than a minute. It was quite impressive that I got an app working with questions and images generated by AI and with a much better UI than I could have done myself in less than 5 minutes!
Sync to GitHub
As soon as I got the basic app working, I saved it in AI Studio. There is also a GitHub integration that creates a GitHub repository for your application and syncs the changes. You can take a look at the code in my GitHub repository: https://github.com/meteatamel/ai-trivia-app
Unlike the previous AI Studio experience, the code is well-structured with components and services.
Deploy to Google Cloud
Another impressive feature is one-click deployment to Google Cloud. You click on “Deploy app”, select your cloud project, and within a few seconds, your application is packaged and deployed to Cloud Run.
Conclusion
Overall, I’m quite impressed with the new vibe coding experience in Google AI Studio. Currently, the vibe coding experience is limited to web applications without any backends, but I hope to see backend integration and data persistence coming in the future.
Here are some links from my experiment:
Source Credit: https://medium.com/google-cloud/vibe-coding-an-ai-trivia-quest-app-with-google-ai-studio-381173f7bce1?source=rss—-e52cf94d98af—4
