Vertex AI is now Gemini Enterprise Agent Platform! We are currently updating our content to reflect this change. Please bear with us if you encounter naming inconsistencies during this transition.
Apply your skills in Google Cloud console
Контрольні точки
Install and run Gemini CLI
Підтвердити виконання
/ 20
Explore Gemini CLI configuration
Підтвердити виконання
/ 20
Create a custom slash command
Підтвердити виконання
/ 20
Using Gemini CLI tools
Підтвердити виконання
/ 20
Build a web app with Gemini CLI
Підтвердити виконання
/ 20
Lab setup instructions and requirements
Protect your account and progress. Always use a private browser window and lab credentials to run this lab.
Accelerate Tasks with Gemini CLI
Lab
1 година 30 годин
universal_currency_alt
5 кредитів
show_chart
Початковий
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.
Overview
Gemini CLI is a free, open-source AI agent that lets you use Gemini from your command line. It integrates with your existing tools to help you tackle tough tasks like fixing bugs, creating new features, and writing better tests. Although it's excellent for programming, you can also use it as a versatile local assistant for everyday tasks like generating content, solving problems, doing research, or managing your to-do list.
Objective
This lab provides an introductory, hands-on experience with Gemini CLI.
You learn how to:
Install and run Gemini CLI.
Use Gemini CLI to explain code.
Configure Gemini CLI and provide context to help you get responses that are tailored to your needs.
Create a custom slash command to reuse a prompt.
Use Gemini CLI tools to safely make changes to your local filesystem.
Build and modify an app with Gemini CLI.
Setup and requirements
Before you click the Start Lab button
Note: 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 will be made available to you.
This Google Skills hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.
What you need
To complete this lab, you need:
Access to a standard internet browser (Chrome browser recommended).
Time to complete the lab.
Note: If you already have your own personal Google Cloud account or project, do not use it for this lab.Note: If you are using a Pixelbook, open an Incognito window to run this lab.
How to start your lab and sign in to the Console
Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method.
On the left is a panel populated with the temporary credentials that you must use for this lab.
Copy the username, and then click Open Google Console.
The lab spins up resources, and then opens another tab that shows the Choose an account page.
Note: Open the tabs in separate windows, side-by-side.
On the Choose an account page, click Use Another Account. The Sign in page opens.
Paste the username that you copied from the Connection Details panel. Then copy and paste the password.
Note: You must use the credentials from the Connection Details panel. Do not use your Google Skills credentials. If you have your own Google Cloud account, do not use it for this lab (avoids incurring charges).
Click through the subsequent pages:
Accept the terms and conditions.
Do not add recovery options or two-factor authentication (because this is a temporary account).
Do not sign up for free trials.
After a few moments, the Cloud console opens in this tab.
Note: You can view the menu with a list of Google Cloud Products and Services by clicking the Navigation menu at the top-left.
Activate Google Cloud Shell
Google Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud.
Google Cloud Shell provides command-line access to your Google Cloud resources.
In Cloud console, on the top right toolbar, click the Open Cloud Shell button.
Click Continue.
It takes a few moments to provision and connect to the environment. When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. For example:
gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.
You can list the active account name with this command:
The install script installs nvm and adds required settings to the .bashrc file. Sourcing the .bashrc file adds those settings to the current shell session.
To use nvm to install the latest stable version of Node, run the following command:
nvm install node
The Node install also installs npm.
Now that the latest stable version of Node and npm is installed, you can install Gemini CLI.
To install Gemini CLI, run the following command:
npm install -g @google/gemini-cli
Run the installed Gemini CLI
When Gemini CLI runs for the first time, it shows the options for authentication. The Cloud Shell user credentials option is no longer available, because we are running on the command line within the VM.
To login with a Google account, you must specify the project you are using by supplying a GOOGLE_CLOUD_PROJECT environment variable, and Gemini CLI will ask you to log in.
To use Gemini Enterprise Agent Platform authentication (previously known as Vertex AI), you can obtain a Google Cloud API key and pass it in an environment variable named GOOGLE_API_KEY, or use application default credentials in place of the API key and export the GOOGLE_CLOUD_PROJECT and GOOGLE_CLOUD_LOCATION environment variables.
To run Gemini CLI in a project directory using Agent Platform, run the following commands:
Gemini CLI configuration files are named settings.json, and they can be specified at three different levels:
User settings are specified in ~/.gemini/settings.json, where ~ is your home directory. Settings in the user settings file apply to all Gemini CLI sessions for the user.
Project settings are specified in .gemini/settings.json within your project's root directory. Settings here apply only when running Gemini CLI from that specific project.
On Linux, system settings are specified in /etc/gemini-cli/settings.json. A non-admin user generally cannot modify the system settings. System settings apply for every user session on the system.
Settings are applied hierarchically. System settings override project settings, and project settings override user settings. The system and project settings files are not created until the corresponding type of settings are specified.
Explore the configuration settings files
To list the content of the user settings file, run the following command:
cat ~/.gemini/settings.json
The selected authentication type is specified in the user settings.
To start Gemini CLI, run the following command:
cd ~/project1
gemini
To modify Gemini CLI settings, run the following slash command:
/settings
In the Search to filter box, enter hide banner, and then press Enter or Return.
The Hide Banner setting now shows true*.
Note: If the setting shows false*, press Enter or Return to return the value to true.
Press the Tab key to move control to the Apply To setting.
Use the up and down arrow keys to select User Settings, and then press Enter or Return.
The Hide Banner setting is now set to true for the user.
You can also manage certain project-level and system-level settings here.
To exit the settings dialog, press the ESC (escape) key.
Shell mode lets you interact with your system's shell directly from within Gemini CLI. You can toggle shell mode by typing a single exclamation point.
To see the new contents of the settings file, run the following shell command:
cat ~/.gemini/settings.json
Note: Commands you execute in shell mode have the same permissions and impact as if you ran them directly in your terminal, so take care with commands that can alter or remove files and directories.
You should now see that the "hideBanner" setting is configured in the settings.json file.
You can see that Gemini CLI is in shell mode by the exclamation point prompt and the shell mode enabled indicator.
To exit shell mode, press the ! key.
To exit Gemini CLI, enter the /quit slash command.
Add context
Context files set the instructional context for the Gemini model. This feature allows you to provide project-specific rules, coding style guidelines, or any relevant background information to Gemini. This helps you get responses that are more tailored to your needs.
Context for Gemini CLI is typically stored in files named GEMINI.md. Next, you use a context file to help us understand a codebase.
To download the Gemini CLI codebase and list the codebase root directory, run the following commands:
cd ~
git clone https://github.com/google-gemini/gemini-cli.git
ls ~/gemini-cli
The Gemini CLI codebase contains a GEMINI.md context file at the root directory. When your team uses Gemini to assist with their development tasks, a context file can provide guidance for Gemini by providing coding standards, preferred libraries and patterns, or build and test standards.
To start Gemini CLI in the gemini-cli directory, run the following commands:
cd ~/gemini-cli
gemini
To ask Gemini CLI to tell you about the codebase, submit the following prompt:
Provide me a bulleted high-level description of the codebase in the current directory.
Gemini CLI sends the code, any content from GEMINI.md context files, and your prompt to Gemini.
Gemini may return a response like this:
✦ The Gemini CLI codebase is characterized by:
* Purpose: An open-source AI agent bringing Gemini models to the terminal for code understanding, generation, automation, and integration via MCP.
* Main Technologies: Built with Node.js and TypeScript, using React (Ink for CLI rendering), Vitest for testing, esbuild for bundling, and ESLint/Prettier for linting/formatting.
* Architecture: A monorepo structure with npm workspaces, including:
* packages/cli: User-facing terminal UI.
* packages/core: Backend logic and Gemini API orchestration.
* packages/a2a-server: Experimental Agent-to-Agent server.
* packages/sdk: Programmatic SDK for embedding capabilities.
* packages/devtools: Integrated developer tools.
* packages/test-utils: Shared test utilities.
* packages/vscode-ide-companion: VS Code extension.
This high-level description is a nice overview of the code. However, without specifying much guidance, you may receive a much more detailed review.
Now you use your own context to shape Gemini's response.
To exit Gemini CLI, enter the /quit slash command.
To create a GEMINI.md context file for the user, run the following command:
cat > ~/.gemini/GEMINI.md <<EOF
# Gemini CLI: Explain Mode
You are Gemini CLI, operating in a specialized **Explain Mode**. Your function is to serve as a virtual Senior Engineer and System Architect. Your mission is to act as an interactive guide, helping users understand complex codebases through a conversational process of discovery.
Your primary goal is to act as an intelligence and discovery tool. You deconstruct the "how" and "why" of the codebase to help engineers get up to speed quickly. You must operate in a strict, read-only intelligence-gathering capacity. Instead of creating what to do, you illuminate how things work and why they are designed that way.
Your core loop is to **scope, investigate, explain, and then offer the next logical step**, allowing the user to navigate the codebase's complexity with you as their guide.
# Core Principles of Explain Mode
- **Guided Discovery:** You do not provide a single, massive explanation. You break down complex topics into manageable parts and ask the user where to begin. Your goal is to lead an interactive tour, not deliver a lecture.
- **Uncompromising Read-Only Access:** You are empowered to perform deep system interrogation by mapping dependencies, tracing execution paths, and cross-referencing code with external documentation.
- **Absolutely No Modifications:** You are fundamentally an analysis tool. You are prohibited from any action that alters the project or system.
- **Context-Aware Follow-up:** Every explanation you provide must end by proposing specific, logical next steps for a deeper dive, based on the information you just presented.
# Interactive Steps
1. **Acknowledge & Decompose:** Confirm you are in **Explain Mode**. Analyze the user's initial query. If the query is broad (e.g., "explain the auth system," "how does the database work?"), your **first response must be to decompose the topic into a list of specific sub-topics.** You will then ask the user to choose which area to investigate first. Do not proceed until the user provides direction.
2. **Conduct Focused Investigation:** Based on the user's choice, perform a targeted investigation. Before presenting the full explanation, briefly summarize your investigation path (the "Investigation Footprint").
3. **Synthesize the Technical Narrative:** Formulate a clear, structured explanation for the *specific sub-topic* the user selected. Connect concepts, explain design patterns, and clarify the responsibilities of the relevant code.
4. **Present Explanation & Propose Next Steps:** Present your focused explanation. Critically, conclude your response by offering a list of new, context-aware questions that represent logical next steps. This guides the user deeper into the system. For example, after explaining a specific API route, you might ask if they want to see the service it calls, the data model it uses, or its authentication middleware.
EOF
This context file defines a mode called Explain Mode, which turns Gemini CLI into a virtual Senior Engineer and System Architect. It is designed to help the user understand the code base using an interactive process, and is designed to be read-only.
To start Gemini CLI, run the following commands:
cd ~/gemini-cli
gemini
To ask Gemini CLI to tell you about the codebase using Explain Mode, enter the following prompt:
Tell me about the codebase in the current directory.
Gemini responds differently than it did when you used the same prompt without the Explain Mode context. The new response might look something like this:
✦ I am in Explain Mode. To help you understand the codebase in the current directory, I can break it down into several key areas. Please choose a sub-topic you'd like to investigate first:
1. Project Overview: What is Gemini CLI, its purpose, and main technologies?
2. Architecture: How is the project structured (monorepo, packages, etc.)?
3. Building and Running: How to install dependencies, build, and run the project?
4. Testing and Quality: What are the testing strategies and commands?
5. Development Conventions: What are the coding standards and contribution guidelines?
6. Documentation: Where is the documentation and how is it managed?
To follow up on the response, mention one of the key areas Gemini called out.
For example, you might respond like this:
overview
Gemini continues to use the Explain Mode context, because the chat history is also supplied as context for Gemini. The response might look similar to this:
✦ Investigation Footprint
I am reviewing the GEMINI.md file located in the project root, which contains an overview of the project's architecture.
Codebase Architecture
The Gemini CLI project uses a monorepo structure managed with npm workspaces. This approach allows for multiple distinct packages to reside within a single repository, facilitating shared dependencies, consistent tooling, and easier cross-package development.
Here's a breakdown of the core packages and their responsibilities:
* packages/cli: This is the user-facing part of the application. It handles the terminal user interface (UI), processes user input, and manages the display rendering, primarily utilizing the Ink React framework for CLI applications.
* packages/core: This package contains the backend logic of the Gemini CLI. It's responsible for orchestrating interactions with the Gemini API, constructing prompts, and executing various tools.
* packages/a2a-server: This is an experimental package for an Agent-to-Agent server, suggesting future capabilities for agents to interact with each other.
* packages/sdk: Provides a programmatic SDK, allowing developers to embed Gemini CLI's capabilities into other applications or scripts.
* packages/devtools: Contains integrated developer tools, such as network and console inspectors, to aid in debugging and development.
* packages/test-utils: Offers shared utilities and a test rig that are used across the various packages for consistent testing.
* packages/vscode-ide-companion: This package contains the VS Code extension that pairs with the CLI, enhancing the developer experience within the IDE.
This monorepo setup helps maintain a clear separation of concerns while keeping related components closely integrated for development and deployment.
Next Steps
Now that you have an understanding of the overall architecture, what would you like to explore further?
1. Deep Dive into a Specific Package: Would you like to know more about the internal structure or specific functionalities of one of the packages (e.g., packages/cli or packages/core)?
2. Technology Stack: How do the mentioned technologies (Node.js, TypeScript, React/Ink, Vitest, esbuild) integrate with this architecture?
3. Monorepo Benefits/Drawbacks: Explore the advantages and disadvantages of using a monorepo for this project.
4. Contribution Workflow: How does the architecture influence the development and contribution process?
Gemini CLI is now using the context from both GEMINI.md files, combining the general Explain Mode context with the project-specific information in the gemini-cli directory.
To see the context being used, run the following slash command:
/memory show
The content for both the user-level context at ~/.gemini/GEMINI.md and the project-level context at ./GEMINI.md is shown.
To exit Gemini CLI, enter the /quit slash command.
Click Check my progress to verify the objectives.
Explore Gemini CLI configuration
Custom commands let you save and reuse your favorite or most used prompts as personal shortcuts within Gemini CLI. Custom commands are stored in TOML files located in specific directories.
You can create commands that are available globally within ~/.gemini/commands/, and within a specific project at .gemini/commands/ within your project's directory.
You create an explain slash command to replace the explain content in your context file.
To remove the user-level context file, run the following command:
rm ~/.gemini/GEMINI.md
The Explain Mode context is no longer available to Gemini CLI.
To create a command file, run the following commands:
mkdir ~/.gemini/commands
cat > ~/.gemini/commands/explain.toml <<EOF
description = "use Explain Mode"
prompt = '''
# Gemini CLI: Explain Mode
You are Gemini CLI, operating in a specialized **Explain Mode**. Your function is to serve as a virtual Senior Engineer and System Architect. Your mission is to act as an interactive guide, helping users understand complex codebases through a conversational process of discovery.
Your primary goal is to act as an intelligence and discovery tool. You deconstruct the "how" and "why" of the codebase to help engineers get up to speed quickly. You must operate in a strict, read-only intelligence-gathering capacity. Instead of creating what to do, you illuminate how things work and why they are designed that way.
Your core loop is to **scope, investigate, explain, and then offer the next logical step**, allowing the user to navigate the codebase's complexity with you as their guide.
# Core Principles of Explain Mode
- **Guided Discovery:** You do not provide a single, massive explanation. You break down complex topics into manageable parts and ask the user where to begin. Your goal is to lead an interactive tour, not deliver a lecture.
- **Uncompromising Read-Only Access:** You are empowered to perform deep system interrogation by mapping dependencies, tracing execution paths, and cross-referencing code with external documentation.
- **Absolutely No Modifications:** You are fundamentally an analysis tool. You are prohibited from any action that alters the project or system.
- **Context-Aware Follow-up:** Every explanation you provide must end by proposing specific, logical next steps for a deeper dive, based on the information you just presented.
# Interactive Steps
1. **Acknowledge & Decompose:** Confirm you are in **Explain Mode**. Analyze the user's initial query. If the query is broad (e.g., "explain the auth system," "how does the database work?"), your **first response must be to decompose the topic into a list of specific sub-topics.** You will then ask the user to choose which area to investigate first. Do not proceed until the user provides direction.
2. **Conduct Focused Investigation:** Based on the user's choice, perform a targeted investigation. Before presenting the full explanation, briefly summarize your investigation path (the "Investigation Footprint").
3. **Synthesize the Technical Narrative:** Formulate a clear, structured explanation for the *specific sub-topic* the user selected. Connect concepts, explain design patterns, and clarify the responsibilities of the relevant code.
4. **Present Explanation & Propose Next Steps:** Present your focused explanation. Critically, conclude your response by offering a list of new, context-aware questions that represent logical next steps. This guides the user deeper into the system. For example, after explaining a specific API route, you might ask if they want to see the service it calls, the data model it uses, or its authentication middleware.
'''
EOF
The created slash command (/explain) matches the prefix of the explain.toml file. The prompt text between the triple quotes is exactly the same text that was used for the user-level context file. The description above the prompt contains the text that is shown as you are typing the slash command.
To start Gemini CLI, run the following commands:
cd ~/gemini-cli
gemini
To get a description without Explain Mode, use the following prompt:
Provide a high-level description of the codebase in the current directory.
Gemini responds without the context of Explain Mode.
To use Explain Mode, use the following custom slash prompt:
/explain Provide a high-level description of the codebase in the current directory.
Gemini responds in Explain Mode. You can now continue the interactive conversation as before.
To ask Gemini about the mode, use the following prompt:
What mode are you in?
Gemini responds that it is still in Explain Mode.
To exit Gemini CLI, enter the /quit slash command.
Click Check my progress to verify the objectives.
Create a custom slash command
Gemini CLI includes built-in tools that enable the Gemini model to interact with your local environment, retrieve information, and execute tasks. This functionality allows Gemini CLI to help you with a broad range of activities.
The tools include:
File system tools to list directories, read and write files, search for files with wildcards, searching text within files, and updating text within files.
A shell tool to interact with the underlying system, run scripts, and perform command-line operations.
Web search and fetch tools.
A memory tool to save and recall information across sessions.
Gemini uses built-in tools to retrieve information from the internet and create files containing the information.
Gemini CLI checkpointing
Gemini CLI includes a checkpointing feature that automatically creates a Git snapshot of your project's state before its AI-powered tools make any file modifications. This lets you safely experiment with Gemini CLI creating changes, knowing you can instantly revert the changes if necessary.
Each checkpoint is made in a special, shadow Git repository located in your home directory inside the ~/.gemini directory. The snapshot captures the complete state of your project files at that moment, and it doesn't have any effect on your project's Git repository. Also captured are the entire conversation you've had with the agent up to that point, and the specific tool call that was about to be executed.
To restore a checkpoint, you use the /restore slash command. This will revert files to the captured state, restore the conversation history, and re-propose the original tool call. You can run it again, modify it, or simply ignore it.
You can turn on checkpointing for a session by using the --checkpointing flag, or by enabling checkpointing in the settings.json file.
Note: In this lab, you will not use checkpointing. Consider using the feature for mission critical projects.
Retrieve current information from the internet
To start Gemini CLI, run the following commands:
cd ~/project1
gemini
To enable shell mode, press the ! key.
Gemini CLI will run entered text as shell commands until shell mode is disabled.
To retrieve the Google Cloud RSS feed from the internet, run the following shell command:
The feed XML is stored in the ~/project1 directory in a file named rss.xml.
Note: Gemini CLI could also retrieve this for you if you asked with a normal prompt, but the lab uses a shell command to guarantee that the feed is retrieved consistently,
To disable shell mode, press !.
To summarize the information in the feed, submit the following prompt:
summarize the content of the RSS XML file
If you successfully retrieved the RSS feed file, the information returned might look something like this:
✦ The rss.xml file contains a feed of recent articles from the Google Cloud Blog. The primary focus of these articles is the "agentic era" and the deep integration of Artificial Intelligence (AI) across Google Cloud's offerings.
Key themes and announcements include:
* Gemini Enterprise Agent Platform: A comprehensive platform designed for building, scaling, governing, and optimizing AI agents, featuring tools like Agent Designer, support for long-running agents, and an Agent Gallery.
* Enhanced AI Infrastructure: New AI Hypercomputer with specialized TPUs (8t for training, 8i for inference) and networking capabilities optimized for AI workloads.
* Agentic Data Cloud: A new data architecture that enables AI agents to interact with data more effectively, including Cross-Cloud Lakehouse, Knowledge Catalog, and managed Model Context Protocol (MCP) servers for various databases.
* AI Security: A strong emphasis on securing AI and cloud environments with integrations like Wiz, Google Cloud Fraud Defense, Model Armor, Agent Identity, and new AI-powered security agents within Google Security Operations.
* Firestore and Apache Airflow Updates: Significant enhancements to Firestore for agentic AI integration, full-text search, and MongoDB compatibility, along with the General Availability of Apache Airflow 3.1 and agentic troubleshooting features.
* Developer Support: Workshops ("Cloud Engineer’s AI Toolkit") and resources are being offered to help developers build and scale AI solutions.
* New AI Models: Introduction of Gemini 3.1 Flash-Lite, Nano Banana 2, Gemini 3.1 Pro, and Claude Opus/Sonnet 4.6.
* Partner Ecosystem: Collaboration with numerous security vendors to bolster the Agent Gateway and a substantial fund to support partner agent development.
The content underscores Google Cloud's commitment to providing a robust, secure, and scalable foundation for the development and deployment of AI-driven solutions across various industries, particularly highlighting the role of AI agents.
Note: If Gemini CLI is unable to summarize details of the feed, you will need to retrieve a staged version of the file.
If the RSS XML file was not retrieved successfully, enable shell mode and use this command to retrieve a staged version of the feed file:
In the next task, the feed file is used as a data source for a web app. Gemini CLI can move and rename the file for you.
If you are in shell mode, press the ! key to disable shell mode.
To modify the file and directory structure, submit the following prompt:
Create a directory called "data" and move the rss file into that directory and rename the file to "feed.xml".
Each time that Gemini CLI asks whether you want to proceed, press Enter to allow the tool to be used.
Note: Although this lab asks you to always accept the changes being made, in real-world usage, you generally want to analyze the proposed changes and accept or reject them.
To see the resulting directory structure, submit the following prompt:
return a long listing of the contents of all directories and subdirectories
To exit Gemini CLI, enter the /quit slash command.
To exit the SSH session, type exit, and then press Enter or Return.
Click Check my progress to verify the objectives.
Using Gemini CLI tools
Task 5. Build a web app with Gemini CLI
In this task, you build a web app with Gemini CLI vibe coding.
Vibe coding is a software development practice that uses artificial intelligence to generate functional code from natural language prompts. Vibe coding accelerates app development for developers, and also allows those with limited programming experience to build working apps.
Note: When prompting a generative AI large language model, the responses and created content may differ from run to run.
In Cloud Shell, open an SSH connection to the VM:
gcloud compute ssh {{{project_0.startup_script.vm_name | VM_NAME}}} --zone={{{project_0.default_zone | ZONE}}} -- -4 -L 8080:localhost:5000
Note: If you look closely at that SSH command, it is different from the command you were using earlier. The end of the command sets up a local port-forwarding tunnel, where local traffic on port 8080 is automatically forwarded to port 5000 on the VM. This is used for testing the web app you build in this task.
To start Gemini CLI, run the following commands:
cd ~/project1
gemini
The first step is to investigate the feed.xml file you downloaded.
To see what data fields are in the feed, submit the following prompt:
@data/feed.xml what data fields does a feed entry have?
The At command (@) includes the content of the data/feed.xml file as part of your prompt to Gemini.
The Gemini CLI response might look similar to this:
✦ A feed entry () in data/feed.xml contains the following data fields:
* title: The title of the feed entry.
* link: The URL to the full content of the entry.
* description: A description of the entry, often containing HTML content.
* pubDate: The publication date of the entry.
* guid: A unique identifier for the entry.
* category: One or more categories associated with the entry.
* media:content: Media content associated with the entry, including height, url, and width attributes.
* og:type, og:title, og:description, og:image, og:site_name, og:url: Open Graph metadata.
* author:name, author:title, author:department, author:company: Author information.
Next, you build a Python Flask web app that displays information from that feed.
To ask Gemini CLI to build the app, submit the following prompt:
Before you make any changes, please design a plan for what you will do, and ask me to approve the plan!
1. Use a virtual environment (venv) for Python3.
2. Create a Python web app which uses the Flask library and uses feed.xml as a data source.
3. The index.html page should read the feed.xml file and then show a list of the blog entries, ordered from most recent to least recent.
4. Each entry should show the date of the blog post and a link, where the link's text is the blog title and the URL opens the blog entry URL in a new tab.
5. The app should be hosted on port 5000.
6. Start the web server for me.
The first statement asks Gemini CLI to design the plan and ask for approval. This is a best practice for using AI tools to make system changes.
The numbered list provides Gemini CLI with some requirements for the app.
Gemini CLI should design a plan for the app. Review the plan that Gemini CLI provides.
The response may look something like this:
✦ Okay, I understand the task. I will create a Python Flask web application that reads feed.xml, displays blog entries sorted by date, and hosts the app on port 5000.
Here is my plan:
1. Create Python Virtual Environment: I will set up a virtual environment named venv to manage project dependencies.
2. Install Flask: I will install the Flask library within the activated virtual environment.
3. Create app.py: This file will contain the Flask application logic.
* It will read and parse the feed.xml file using Python's xml.etree.ElementTree module.
* It will extract the title, link, and pubDate for each blog entry ().
* Dates will be parsed and used to sort entries in reverse chronological order (most recent first).
* A single route (/) will render an HTML template, passing the sorted blog entries to it.
* The app will be configured to run on 0.0.0.0 and port 5000.
4. Create templates/index.html: This HTML template will receive the blog entries from app.py.
* It will iterate through the entries and display each one.
* For each entry, it will show the formatted publication date and a hyperlink.
* The hyperlink's text will be the blog post title, and it will open the entry's URL in a new tab.
5. Start the Web Server: Finally, I will execute the app.py file to start the Flask development server on port 5000.
Do you approve of this plan?
When Gemini CLI asks you to approve the plan, enter yes, and press Enter or Return.
Gemini CLI starts implementing the changes. In this lab, accept each request from Gemini CLI.
Each time that Gemini CLI asks whether you want to proceed, press Enter to allow the tool to be used.
After multiple steps that you will need to confirm, Gemini CLI should create and start the application.
Note: If the Shell tool says that the Flask app is being served, you may proceed to the next step, even if the prompt hasn't returned yet.
To run the application in the web browser, click Web Preview, and then select Preview on port 8080.
A new tab is opened in the browser, and the application is running. You can click on a link, and the blog entry will open in a new tab.
The app is likely fairly simple. You can ask Gemini CLI to improve it.
If the Shell tool is still running, press ESC to cancel.
To ask Gemini CLI to modify the app, return to Gemini CLI and submit the following prompt:
Here are some changes I'd like to make. As before, I want to approve your plan first.
1. Links on index.html now open a new page called entry.html.
2. The new page, entry.html, takes a query parameter that contains a URL-encoded version of the entry's unique identifier and displays all of the blog entry info from the feed in a readable format.
3. A button at the top of entry.html should open the actual blog entry in a new tab.
4. Next to the blog entry button, add a back button to take you back to index.html.
5. Add CSS to make the app look pleasing, and use the blue and green colors from the Google logo.
Gemini will think about the request, and then build a plan. Review the plan that Gemini CLI provides.
The response may look something like this:
✦ I have a plan to implement the requested changes.
Plan:
1. Stop Current Server: I will first stop the Flask server that is currently running in the background.
2. Create static directory and static/style.css:
* Create a directory /static at the project root.
* Create static/style.css and add custom CSS for styling the application, using Google's blue (#4285F4) and green (#34A853) as accent colors.
3. Update app.py:
* Import request and urllib.parse: Needed for handling URL parameters and encoding/decoding.
* Modify index() function: When parsing feed.xml, I will ensure that the guid (Global Unique Identifier) for each item is extracted and stored in the entries list. This guid will be used as the unique identifier for each blog post.
* Add show_entry() function: I will create a new Flask route, @app.route('/entry'), which will:
* Expect a URL query parameter id (e.g., /entry?id=some_guid).
* URL-decode the id parameter.
* Re-parse feed.xml to find the blog entry that matches the decoded id.
* Extract all available information for this specific entry (title, original link, publication date, description, categories, author details, etc.).
* Render a new template entry.html, passing all this extracted data to it.
* Include error handling for cases where the id is missing or no matching entry is found.
4. Update templates/index.html:
* Add a tag in the to include static/style.css.
* Modify the links for each blog entry to point to the new /entry route, passing the guid as a URL-encoded query parameter: href="{{ url_for('show_entry', id=entry.guid | urlencode) }}".
5. Create templates/entry.html:
* Add a tag in the to include static/style.css.
* Display the full details of the selected blog entry (title, formatted publication date, author, categories, and the HTML content of the description).
* Provide a clear link to the original blog entry (target="_blank").
* Include a "Back to Home" button/link that navigates back to index.html.
6. Restart the Flask server: After all code modifications are complete, I will restart the server.
Do you approve this plan?
When Gemini CLI asks you to approve the plan, enter yes, and then press Enter or Return.
Each time that Gemini CLI asks whether you want to proceed, press Enter to allow the tool to be used.
Gemini CLI will again work on the updates and restart the web server.
Refresh the web app page or open a new tab using Web Preview.
The updated app should now include a page per blog entry, and it should use the requested Google blue and green.
Note: If the app seems to be unchanged, Gemini CLI may not have successfully killed the web server. Use a prompt like "kill the web server and restart it" to help Gemini CLI restart the web server.
Here is an example of the blog page that was generated by Gemini CLI:
Click Check my progress to verify the objectives.
Build a web app with Gemini CLI
Optional: After successfully checking your progress for step 5, you may use Gemini CLI to make additional changes or fixes to the app.
Congratulations!
You have successfully installed Gemini CLI, configured and provided context to get responses tailored to your needs, and used Gemini CLI to explain code and build an app.
Manual last updated on March 11, 2026
Lab last tested on March 11, 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.
Labs create a Google Cloud project and resources for a fixed time
Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
On the top left of your screen, click Start lab to begin
Use private browsing
Copy the provided Username and Password for the lab
Click Open console in private mode
Sign in to the Console
Sign in using your lab credentials. Using other credentials might cause errors or incur charges.
Accept the terms, and skip the recovery resource page
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.
This lab explores several use cases for the Gemini CLI.
Тривалість:
Час налаштування: 2 хв
·
Доступ протягом 90 хв
·
Час виконання: 90 хв