Loading...
No results found.

Apply your skills in Google Cloud console

Prototype Applications in Google AI Studio

Lab 25 minutes universal_currency_alt No cost show_chart Introductory
info This lab may incorporate AI tools to support your learning.
This content is not yet optimized for mobile devices.
For the best experience, please visit us on a desktop computer using a link sent by email.

GSP1337

Google Cloud self-paced labs logo

Overview

In this lab, you will learn how to rapidly prototype applications in Google AI Studio. Explore pre-built AI applications, learn to create your own from templates, use and refine text prompts, and discover how to manage and share your creations. For this lab, you will take on the role of a Solutions Developer at a hackathon, where your goal is to quickly build and share several proof-of-concept AI applications under a time limit.

What you'll learn

In this lab, you learn how to:

  • Explore apps pre-built by Google.
  • Build an app using a template and modify it with the Code Assistant.
  • Build a data-driven app from a single text prompt.
  • Save, download, and view app prototypes.

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources are made available to you.

This hands-on lab lets you do the lab activities in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

  • Access to a standard internet browser (Chrome browser recommended).
Note: Use an Incognito (recommended) or private browser window to run this lab. This prevents conflicts between your personal account and the student account, which may cause extra charges incurred to your personal account.
  • Time to complete the lab—remember, once you start, you cannot pause a lab.
Note: Use only the student account for this lab. If you use a different Google Cloud account, you may incur charges to that account.

Open Google AI Studio

  1. Click Start Lab. The lab panel will display the temporary credentials for this lab.

    • Note: If this is a paid lab, you will be prompted to select a payment method.

  2. Open Google AI Studio in an Incognito window. The Google sign-in page will appear.

    • Tip: For easier access, arrange the lab and AI Studio tabs in separate, side-by-side windows.

  3. Copy the Username below and paste it into the Email field, then click Next.

    {{{user_0.username | "Username"}}}

  4. Copy the Password below and paste it into the Enter your password field, then click Next.

    {{{user_0.password | "Password"}}}

  5. Accept any on-screen terms and conditions to proceed.

You are now logged into Google AI Studio using your temporary student account.

Task 1. Explore a pre-built app

As a hackathon developer, your first step is to quickly survey the landscape to see what building blocks and examples are available. You'll start by exploring a pre-built chatbot app.

  1. In the left navigation menu, click Enable saving (above the Build option) and choose your username.

  2. Click Build.

  3. Click the Gallery > All apps tab and scroll through the gallery of pre-built application templates.

  4. Find the ChatterBots app and click on it.

Note: If you see the error message "Failed to store recent Application" it means you have not granted access to Google Drive. To resolve this, enable Drive access by navigating to the History section in the left sidebar. Click on Allow Drive access, which will open a new pop-up window. In the pop-up, select your student account (e.g., student-XX-YYYY@qwiklabs.net) and grant any necessary permissions to continue.

  1. Click on Allow to provide the request access to Microphone.

  2. The app will open in the IDE view. Take a moment to familiarize yourself with the interface: the Code assistant is on the left, the code editor/file viewer is in the center, and a live Preview of the running chatbot is on the right.

  3. Preview the app, explore the ChatterBot presets, and create your own ChatterBot based on the characteristics you define.

  4. Explore the code that was generated. In the code editor, click the Show file tree view button to see the code structure. Click on a file like App.tsx to view the main application code, or a file within the components folder to see how a specific UI element is built.

Chatter bots application code

Explore a pre-built app

Task 2. Generate an app prototype from a template and modify it

Next, you've decided a simple flashcard utility would be useful for your hackathon project. You'll generate one from a template and then use the Code Assistant to quickly change its appearance to match your project's branding.

Generate the app

  1. Click Back to start and return to the home page by clicking the Google AI Studio logo in the top-left corner.

  2. In the left navigation menu, click Build > Start.

  3. Find and click the Flash UI template to generate the application.

Modify the app with the Code assistant

  1. In the Preview pane on the right, interact with the default flashcards to see how they function.

  2. Type Large Language Models into the input field and click the arrow to generate a topic-specific set.

  3. Now, direct your attention to the Code assistant input field at the bottom left. Type the following command to change the app's style and logic:

Change the background color of the flashcards to a light green and change the logic of the flashcards so that only one can be turned over at a time.
  1. Click Send prompt. Observe as the assistant modifies the application code in the editor.
Note: If you see the "Remix" button, click it and then click "Apply" and acknowledge.

  1. Once the code is updated, test both changes in the Preview pane. Confirm the flashcards are light green and that you can only flip over one card at a time.

  2. Next, you'll add another feature. In the Code assistant input field, type the following new command:

Create an "add 5 more" button to generate 5 more flashcards, ensuring no duplicates.

  1. Click Send prompt and watch as the assistant adds a new button to the UI and modifies the code to include the new logic.

  2. Finally, test the new feature in the Preview pane. Click the new Surprise Me > add 5 more button and confirm that five additional, unique flashcards are added to your set.

  3. Click the pencil icon beside the App Name Flash UI, rename the application to Flashcard Maker, leave the description as its default, and click Save.

Click Check my progress to verify the objective.

Generate an app prototype from a template and modify it

Task 3. Build an app using a text prompt

Now for the main event of the hackathon: building your core feature from scratch. You'll build a travel itinerary planner by describing it in plain English. You'll specifically ask the model to create a UI that can display structured data cleanly.

  1. Navigate back to the Build page gallery.

  2. In the main text prompt bar at the top of the page, enter the following detailed request:

Create an app that generates a 3-day travel itinerary for a city. The app should have an input field for the city name. The output should be a structured plan with days, times, and activities, displayed in a clean format.

  1. Click Build and wait for the Code assistant to generate the complete application.

  2. Once the app appears, test its functionality in the Preview pane. In the city input field, type Rome and press ENTER.

  3. Observe the output. The app should display a structured 3-day itinerary for Rome, demonstrating that the AI successfully created a data-driven UI from your text prompt.

  4. Click the pencil icon at the top of the panel beside the App name, rename the application to AI Travel Itinerary Generator, leave the description as its default, and click Save.

  5. (Optional) Use the Code assistant to modify any parts of the application you can think of!

Click Check my progress to verify the objective.

Build an app using a text prompt

Task 4. Save, download, and view your apps

Your prototype for the travel planner is working! The final step in the hackathon is to download your progress and share the project with your team.

Your app is now saved to the "Your apps" section of the Build page.

  1. Click the Download icon from the same toolbar. A ZIP file containing the complete source code for your application will be downloaded to your computer.

    • Note: You could use this code to continue development locally in your own editor.

  2. Explore the path to making your app live. Click the Deploy App button from the same toolbar.

    • Note: We will not complete the full deployment process in this lab, but this step shows you the integrated path to publishing your application on Google Cloud.

View your application prototypes

  1. Navigate to home page and click the Google AI Studio logo in the top-left corner.

  2. In the left navigation menu, click Build.

  3. Click the Your apps > Created by you tab to view the prototypes you've modified and built. You should see the two applications: Flashcard Maker and AI Travel Itinerary Generator.

Application prototypes view

Congratulations!

Congratulations! You've successfully used Google AI Studio to rapidly explore, adapt, and create functional application prototypes from scratch. You learned how to leverage pre-built templates, modify code with natural language, and generate a complete data-driven application from a single text prompt. You are now well-equipped to bring your own AI-powered ideas to life.

Google Cloud training and certification

...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

Manual Last Updated March 12, 2026

Lab Last Tested March 12, 2026

Copyright 2026 Google LLC. All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.

Before you begin

  1. Labs create a Google Cloud project and resources for a fixed time
  2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
  3. On the top left of your screen, click Start lab to begin

Use private browsing

  1. Copy the provided Username and Password for the lab
  2. Click Open console in private mode

Sign in to the Console

  1. Sign in using your lab credentials. Using other credentials might cause errors or incur charges.
  2. Accept the terms, and skip the recovery resource page
  3. Don't click End lab unless you've finished the lab or want to restart it, as it will clear your work and remove the project

This content is not currently available

We will notify you via email when it becomes available

Great!

We will contact you via email if it becomes available

One lab at a time

Confirm to end all existing labs and start this one

Use private browsing to run the lab

Using an Incognito or private browser window is the best way to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.