Tom and Jerry Card Apps with Google AI Studio

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

What I Built

I created the "Tom & Jerry Card Generator," a web application that brings the classic cartoon's chaotic energy to life. It uses the Gemini API to dynamically generate unique, vintage-style trading cards. The app leverages two different models: 'gemini-2.5-flash' to craft a witty title, a scene description, and hilarious stats, and 'imagen-3.0-generate-002' to create a matching visual in the iconic 1950s animation style. The result is an endless supply of zany cartoon moments captured on a digital card.

Demo

When you first land on the page, you're greeted with a prompt to start the mayhem. Clicking the "Generate New Card!" button kicks off the process, calling the Gemini API to invent a brand new Tom and Jerry scenario. In seconds, a card appears with a unique image, a funny title like "Cat-apult Catastrophe," and stats for "Mischief Level," "Slapstick Rating," and "Cheese Factor." Every click generates a completely new, unpredictable, and often hilarious scene, ready to be enjoyed.

https://aistudio.google.com/u/1/apps/drive/1YjPqi74Jin9xP77xuBEQoevau7wWa4ul?showPreview=true&resourceKey=

My Experience

Building this app was a fantastic experience, and I was impressed by how seamlessly the Google GenAI SDK integrated into the project. Using the responseSchema feature was a game-changer, as it allowed me to get perfectly structured JSON for the card's text and stats directly from the API, which eliminated the need for complex string parsing. Combining the text generation with the powerful imagen-3.0-generate-002 model made it incredibly easy to produce cohesive and visually appealing results. This project was a fun and powerful demonstration of how different AI models can work together to create engaging and creative applications.