Back to main page

Part 1: Build & Publish Your First Teaching App

0 of 13 complete
lesson

Build and refine in AI Studio

Now it is time to build. Paste your prompt into Google AI Studio and let it generate your app.

Step by step

  1. Open Google AI Studio's Build area at aistudio.google.com/apps
  2. Paste your build prompt (the one the AI wrote for you in the previous lesson) and press Enter
  3. Wait for the preview — AI Studio writes the code and shows your app running in the pane beside your conversation. If you are curious what it wrote, the Code tab in that same pane shows you.
  4. Review the preview — Does it make sense? Is something missing? Is the layout right?
  5. Refine with follow-up messages

Two things you will see next to the input box

  • AI chips let you bolt AI capabilities onto your app — image generation, text generation, and so on — without describing them in words. They are worth a look, but read the warning below first.
  • I'm Feeling Lucky generates a random app idea. A fun way to see what the tool can do, but skip it for now: you already have an idea worth building.

Before you add an AI feature: it is not free once it is live

There is a real difference between the two kinds of app you can build here.

  • An app that does not call AI — a quiz, a calculator, a sorting exercise, a flashcard drill. The AI wrote the code, but the finished app just runs that code in the browser. Nothing to pay for, nothing to set up. This is what most first builds should be.
  • An app that calls AI while your students use it — it generates feedback, marks written answers, produces images on demand. Every one of those requests goes to Google's Gemini service, and once your app is living outside AI Studio, those requests run on your account key and are billed to you.

While you are building inside AI Studio, Google covers the AI calls for you, so the cost is invisible. That changes the moment your app is on the internet: you supply the key, and you pay for the usage. Free allowances exist, but they are limited, they change, and a class of thirty students clicking a button can move through one quickly.

The rule for Part 1: unless your app genuinely needs AI while students are using it, do not add an AI chip and do not set up an API key. You do not need one.

Your first result will not be perfect, and that is completely normal. Type follow-up messages to make changes. Here are examples:

>"Make the heading say 'Cost Classification Sorter'"
>"Add a fourth case scenario"
>"Change the background to white"
>"Make the text larger and add more space between sections"
>"Make it look better on mobile"

You can go back and forth as many times as you want. Each round usually gets better.

!

If AI Studio changed something you did not ask for: Be specific about what to keep. Say: "Undo the change to the header, but keep everything else the same." The AI responds well to clear boundaries.

♥

Working beats perfect.

Get it working first, then refine. Your first version does not need to be beautiful. A working tool you can share with a link is a remarkable outcome.

Before you move on

Run through these six before you publish. Anything you answer "no" to is a follow-up message to AI Studio, not a reason to start again.

  1. 1Can someone use it without your explanation?
  2. 2Do all the buttons and interactions work?
  3. 3Is the educational feedback accurate?
  4. 4Can it reset or recover from a mistake?
  5. 5Is the text readable on a phone?
  6. 6Does it avoid collecting personal information?

The last one matters more than it looks. Your app does not need names, emails, or student numbers to teach anything, and the moment it collects them it becomes your institution's concern as well as yours. If AI Studio added a "enter your name to begin" screen you never asked for, take it out.

When you are ready

Keep iterating until the preview looks good enough to share. It does not need to be flawless — you can always come back and improve it later. Once you are satisfied, move on to publish it.
Previous