GSP1337

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 Build.

2. The Showcase tab displays a gallery of pre-built application templates. Scroll through to view the available options.

3. 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.

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

5. 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.

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

7. 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.

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 the Google AI Studio logo in the top-left corner to return to the home page.

2. In the left navigation menu, click Build.

3. Find and click on the Flashcard Maker 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 Generate Flashcards 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.

4. Press Enter. Observe as the assistant modifies the application code in the editor.

5. 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.

6. 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.

7. Press Enter and watch as the assistant adds a new button to the UI and modifies the code to include the new logic.

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

9. Click the Save icon on the top right of the toolbar. Name the application Flashcard Maker 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.

3. Press Enter and wait for the Code assistant to generate the complete application.

4. Once the app appears, test its functionality in the Preview pane. In the city input field, type Rome and click the app's Generate button.

5. 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.

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

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 save your progress and share the project with your team.

1. Click the Save icon on the top right of the toolbar.

Note: if the button is greyed out, click the settings icon next on the top right of the screen (next to your account profile photo), and check if the Autosave feature is on. If it is, no further action is required to save the app.

2. When prompted, enter AI Travel Itinerary Generator as the name and click Save. Your app is now saved to the "Your apps" section of the Build page.

3. Next, 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.

4. Finally, explore the path to making your app live. Click the Deploy to Cloud Run button.

   • 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. Click the Google AI Studio logo in the top-left corner to return to the home page.

2. In the left navigation menu, click Build.

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

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 June 23, 2025

Lab Last Tested June 23, 2025

Copyright 2025 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.