DEV Community: Pranamya Rajashekhar

Sketch 'n' Scribble: Scene and Dialogue Generator using Google AI Studio

Pranamya Rajashekhar — Sun, 03 Aug 2025 14:42:11 +0000

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

Ever wanted to write RPG-style dialogue without spending hours contemplating and typing lines for every NPC? What if an AI could help you generate immersive scenes and character interactions directly on demand?

In this post, I’ll provide an overview of how I built a narrative scene and dialogue generator powered by Google AI Studio, using Vite, React and TypeScript, and deployed it for the world to use.

What I Built

I set out to build a Narrative Scene and Dialogue Generator - a web application that helps users (especially game developers, writers, and storytellers) create immersive dialogues and imagery for their story based on the custom scenes, characters, and intents that they have entered.

The goal was to let users:

Define a unique scene of their choice, for example, a derelict space station or mysterious forest.
Describe the characters, their appearances, personalities, and any other relevant details.
Specify the intent of the dialogue, for example, “ask for access” or “seek guidance”.
And instantly generate a formatted dialogue and visually interesting scene.

Demo

You can access this application in two ways:

Live website: Ideal for general use. If you have a billed API key, you'll be able to generate both dialogue and images. With a free API key, you can still generate dialogues, but image generation will be unavailable due to API limitations.
Google AI Studio via the applet: Recommended if you want full functionality without needing a billed key. Running the app within the AI Studio environment allows image generation to work even with a free-tier setup.

🗝️ You can get your free API key here.
📂 You can also view the code here.

My Experience

When I first set out to build this project, I didn’t expect it to turn into such a fun and rewarding experience. My initial goal was simple: create a web app that could help generate some dialogue based on a scene and characters - something lightweight, useful for storytelling, and powered by AI. What started as a basic idea soon evolved into an iterative journey of experimenting with prompts, adjusting designs, and integrating better features.

This was my first time building something with Google AI Studio thus I allowed the Gemini model itself to select the frameworks to be used and it selected React + TypeScript + Vite for frontend. This was also a great opportunity to explore how prompt engineering could drive real functionality.

Along the way, I encountered a number of challenges which I had to solve as well. For example, figuring out how to let users securely input their own API keys when deploying the app without access to a billed key was a puzzle I had to solve. I also spent time refining the UX by prompting the system to include buttons for downloading results and separate areas for displaying the dialogues and the scene image.

What stood out the most to me was how much power a good prompt can unlock. Each version of the app was brought out by a new prompt and each small tweak, a new idea, or a clarification that brought the tool closer to what I imagined. In the sections that follow, I’ll walk you through the key prompts I used, the issues I faced, and how I solved them to make this AI-powered storytelling tool a reality.

The prompts I used

I used a series of incremental prompts in Google AI Studio to shape and evolve the app. Instead of trying to get everything right in one shot, I approached the project iteratively by initially defining the main goal after which I used new prompts for adding new features, refining functionality and improving the UX.

Prompt 1: Creating the Core - A Fantasy Dialogue Generator

I started with a simple prompt which outlined the main goal of the application:

“Build a Narrative Game Dialogue Generator, where the user can describe a fantasy world or RPG scenario, and the application auto-generates character dialogues.”

This first version focused on letting users describe the setting and the characters they needed, then used the Gemini model to output the dialogue in a structured format. It worked great for roleplaying game writers or developers who wanted fast, immersive NPC dialogue generation.

Prompting process:

Input:

Output:

As seen from the above output, the application can now generate only the dialogue.

Prompt 2: Enhancing World-Building with Visuals

After building the dialogue feature, I wanted to take it further by helping users visualize their custom scene. I prompted:

“Add another feature to generate an image of the setting when a button called 'Generate Scene Image' is clicked.”

The application now had another button specifically to generate a scene as shown below:

Prompting Process:

Prompting Output for the same input:

This added a new layer of interactivity. Now users could not only imagine the story, but also see a scene image generated using a text-to-image model. It deepened the world-building experience and made the app feel more complete.

Prompt 3: Improving the UI and Adding Download Options

Once both dialogue and images were being generated successfully, I noticed that to save the dialogue and image, users would have to manually right-click the image to save into their local systems. It would be logical to have separate buttons to allow the users to save the image and dialogue if they liked the generated content. The next prompt I used said:

“Fix the title of the application and other text descriptions to include scene generation. Add required buttons to download the scene image and the dialogue once it has been created.”

Now the application looked like this:

Output including download buttons for both the image and the dialogue:

This small change added a lot of polish. It helped clarify the app's dual functionality and also gave users the option to download their content, making it more useful and convenient for them.

Prompt 4: Attempt at adding API Key Input

Now at this point I downloaded the zip file into my own system to tinker with and I realised that image generation required a billed API key, which I didn’t have access to, therefore I was unable to generate the images. I was stumped and unsure how to go about it, but I found this great blog by @yvol whereby this challenge was overcome. I decided to use the same technique. So I updated the app with:

“I want the user to be able to enter their own API key securely and use it before generating the image.”

Unfortunately, this didn’t work as intended. When I asked Gemini to add a feature for users to enter their own API key, it declined, citing security concerns. It explained that API keys should only be accessed via process.env.API_KEY to prevent exposing them on the client side. Allowing user input for keys was considered a security risk, so the model stuck to the environment-based approach, following industry best practices.

Prompt 5: Successfully added API Key Input feature

To work around this limitation, I prompted Gemini with a clarification:

“No, I currently do not have access to the billed API key, so I am unable to generate images when hosting this website. I wish for the user to be able to enter their own API key so that if it is billed and possible, then they can generate the images if they require. I nor any other user will be able to access the entered API key.”

This prompt helped communicate that the API key would remain private to the user and never be exposed or stored, allowing the app to support optional image generation for those with access to the required capabilities.

Now the application requested the user to enter their own API key before generating any dialogue or image as shown below:

Final Resultant Application:

🧠 What I Learned from Iterative Prompting

Each of these prompts helped evolve the app in meaningful ways — from a simple generator to a customizable, visual, and user-secure tool. This iterative approach made development much faster, and prompt engineering truly felt like a new kind of programming.

If you're building with GenAI tools like Google AI Studio, I highly recommend starting simple, then prompting your way forward.

Summary

In this blog, I share my journey of building a Narrative Scene & Dialogue Generator using Google AI Studio, developed with React, TypeScript, and Vite. The app allows users to describe an RPG-style scene and characters, then generates structured dialogue - perfect for storytellers and game developers.

Throughout the project, I iteratively improved the app using prompt engineering, adding features like scene image generation, downloadable outputs, and a secure way for users to input their own API keys.

Acknowledgements:

Thanks to @yvol whose blog helped me to fix up the issue in my own project.

Whether you liked this post or found a few bugs, I’d love to hear your thoughts - feel free to react and drop a comment! 🤗

Clock In, Clock Out: Office Life through CSS Art

Pranamya Rajashekhar — Sat, 26 Jul 2025 17:11:22 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

Welcome to the cubicle jungle - rendered entirely in HTML and CSS!

In this creative project, I decided to bring the quiet chaos of office life to the screen using nothing but pure CSS art. No JavaScript - just lines of code mimicking office chairs, cluttered desks, blistering hot coffee straight from the coffeemaker, and even that one perpetually malfunctioning printer out of ink. The idea? To capture the quirks of the everyday workspace digitally.

To add a touch of charm and personality to the project, I implemented cursor trails that follow the mouse pointer in the form of footsteps. This subtle detail playfully represents the daily pattern of clocking in and out of office life. This effect ties the theme of representing the daily office life together both visually and metaphorically.

Now, make sure to dive in, take a seat, and don’t forget to clock out!😉

Demo

Here’s the live demo of my project in Codepen — a snapshot of everyday office life crafted entirely with HTML and CSS. From the desk and chair to the glowing monitor and ambient details, every element was hand-coded to mimic a familiar workspace vibe.

If you'd like to view the full-screen demo in your own browser or check out the code, you can use the links below:

💻 Live Demo – Best viewed on desktop for the full experience!
📂 GitHub Repository – Explore the source code, structure, and animations behind the scene.

(P.S. Remember to hover around and catch a few animations in action!)

Journey

At first, I just wanted to build something simple; perhaps a desk, a laptop and a chair. But then I realized the desk looked rather empty😅 which I did not like at all. So, I found myself planning out an extensive scene, with other items such as a lamp, phone, printer, files and folders, plants and sticky notes.

But I realised I needed something to simulate a real-life office environment but I was not sure how I would do anything complicated without the help of Javascript 🤔. I decided I could simulate a path of footsteps following the cursor trail; from and to the office chair which was possible in CSS, and was an ode to the 9-to-5 we are so familiar with.

After sketching out the entire scene, I wanted to take it a step further by adding animations to enhance interactivity and inject a bit more fun into the project. By making use of Keyframes and some simple hover effects, I was able to bring several elements to life. Here’s what animates in the scene:

The office chair 🪑 shrinks on hover - like someone just sat down.
The lamp lights up 💡(because what's an office without some late-night overtime?).
The laptop screen 💻 and keyboard subtly glow on hover.
The phone screen 📱 lights up, ready for that never-ending call.
The potted plant 🌱 shakes, giving a touch of life to the space.
The coffee cup ☕ trembles on hover — with a little surprise message! Ouch!
The printer paper 🖨️ shakes, as it is still out of ink (as usual).

These playful details not only added character, but made the entire experience feel more dynamic and immersive.

There were moments when I hit a wall — like figuring out how to make trapezium shapes for the chair or choosing a background that felt just right. But every roadblock led me to learn something new, thanks to the many blogs and resources I discovered along the way (separate section for these resources below).

I also utilized CSS media queries to enhance responsiveness - specifically, I hid the section containing the footstep cursor trails when the browser window became too small, ensuring the layout remained clean and uncluttered on smaller screens.

One feature I’d love to explore next is adding sound effects🎵 especially when tied to animations, since they would bring an extra layer of interactivity and personality to the scene. I’m also considering adding a Day/Night mode toggle, so users can switch between a bright morning office and a cozy late-night work vibe. And to make it more accessible, I’d like to work on full mobile responsiveness, ensuring the scene adapts well to smaller screens without losing any of its charm.

Overall, I really enjoyed building this project - it was a fun blend of creativity and code, and I’m definitely looking forward to taking on more challenges like this in the future.✨

References and Resources:

Throughout this project, I often found myself stuck or unsure how to bring certain elements to life — and these amazing resources were my go-to guides:

This fantastic blog that kickstarted my entire CSS Art journey, laying the foundation for everything that followed.
This helpful site that was a great reference and helped me add depth and realism to my items using box-shadows.
This brilliant reference that rescued me when I was struggling with creating trapeziums for the chair and the laptop.
This creative blog that introduced me to the magic of cursor trails — an effect I now love.
This visually inspiring site that helped me choose the perfect background to tie the whole scene together.

Big thanks to these creators — their work made mine possible. 🌟

TL;DR: I decided to try my hand at CSS Art, and it turned out much better than I expected. 😁

Whether you liked this post or found a few bugs, I’d love to hear your thoughts - feel free to like and drop a comment!