This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
What I Built
I built an RPG Character Portrait & Lore Generator using the "Build" feature in Google AI Studio. The application turns user-selected RPG traits (race, class, visual style, and equipment) into a complete character sheet with ability scores, backstory, and a visual portrait.
It integrates the Imagen API for high-resolution portrait generation alongside Gemini Flash for lore generation. Additionally, because the Imagen API currently requires a billed API key, I implemented an automatic Canvas Portrait Fallback Generator powered by Gemini Flash so the app remains 100% functional and visually engaging even on a free-tier API key.
Prompt Used to Generate the App:
Build an interactive "RPG Character Portrait & Lore Generator" web application that integrates both the Gemini model for text generation and the Imagen API for image generation.
App Features & Workflow:
User Input Form:
- Character Name (optional, with a "Randomize" button)
- Race (e.g., Elf, Dwarf, Cyborg, Tiefling, Human, Orc)
- Class/Role (e.g., Necromancer, Paladin, Netrunner, Rogue, Bard)
- Visual Art Style (dropdown: Dark Fantasy Oil Painting, Anime/Cel-Shaded, Pixel Art, Watercolor Concept Art, Cyberpunk Neon)
- Key Traits / Equipment (short text input, e.g., "glowing blue runes on armor, scarred face, holding a crystal staff")
AI Generation Logic:
a) A compelling 3-sentence character backstory and personality trait.
b) Basic RPG ability scores (Strength, Dexterity, Constitution, Intelligence, Wisdom, Charisma) formatted neatly.
c) A highly detailed, optimized image generation prompt based on the user's selections.
- Use the Imagen API to generate a high-quality 1:1 character portrait using the optimized visual prompt and selected art style.
UI/UX Design:
- Dark-mode RPG tavern/grimoire aesthetic (deep slate background, gold/amber accents, clean typography).
- Responsive two-column layout: configuration panel on the left, generated Character Sheet (portrait, stats badges, and backstory) on the right.
- Include loading states while the text and image are being generated, and a button to download the portrait.
Features Utilized:
- Build apps with Gemini in Google AI Studio for full-stack application generation and iterative refinement.
- Imagen API for primary character portrait generation.
- Gemini Flash for structured RPG lore, stat generation, prompt expansion, and real-time SVG code synthesis as a fallback mechanism.
Demo
Screenshot:
Generated RPG character sheet with stats, lore, and custom HTML5 Canvas fallback portrait.
My Experience
Working through this track was a great hands-on introduction to building multimodal web applications rapidly in Google AI Studio.
Key Takeaways & What Surprised Me:
Handling API Tier Constraints Gracefully: The biggest surprise during development was discovering that calls to the Imagen API strictly require a paid/billed API key. Instead of letting the app fail with an error for free-tier users, I iterated on the prompt in Google AI Studio to build an automatic HTML5 Canvas portrait fallback generator. When the app detects that Imagen API billing is unavailable, Gemini Flash dynamically writes custom, layered SVG code to render the character's portrait based on their race, class, and equipment.
Rapid Iteration in AI Studio: Adding error handling and a completely secondary visual rendering pipeline (HTML5 Canvas generation to PNG) took just a quick conversational follow-up in the Build tool, showing how effective Gemini is at both UI scaffolding and resilient API integration.
Iterative Refinement & Error Recovery: The initial scaffold generated by AI Studio felt like a demo and needed polish. The generated text was originally overly complex and bogged down with technical jargon, cluttered labels, and unnecessary descriptions. Through quick follow-up prompts, I stripped out the noise to focus on clean, immersive RPG storytelling. What made this process painless was Geminiβs ability to catch runtime errors, inspect stack traces, and apply automatic fixes on the fly, making iterative UI and prompt tuning remarkably smooth.
Top comments (1)
I tried it πΈ Really fun idea!
The Canvas fallback is a nice touch to, it keeps the app usable even without Imagen. Nice work π