Appearance
Sharing AI Prototypes: A Production Pipeline
A prototype that others can open changes the conversation. People stop imagining your idea and start using it, and what they do tells you more than what they say. In this workshop, you move a prototype out of AI Studio and onto the web. You describe it in AI Studio, publish it to GitHub, and deploy it with Vercel, so anyone with the address can try it. There are many ways to make things with AI. This workshop uses one popular set of tools, and the pattern carries over to many others. The tools change quickly, so a button may look different when you read this, but the steps stay the same.
The pipeline has two halves:
- AI Studio → GitHub: AI Studio publishes your app's files to GitHub.
- GitHub → Vercel → the world: Vercel picks up those files and puts them online.
What You'll Do
- Create GitHub and Vercel accounts, if you don't have them yet.
- Publish an app from AI Studio to GitHub, and deploy it with Vercel.
- Change the app, and watch the change reach the live address.
- Share the address, and try someone else's app.
- Get an API key, so an app that uses AI works on Vercel too.
Before You Start
You'll need:
- A computer with a web browser and an internet connection.
- A Google account for AI Studio. Use a personal Google account if your school's account blocks the tool.
- A basic app in AI Studio, such as the one from Workshop 3's practice. Start with one that doesn't need an API key.
- Your agent from Workshop 3, for the second half, where you add an API key.
Workshop 3: AI as a Tool shows how to build an app in AI Studio. If you haven't made one yet, start there.
Two Ways Through
Both routes end in the same place.
- For a quick run-through, follow the TLDR. It's one page of short steps, with a check for each.
- For more explanation, follow the guides below, in order. Each one explains what's happening, how to check it worked, and what to do if it didn't.
| TLDR steps | Guide | What it covers |
|---|---|---|
| 1 | Creating Your Accounts | GitHub and Vercel accounts, and how they connect. |
| 2 | Publishing from AI Studio to GitHub | Your app's files in a new GitHub repository. |
| 3–4 | Deploying to Vercel | Your app online at its own address, open to anyone. |
| 5–6 | Changing and Sharing Your Prototype | Changes that reach the live address, and feedback from someone else. |
| 7 | Getting an API Key | A Gemini API key, on the free tier or with a prepaid balance. |
| 8 | Adding Your Key to Vercel | Your agent working on Vercel, and what to do when it works only in AI Studio. |
Then do the Practice before the next workshop.
Next
Workshop 5: The Prototyping Toolkit uses the same GitHub and Vercel steps, but swaps AI Studio for VS Code and a coding assistant. The project you publish here is the one you'll open there.
Examples
See prototypes made in this workshop on the Examples page.