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! 🤗
Top comments (2)
Well done!
Thanks! 😊