How to Quickly Create Educational Web Apps Using Google AI Studio
Vibe coding just got a major upgrade!
As an online professor, I love free web apps.
I rely on awesome simulations (like this one) to help me demonstrate the complex motions of stars, planets, the moon, and the sun.
Unfortunately, many free educational web apps become bloated with ads, pop-ups, and clickbait. Even a simple online tool like a percent error calculator can become virtually impossible to use because of all the ads on the page.
This frustration has led me to create more and more of my own simple web apps for students in my online classes so that I can control both the design of the app and where it is hosted. (If I host it myself on Google Cloud Storage or AWS, then I can be sure the link will never break.) For example, check out my simple percent error calculator - with no ads!
I used to spend days upon days coding up simple web apps (or tweaking existing code that I found online) in order to make custom tools for my students.
But then along came generative AI and everything changed.
In the past six months, my coding productivity has exploded. With the help of ChatGPT, I’ve written all manner of web apps and automations to support my teaching.
“Vibe coding” has entered the building
Of all the new terminology that has emerged in the past few years of AI development (prompt engineering, LLMs, sycophancy, etc.), I think my favorite is the term “vibe coding.”
I first encountered this term on the Hard Fork podcast a few months ago, and I found that it perfectly described the way that I had been collaborating with AI to write and deploy code even though I didn’t fully understand exactly what I was doing.
With a combination of natural language interactions (“Hey chat, create a python script that can rename all of my lesson files.”) and a rudimentary knowledge of programming, I was able to unlock the true magic of coding - saving hours and hours by automating routine tasks.
While AI has dramatically lowered the barriers to coding awesome web apps, it has not removed all of the barriers.
Specifically, learning how to deploy a custom web app to a cloud hosting service (so that others can access it online) can still be very confusing, especially for the total beginner.
Sidebar: Two weeks ago, I wrote a totally different version of this post where I showed how to vibe code and then host your own web app. Here’s the video I made to describe how to host your own content online. Thankfully, this is already out of date in light of what I am about to show you.
Google AI Studio is a total game changer!
I recently learned that Google AI Studio has a feature that supports vibe coding custom apps. You can access a set of templates or create your own web app from scratch at https://aistudio.google.com/apps
This free tool solves all of the remaining problems and makes it possible for anyone to create their own custom web tool and host it on the web in just a few minutes. Let me show you how.
My first project? You guessed it - a percent error calculator! I gave a shockingly simple prompt to Google AI Studio:
“Create a percent error calculator.”
And after about a minute of thinking, it started writing code. AI Studio doesn’t just write a single HTML or JavaScript file for you, it builds the entire website structure and lays it all out in the proper folders.
Once the code was written (about another minute later), the calculator was visible in the preview pane.
Wow - now that is a nice looking web app!
But the problem remains - how do I host this on the internet so that my students can access it?
The real innovation of Google AI Studio…deployment.
Once the AI has helped you build your custom web app, there are a variety of ways that it can be deployed across the web.
Download it to your computer: This would be the old-school (you know, like last week) way of doing it. Download and then manually upload to a hosting service.
Share on Google Drive: The web apps can be saved and shared via Google Drive. This is great, but it requires students to log in to their Google account to view the web app. You can see an example of my percent error calculator shared this way.
Deploy to the web: This is amazing! With the click of a button, you can deploy your web app to Google Cloud Storage. This means it is hosted to the real internet with infinite scalability like any other website. Here’s a link to the same web tool hosted this way.
Note: Deploying your web app to Google Cloud Storage does require entering payment information and you will be charged for storage. But I’ve hosted tons of content across this service and my bill averages about $0.13 per month. It’s an incredibly cheap and easy way to deploy your web apps for anyone to use.
What can you create?
I spent a few more minutes playing with Google AI Studio to make some educational web apps for my astronomy class. In about 20 minutes, I was able to create several web apps that would have taken me weeks to create in the past.
Take a look at what I made.
A simple gravity simulator (click and drag to launch a planet)
I would love to see what you create with these tools. Send me an email (avheuv@gmail.com) or comment on this post to share your links.