命令和控制:利用 Gemini 和 MCP 编排应用开发

1. 简介

在本实操实验中,您将通过编排 Antigravity 来构建完整的基于云的应用,从而练习现代开发技能。您还将学习如何使用开发者知识 MCP 和智能体技能来提高智能体知识和输出质量。

我们正在构建“Cat Delivery System”,这是一款使用 Gemini 3.1 Flash Image(也称为 Nano Banana 2)生成猫图片的应用。应用后端将使用 Antigravity SDK 开发并部署到 Cloud Run。我们还将使用 Lit 和 Vite 创建一个现代前端。所有这些操作都无需手动编写任何代码。

学习内容

  • 如何在快速模式和规划模式下使用 Antigravity CLI
  • 如何使用开发者知识 MCP 服务器授予 Antigravity 对 Google 开发者文档的访问权限
  • 如何将自定义技能安装到 Antigravity CLI 中
  • 如何使用 Antigravity 部署和审核应用

前提条件

  • 使用终端的经验
  • 阅读和理解代码
  • AI 编码代理的基础知识
  • 对云概念有基本的了解

2. 设置

按照以下说明初始化本 Codelab 所需的 Google Cloud 项目。初始化项目后,建议您在 Cloud Shell 上运行此 Codelab,因为 Cloud Shell 随附了运行此 Codelab 所需的所有工具。

如果您希望在本地环境中运行此 Codelab,则需要在继续操作之前安装 Python、uv 和代码编辑器。除非另有说明,否则本 Codelab 中的所有说明都假定您是在 Cloud Shell 中运行的。

自定进度的环境设置

  1. 登录 Google Cloud 控制台,然后创建一个新项目或重复使用现有项目。如果您还没有 Gmail 或 Google Workspace 账号,则必须创建一个

295004821bab6a87.png

37d264871000675d.png

96d86d3d5655cdbe.png

  • 项目名称是此项目参与者的显示名称。它是 Google API 尚未使用的字符串。您可以随时对其进行更新。
  • 项目 ID 在所有 Google Cloud 项目中是唯一的,并且是不可变的(一经设置便无法更改)。Cloud 控制台会自动生成一个唯一字符串;通常情况下,您无需关注该字符串。在大多数 Codelab 中,您都需要引用项目 ID(通常用 PROJECT_ID 标识)。如果您不喜欢生成的 ID,可以再随机生成一个 ID。或者,您也可以尝试自己的项目 ID,看看是否可用。完成此步骤后便无法更改该 ID,并且此 ID 在项目期间会一直保留。
  • 此外,还有第三个值,即部分 API 使用的项目编号,供您参考。如需详细了解所有这三个值,请参阅文档
  1. 接下来,您需要在 Cloud 控制台中启用结算功能,以便使用 Cloud 资源/API。运行此 Codelab 应该不会产生太多的费用(如果有的话)。若要关闭资源以避免产生超出本教程范围的结算费用,您可以删除自己创建的资源或删除项目。Google Cloud 新用户符合参与 300 美元免费试用计划的条件。

启动 Cloud Shell

虽然可以通过笔记本电脑对 Google Cloud 进行远程操作,但在此 Codelab 中,您将使用 Google Cloud Shell,这是一个在云端运行的命令行环境。

Google Cloud 控制台 中,点击右上角工具栏中的 Cloud Shell 图标:

激活 Cloud Shell

预配和连接到环境应该只需要片刻时间。完成后,您应该会看到如下内容:

Google Cloud Shell 终端的屏幕截图,显示环境已连接

这个虚拟机已加载了您需要的所有开发工具。它提供了一个持久的 5 GB 主目录,并且在 Google Cloud 中运行,大大增强了网络性能和身份验证功能。您在此 Codelab 中的所有工作都可以在浏览器中完成。您无需安装任何程序。

3. 设置 Antigravity CLI 并对其进行身份验证

在本实验中,您将使用 Antigravity (AGY)。Google 的编码代理,使用 Google 的 Gemini 模型帮助您构建软件。AGY 桌面应用、命令行界面 (AGY CLI) 和集成式开发环境 (IDE) 可让您与代理一起查看和修改代码。在本实验中,您将使用 AGY CLI。

此外,还有一个 SDK 可用于使用 Antigravity 智能体 Harness(将该 Harness 视为 Antigravity 的引擎)构建自己的通用智能体。

启动和验证 AGY

按“打开编辑器”按钮,打开 Cloud Shell 编辑器。

2cf4fca2471d60ac.png

打开编辑器后,您可以使用菜单栏中的最大化按钮将窗口最大化:

1f8f9cf09e821b80.png

使用菜单终端 > 新终端 或使用热键 Ctrl+`(Ctrl 加反引号)打开终端面板:

307efeaef3537ba3.png

屏幕底部应会打开一个新的终端窗口,其中显示 bash 提示符:

e127f0fcd18d93fb.png

然后,在终端中,为第一个练习创建一个工作目录并切换到该目录:

mkdir -p ~/hello-agy && cd ~/hello-agy

在此终端中,输入 agy 以启动 Antigravity CLI:

agy

agy 启动后,系统会要求您进行身份验证。选择使用 Google Cloud 项目

c307f5f610adb95a.png

屏幕上现在会显示一个链接。复制提供的链接,并将其粘贴到无痕式浏览器中的另一个标签页中。

使用为此实验提供的学生凭据登录。

复制授权代码,然后将其粘贴回 agy:

6c1a2608ae353e3b.png

当系统要求您输入项目 ID 时,您应使用本页面侧边栏中显示的项目 ID。

9ee6b90385475721.png

最后,选择 Google Cloud 位置 global

220a86cbed900bfb.png

生成一个快速脚本来返回猫的冷知识

现在,我们来生成一个简单的脚本,以便了解 AGY CLI 的运作方式。

让 AGY 编写一个返回猫知识的简短脚本,并为您高效运转该脚本:

Write a simple node script that returns cat trivia and run it for me

AGY 会思考一段时间,然后为您撰写脚本。

当 AGY 请求运行节点脚本的权限时,选择 Yes 并按 Enter 键。

我的权限请求如下所示:

Requesting permission for: node cat-trivia.js

Do you want to proceed?
> 1. Yes
  2. Yes, and always allow in this conversation for commands that start with 'node cat-trivia\.js'
  3. Yes, and always allow for commands that start with 'node cat-trivia\.js' (Persist to settings.json)
  4. No

运行脚本后,AGY 会为您提供其所执行操作的摘要。以下是它给我的回答:

I have created and executed a simple Node.js script that returns cat trivia.

### Created File

• cat-trivia.js: A standalone Node.js script that fetches random cat facts from a public API ( https://catfact.ninja/fact ) with built-in fallbacks and ASCII art.

### Execution Output

Running the script using  node cat-trivia.js  produced the following output:

     _._     _,-'""`-._
    (,-.`._,'(       |\`-/|
        `-.-' \ )-`( , o o)
              `-    \`_`"'-

    🐱 Here is your Cat Trivia:
    ----------------------------------------
    "In 1987 cats overtook dogs as the number one pet in America."
    ----------------------------------------

我喜欢它甚至还为我添加了猫的 ASCII 图。

现在,您可能想详细了解它为您创建的内容。虽然您可以打开编辑器并检查源代码(我当然建议您这样做),但您也可以让 AGY 为您注释和解释代码:

Explain the code you generated please

阅读说明,如果您想了解更多信息,可以提出后续问题。

最后,如需完成此任务,请按 Ctrl+D 两次以关闭 agy。

4. 连接并查询 Google 开发者文档

虽然代理和模型每天都在变得更加智能,但回答质量在很大程度上取决于其知识的准确性和最新程度。因此,务必要为代理提供从权威来源检索最新开发者文档的工具,以便其避免根据内部知识或猜测做出错误的决策。

Google 开发者知识 MCP 服务器使编码智能体能够搜索 Google 官方开发者文档,其中包含 Firebase、Google Cloud、Android、Maps 和许多其他 Google 产品。

通过将代理直接连接到 Google 的官方文档库,您可以确保代理使用的代码和指南是最新的,并且基于权威的上下文。

首先,启用 Developer Knowledge API:

gcloud services enable developerknowledge.googleapis.com

设置和配置开发者知识 MCP 服务器

请按照以下步骤为此项目创建工作区,并为 Antigravity 配置 Developer Knowledge MCP 服务器:

用户的 Antigravity 配置文件存储在主目录的 .gemini 文件夹中。下图显示了该文件的简化版本,其中包含您会找到的主要元素:

~/.gemini
├── antigravity/
├── antigravity-cli/
│   ├── brain/            # Conversations and artifacts
│   └── settings.json     # CLI settings
├── config/
│   ├── plugins/          # Global / shared plugins
│   └── mcp_config.json   # Global / shared MCP config
├── skills/               # Global / shared skills
│   └── {skill_name}/
│       ├── SKILL.md      # Skill definition
│       └── ...           # [optional] support files, scripts, etc.
└── GEMINI.md             # Global rules

如需将 Developer Knowledge MCP 服务器添加到 AGY CLI,请修改 ~/.gemini/config 文件夹中的 mcp_config.json 文件。

首先,确保配置文件夹存在,并创建一个空的 mcp_config.json 文件:

mkdir -p ~/.gemini/config && touch mcp_config.json

然后,使用以下命令在 Cloud Shell 编辑器中打开此文件:

cloudshell edit ~/.gemini/config/mcp_config.json

最后,将以下配置添加到 mcp_config.json。请注意,您需要将 [[PROJECT_ID]] 替换为您的实际项目 ID。您可以在这些说明的侧边栏中找到项目 ID。

~/.gemini/config/mcp_config.json

{
  "mcpServers": {
    "google-developer-knowledge": {
      "url": "https://developerknowledge.googleapis.com/mcp",
      "authProviderType": "google_credentials",
      "oauth": {
        "scopes": [
          "https://www.googleapis.com/auth/cloud-platform"
        ]
      },
      "timeout": 30000,
      "headers": {
        "X-goog-user-project": "[[PROJECT_ID]]"
      }
    }
  }
}

现在,您可以使用 /mcp 斜杠命令检查 MCP 服务器是否已正确加载。您应会看到类似下图的界面:

f104490ade24fa5e.png

开发者知识 MCP 已配置完毕,接下来我们来看看实际应用场景!

生成使用 Nano Banana 2 创建猫图片的脚本

让我们创建一个简单的脚本,使用 Nano Banana 2 生成猫图片,以展示 Developer Knowledge MCP 的功能。

您需要在终端中运行以下命令。您可以按 Ctrl+D 两次来关闭 agy 并返回到 shell。

首先,启用 AI Platform API。此 API 可让您的项目进行 Gemini API 调用:

gcloud services enable aiplatform.googleapis.com

为小猫生成器创建工作区:

mkdir -p ~/nano-banana-kitten && cd ~/nano-banana-kitten

初始化依赖项管理器:

uv init

现在,启动 Antigravity 并向其提供以下提示:

Write a script that uses Nano Banana 2 through Vertex AI to generate a picture of a cute kitten, and run the script for me. Use the google-developer-knowledge MCP when researching.

按 Ctrl+O 展开中间推理步骤并跟读。您应该会看到 AGY 使用 google-developer-knowledge 服务来提出查询、编写脚本、为您高效运转,并修正发现的任何错误。

查看猫咪图片 =^_^=

8c74ee97ffb3caf3.png

5. 构建猫咪送货代理

Google 开发者知识 MCP 可用于通过官方文档回答问题,但有时我们需要的信息非常专业,无法在文档中找到。对于这些情况,我们可以使用另一项开放标准:Agent Skills

Agent Skills 是一种轻量级开放格式,可用于利用专业知识和工作流来扩展 AI 智能体功能。技能的决定性特征是所谓的逐步披露:智能体不会从一开始就加载所有技能内容,而只会在必要时激活技能,按需加载所需信息,从而节省宝贵的令牌。

为了完成猫咪送货智能体,我们将使用 Antigravity SDK 作为智能体 Harness。为了尽可能减少摩擦并简化编码代理的实现,我们还将利用官方 Antigravity SDK 技能。

创建工作区并安装依赖项

首先,为最终项目创建一个文件夹:

mkdir -p ~/cat-delivery && cd ~/cat-delivery

然后,使用 uv 软件包管理系统初始化此文件夹并安装一些依赖项:

uv init && uv add fastapi uvicorn

安装 AGY SDK Python 技能

如需从源代码和开放式市场安装技能,您可以使用 Vercel 的 Skill CLI。在终端中运行以下命令,以安装 google-antigravity-sdk 技能。确保您是从实验工作区文件夹 (~/cdslab) 运行该脚本的

npx skills add Google-Antigravity/antigravity-sdk-python --skill google-antigravity-sdk --agent antigravity-cli --yes

此命令的输出应如下所示:

22091934f7a7f862.png

请注意,命令 npx skills add Google-Antigravity/antigravity-sdk-python 自动从 GitHub 克隆了代码库 antigravity-sdk-python。此命令可用于安装任何 GitHub 代码库中的技能,只要这些技能具有 skills 文件夹即可。

从插件安装技能

安装技能的另一种方式是通过插件系统。借助 Antigravity 中的插件,您不仅可以在同一软件包中包含技能,还可以包含 MCP 服务器、规则和钩子。它们有助于在单个部署软件包中创建有凝聚力的扩展程序。

由于我们要构建 Web 应用,因此请使用以下命令安装 modern-web-guidance 插件:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

此插件包含一项技能,其中包含 Google Chrome 团队撰写的 Web 开发最佳实践。

再次启动 agy,以便我们查看这些技能的实际应用。在 agy 的提示中,输入 /skills 以打开技能菜单:

/skills

您会看到类似如下的内容:

cfdb4b5212fa94e1.png

现在,我们已配置好 MCP 和代理技能,Antigravity 可以开始处理我们的项目了,它拥有成功所需的所有信息。

规划应用

Antigravity 有两种运行模式:快速模式和规划模式。在快速模式下,Antigravity 会立即开始处理任务,此模式适用于较简单的独立任务。规划模式专为复杂任务而设计,智能体将首先详细制定一个方案,您可以在开始实施之前查看和修改该方案。

如需启用规划模式,您可以使用斜杠命令 /planning

/planning

您可以使用 /fast 切换回快速模式:

/fast

在规划模式和快速模式之间切换时,切换模型也很有用。您可以使用 /model 命令执行此操作:

/model

可用模型的列表可能会略有不同,具体取决于您的环境和身份验证模式:

db085a557b145806.png

在本教程的范围内,选择 Gemini 3.5 Flash(低)。括号中的“低”表示模型的思考水平。Gemini 3.5 Flash 具有推理能力,是一款速度非常快且效果出色的模型,词元经济性也很好。选择中等作为思考水平后,模型会在推理上花费更多 token 和时间,然后再返回回答。

例如,在实际应用场景中,您可以使用高思维水平下最强大的模型进行规划,并使用速度更快的模型进行实施。但对于我们的项目,Gemini 3.5 Flash(低)就足够了。

生成方案

将 Antigravity 切换回规划模式:

/planning

然后,发送以下提示以创建实现方案:

Create an application named "Cat Delivery System". This application will be an agent that generates cat pictures using Gemini 3.1 Flash Image (aka Nano Banana 2). The user will interact with the agent whenever it feels the need for a cat picture in their life, whether it be to make them smile, laugh or just brighten their day. Cat pictures can take any form the user desires: anime, cartoon, photorealistic, 3D render, etc. The only rule is ABSOLUTELY NO DOGS - steer the user towards cats if necessary. P.S.: capybaras are allowed.

The tech stack should be as follows:
- uv package manager
- Backend: agent using Antigravity SDK
- Frontend: simple chat window, light mode, lit / vite
- Model: Gemini 3.5 Flash for the root agent, Gemini 3.1 Flash Image for image generation

TODO:
- backend should serve a static frontend
- define the contract between frontend and backend before starting implementation
- use Google Cloud Project auth

您会看到,在研究阶段,Antigravity 可能会同时调用开发者知识 MCP 和一项或多项技能:

15194975b2519818.png

方案完成后,系统会提示您查看方案:

7fe5bc52f1abefe3.png

请密切注意屏幕右下角:系统会显示一条消息,指出有 1 个工件,并提示使用 /artifact 进行查看。在 Antigravity 中,计划、任务列表和演练等支持文件称为“制品”,以区别于作为解决方案一部分的常规文件(例如源代码)。

在提示中输入命令 /artifact,即可查看计划并对其发表评论,以便在需要时进行调整。

/artifact

您应会看到类似下图的界面:

2b5d9881a172ac7c.png

请注意,有一个名为 implementation_plan.md 的文件,其中包含用于打开、批准或拒绝的选项。按 Enter 键即可打开。以下是我的系统上显示的方案示例:

cda1079662bf731b.png

您可以使用箭头键向上和向下滚动,并在任意行中按 C 键添加注释。

需要检查的一个重要部分是“验证计划”。您可以在此处验证并添加验证步骤,以便模型知道它已完成任务。

b4f09e0084f7f6a1.png

向方案添加注释,直到您满意为止,然后按 ESC 键返回。然后按 Y 确认将评论发送给代理:

602addd55412527c.png

按 Y 后,代理会立即开始工作。随着实施工作的推进,智能体可能会要求您确认更多工具调用。

您可能会注意到,工件的数量会随着时间的推移而增加。除了方案之外,Antigravity 还会创建一个任务列表 (task.md),用于跟踪需要实现的每个项目或需要执行的操作。完成后,它会创建一个演练文件 (walkthrough.md),其中包含对已实现目标的说明。您可以再次使用 /artifact 命令检查所有这些内容。

384ffba82817aa8d.png

您可以随时打开这些文件并向其中添加注释,在将这些文件发送给智能体后,它们会像排队的提示一样排队等待执行。建议您在这些文件中添加注释,以便为代理提供有关您请求的更多背景信息。

6. 将代理部署到云端

现在,您可以使用 Cloud Run 将其部署到云端。由于此任务不需要详细的计划,因此我们可以使用快速模式。

使用 /fast 将 Antigravity 切换到快速模式:

/fast

使用以下提示指示 Antigravity 将 CDS 代理部署到 Cloud Run:

Deploy the agent and frontend to Cloud Run.

TODO:
- backend should serve a static frontend
- frontend and backend are deployed in the same container

Acceptance Criteria
- Agent is deployed to cloud run
- Frontend is live and renders with no errors
- Backend is live and responds to requests with no errors

7. 恭喜!

在本研讨会中,您练习了使用 Antigravity 进行现代开发,包括如何使用 MCP 服务器和代理技能来扩展其功能。您还构建了一个利用 Antigravity SDK 和 Gemini 3.1 Flash Image 的完整应用。您的学习之旅不必就此止步:不妨看看本平台上的其他 Codelab,继续提升您的智能体编码技能!