Back to main page

Part 1: Build & Publish Your First Teaching App

0 of 15 complete
lesson

Build and refine in AI Studio

You already know this screen. The difference is that this time the prompt is yours.

Start a fresh conversation rather than continuing the one holding the app you built earlier — you want a clean build from your own specification, not a negotiation with an existing app.

Step by step

  1. Go back to aistudio.google.com/apps and start a new app
  2. Paste your build prompt — the one the AI wrote for you in the prompting 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

Compare it with the one we gave you

Before you refine anything, look at this first result beside the app you built at the start of Part 1. Both came out of one paste into the same tool. If this one is closer to something you would actually put in front of students, that difference is not the AI being in a better mood — it is the specification you just spent twenty minutes writing.

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

Earlier we told you to leave the AI chips alone — the buttons beside the input box that bolt AI capabilities onto your app, like image or text generation, without you having to describe them. Here is why.

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 wires up the connection to Gemini for you and covers the calls, so the cost is invisible — you never see a key at all. That is the part that misleads people. The moment the same app runs anywhere else, that arrangement does not come with it: the project expects a Gemini key of your own, you supply it during deployment, and every student request is billed to you. 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