How to Use Google AI Studio to Generate a Simple Personal Finance Web App

Many people want a basic tool to track their daily spending, but searching the app store often leads to frustration. Commercial apps are frequently cluttered with complicated features or interrupted by annoying ads. Recently, users on Reddit have shared that they solved this exact problem by building their own simple finance app for daily use using Google AI Studio. If you are a teacher looking for a practical classroom project, or a student who wants a distraction-free way to manage an allowance or part-time job income, you can do this too. You do not need prior coding experience. By writing clear instructions in plain English, you can prompt the AI to write the code for you and run it directly in your browser.

What you need

Before you begin, gather the following items:

• A free Google account to sign in.
• Access to a modern web browser like Chrome, Firefox, or Edge.
• An internet connection.
• A clear idea of what you want your finance app to do. For example, decide if you just want to log expenses, or if you also want to set a monthly budget and see a running total.

You do not need to install any software, configure a development environment, or know any programming languages. The entire process happens inside the browser.

How to use Google AI Studio

The official documentation, Quickstart: Get started with the Gemini API in AI Studio, outlines the foundational workflow for interacting with the platform. Building an app relies on this same sequence of selecting a model, entering prompts, and generating output. Follow these steps to create your finance tracker:

1. Sign in to the platform. Open your web browser and navigate to the official website. Sign in using your standard Google account credentials. According to the quickstart guide, signing in is the required first step to access the workspace and its models.
2. Select a model. Once you are in the interface, choose a model from the available options. The quickstart documentation notes that selecting a model is necessary before you can enter prompts and generate output. For generating a complete web application, select the most capable model currently offered in the dropdown menu.
3. Open a new chat or prompt window. Start a fresh conversation so the AI focuses entirely on your new project without getting confused by previous requests.
4. Write a detailed prompt. This is the most important step. Do not simply type "make me a finance app." Instead, describe exactly what you need in plain language. Specify that you want a single-file web app (using HTML, CSS, and JavaScript combined) so you can run it easily. List the specific features you want, such as an input field for the expense name, an input field for the amount, a button to add the expense, and a list that displays your recent transactions.
5. Generate the output. Submit your prompt. As described in the quickstart guide, the platform will process your text and generate output based on the selected model. Wait for the AI to finish writing the code.
6. Review and copy the code. The AI will provide a block of code. Look for a feature within the interface to preview the code or copy it to your clipboard. If the platform offers a direct preview pane, you can test the app right there.
7. Run the app locally. If you copied the code, open a basic text editor on your computer (like Notepad on Windows or TextEdit on Mac). Paste the code into a new file and save it with an .html extension, such as finance.html. Double-click that saved file to open it in your web browser. Your app is now running.
8. Iterate if needed. If the app is missing something—for instance, if you forgot to ask for a "clear all" button—go back to the chat in Google AI Studio. Type a follow-up prompt asking the AI to add that specific feature to the existing code, then replace your old code with the newly generated version.

Where this goes wrong

Even though you do not need to know how to code, you still need to know how to communicate clearly. Here are common pitfalls:

• Vague prompts: If you ask for a "budget app," the AI might build a complex corporate dashboard. Be specific about wanting a "simple personal expense tracker."
• Ignoring data storage: By default, a simple web app running in your browser will forget your expenses when you close the tab. You must explicitly ask the AI to "save my data using local storage" so your entries persist between sessions.
• Asking for backend servers: Without coding experience, setting up databases and servers is difficult. Keep your request limited to a front-end web app that runs entirely in the browser.
• Platform updates: Interface controls change. Always confirm current button names and menu paths in the official help documentation rather than relying on outdated screenshots.

For educators interested in evaluating how students interact with generative tools during projects like this, exploring frameworks such as the AI Literacy Index can help structure learning objectives around prompt engineering and critical evaluation.

Worked Example: A Teacher's Expense Tracker

A teacher could copy and paste the following prompt directly into the chat to generate a working app:

"Act as an expert web developer. Write the code for a simple personal finance web app contained in a single HTML file. I have no coding experience, so include the HTML, CSS, and JavaScript together in one file. The app needs three things: a text input for the item name, a number input for the cost, and an 'Add Expense' button. Below the inputs, display a list of my added expenses and show the total amount spent at the bottom. Please use the browser's local storage so my expenses are not deleted when I refresh the page. Style the page with clean, readable CSS so it looks good on a phone screen. Do not include any external libraries. Provide only the complete code."

When you submit this prompt to Google AI Studio, the model will return a single block of code. Saving that text as an .html file and opening it in your browser gives you a fully functional, ad-free personal finance tool built entirely through natural language instructions. This approach turns a frustrating search for the right app into a practical exercise in problem-solving.

Sources

• Reddit r/GeminiAI: amazing for me as i created Simple Finance app for daily use using Google ai studio
• Quickstart: Get started with the Gemini API in AI Studio