Back to main page

Part 1: Build & Publish Your First Teaching App

0 of 13 complete
lesson

Publishing from AI Studio to GitHub

Once your app looks and behaves exactly how you want it to, it's time to save it permanently.

Remember, Google AI Studio is your workshop. To get your app onto the internet, we first need to move the code to GitHub.

What "syncing to GitHub" means here

When you sync your project, AI Studio takes all the files that make up your app — the code, the styling, everything — and sends them to GitHub. You do not need to download anything or move files around yourself. AI Studio does it for you in one click.

What is a repository?

A repository (often called a "repo") is just a project folder on GitHub. Think of it like a folder on Google Drive, but designed for software projects. Your repository will contain all the files for your app. You get to name it whatever you want.

A repository is not a program or a tool you install. It is simply a folder on the GitHub website that holds your project files. You can view it, share it, and come back to it whenever you want.

What happens when you connect AI Studio to GitHub

The first time you sync, AI Studio will ask permission to connect to your GitHub account. This is called authorization. You are telling GitHub: "It is okay for AI Studio to create project folders in my account." You only need to do this once.

After that, every time you sync, AI Studio creates or updates a repository with your latest files.

AI Studio
Sync
GitHub

Step 1: Finding the GitHub option

In Google AI Studio, look near the top of the screen for Publish (you may also see Share nearby). The GitHub option lives one click deeper.

  1. Click the small arrow beside Publish to open the menu.
  2. Choose Sync to GitHub.

Google moves these controls around from time to time. If the wording on your screen differs slightly, you are looking for anything that mentions GitHub — the menu behind the Publish button is where it lives.

Step 2: Connecting your GitHub account (first time only)

The first time you do this, AI Studio hands you over to GitHub to get your permission. The next few screens are GitHub's, not Google's, so they will look different. That is expected.

  1. A GitHub window opens. If you are not already signed in, sign in with the GitHub account you created earlier.
  2. GitHub shows a page headed something like Authorize Google AI Studio, listing what it is being allowed to do. Read it if you like, then click the green Authorize button.
  3. If GitHub asks which repositories to give access to, either option works. All repositories is simplest and is what most people choose.
  4. GitHub may ask you to confirm your password or a login code. This is a normal security check.
  5. The window closes on its own and returns you to AI Studio.

You only do this once. From then on, AI Studio and GitHub already know each other and syncing skips straight to the next step.

Step 3: Naming your repository

Back in AI Studio, you are asked for a few details about the folder GitHub is about to create.

  1. Give the repository a name — lowercase, with dashes instead of spaces, like accounting-quiz.
  2. If you are offered Public or Private, either is fine for this course. Private keeps the code visible only to you; Vercel can still read it once you connect the two.
  3. Confirm, and wait a few seconds for the files to arrive.

Check it worked: open github.com in a new tab and look at your repositories. The one you just named should be there, with a list of files inside it. If it is not, you may have authorized a different GitHub account than the one you are signed into — sign out of GitHub, sign back in with the right account, and sync again.

What just happened?

Google AI Studio just took all the code it wrote for you, created a new folder (repository) in your GitHub account, and saved all the files there. Your code is now safe and ready to be deployed.

The shortcut: publishing straight from AI Studio

The same Publish button can also host the app for you. Instead of syncing the code to GitHub, you can publish it in one step and get back a Google-issued web address ending in .ai.studio. No GitHub account, no Vercel account, no import step.

It is genuinely useful, and it is worth knowing about. It is also not what this course does, and the reason is worth two minutes of your time.

Publish from AI Studio when…

  • You want a link in the next 30 seconds.
  • You are showing a colleague a rough draft.
  • It is a one-off you will not maintain.

Use GitHub → Vercel when…

  • Students will use it for a whole term.
  • You want it on your own domain.
  • You want a copy of the code you control.

What you give up

  • The address is not yours. You get a Google-issued.ai.studioURL. The domain guide in this course walks you from a Vercel address to something like yourname.com — that path starts with GitHub and Vercel.
  • The code stays inside Google. Publishing to GitHub gives you your own copy, with a history of every change, that you can hand to any other tool or host later. That portability is the entire point of the middle step.
  • There are terms and limits attached. AI Studio hosting runs on Google's free starter tier, which comes with its own additional terms of service, including usage limits and Google's right to change or withdraw the tier. Read them before you put the link on a syllabus.

Our advice: try the one-click publish if you are curious — it costs you nothing and the link works. Then do the GitHub step anyway. Five extra minutes now is what lets you move the app, rename it, put it on your own domain, or bring it back into AI Studio a year from now.

Previous