Build Apps with Google AI Studio: Anime Greetings Cards

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I set out to build anime inspired AI generated greetings cards. This is the prompt that I used:

Please create an app that generates cute and unique greetings cards, using Imagen for anime inspired visuals, and Gemini for heartfelt messages. I will need to be able to export the finished app to run locally with minimal setup and then host it on Vercel.

Demo

Here is a link of the version I deployed to Vercel because I do not have a billed account. Here is the repo on GitHub.

Greeting card app

My Experience

Getting this app up and running took way more time than advertised. On my first attempt, I couldn’t get the app to render in the Google AI Studio’s preview tab. After a little back and forth with the AI agent, I got it to work. Following the tutorial I tried to get it to deploy to cloudrun, only to hit a major roadblock because I do not have billing activated on my Google Cloud account. This was rather frustrating, so together with the AI agent we came up with a workaround, deploy to Vercel! Unbeknownst to me at the time, this would bring its own set of problems, mainly that the code used to build in the Google Studio does not immediately work when run locally, nor does it deploy in Vercel. I tried to work out a solution with the AI Agent only for it to completely stop working.

This is a really cool concept so I decided to give it another go, scrapping the original app and creating a new app with a new prompt. This time it worked right off the bat. I had to direct the agent to fix an issue with the greetings messages, where the app was displaying three messages instead of one. Since I have a bad habit of doing things the hard way, I decided to try running the app locally and deploying to Vercel. Unfortunately the agent was of no real help when it came to this. The agent became fixated on the importmap script, which is necessary to render the app in the preview tab of Google AI Studio, but not necessary for local builds and Vercel deployment. I discovered that the AI agent has a stubborn streak, even after being told numerous times to ignore the “issue”, it repeatedly came back to it. It was an endless loop where it would analyse its own code, recognise that importmap in unnecessary for local builds, suggest deletion of the script, run the suggested upgrade only for it to automatically add the script again and then suggest its removal. Because of this it wasn’t of much help when it came to running the app locally, even less so for deploying on Vercel. Thanks to my professional experience and help from another LLM, I was able to figure it out.

You would think this would be the end of it but unfortunately I ran into one more issue when deploying to Vercel, Imagen does not generate images unless the Gemini API Key is connected to a billed account, and a little bit of research shows that this can get quite expensive.

So what did I learn? Google’s AI Studio is a really cool tool with potential to get your app ideas off the ground in record time, but pray that you do not need any fine tweaking. If it wasn’t for my experience as a software developer I probably wouldn’t have noticed some of the issues, and I definitely would not have been able to fix most of them. The initial app is serviceable, but after all this effort I’m too drained to ask it to fine tweak the presentation.

Leave a Reply