Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

使用 AlloyDB 进行氛围编程：借助 Antigravity 从 0 到生产

1. 简介

氛围编程 (vibe coding) 彻底改变了我们开发前端的速度和方式，但它在到达数据库时往往会遇到瓶颈。传统上，开发者必须切换上下文、编写复杂的 SQL 架构、管理连接池并手动配置数据库扩展程序。

在此 Codelab 中，您将体验顺畅的对话式数据库开发工作流。借助 Model Context Protocol (MCP) 和智能体 IDE，您将把编辑器视为经验丰富的数据工程师，在几分钟内从一个简单的想法转变为一个完全连接、经过优化且支持 AI 的数据库应用，而无需离开工作区。

构建内容

在此 Codelab 中，您将构建和部署 AI 美食指南，这是一个由 AlloyDB 提供支持的现代 Next.js 应用。该应用将支持：

动态目录注入：自动从原始 CSV 文件导入和构建餐厅数据。
基于关键字的搜索：使用全文搜索动态查询数据库。
AI 支持的语义搜索：使用 Agent Platform 嵌入描述“氛围”（例如“适合约会的舒适场所”或“深夜小吃”），从而查找餐厅。

学习内容

预配具有公共 IP 和 VPC 网络配置的 Google Cloud AlloyDB 实例。
使用 Model Context Protocol (MCP) Toolbox 将 Antigravity IDE 直接连接到 AlloyDB。
使用环境变量和安全的 SSL 连接将 Next.js 前端连接到实时数据库。
启用数据库内 Agent Platform 集成，以使用 text-embedding-004 生成向量嵌入。
使用余弦距离运算符 (<=>) 执行向量相似度搜索。
使用 HNSW 索引和表分区优化生产规模的数据库性能，充当虚拟 DBA。

所需条件

要完成本 Codelab，您需要：

在您的机器上安装 Antigravity Desktop IDE。
启用了结算功能的 Google Cloud 项目。
在本地机器上安装并验证 Google Cloud CLI (gcloud) 和 Git。
网络浏览器（建议使用 Chrome）。

本 Codelab 适合各种水平的开发者，包括新手。

2. 准备工作

本部分将引导您完成 Google Cloud 项目中所需的初始设置，然后您才能开始构建 AI 柏林美食指南。

创建项目

在 Google Cloud 控制台的项目选择器页面上，选择或创建一个 Google Cloud 项目。
确保您的 Cloud 项目已启用结算功能。了解如何检查项目是否已启用结算功能。

安装本地前提条件

确保在本地机器上安装以下工具：

Antigravity IDE：安装 Antigravity Desktop IDE
Google Cloud SDK：下载并安装 Google Cloud CLI。
Git：下载并安装 Git。

验证身份并设置项目

您将直接在 IDE 中执行所有命令行说明。

在本地机器上打开 Antigravity IDE
打开 Antigravity 的终端并克隆项目代码库：

git clone https://github.com/mtoscano84/vibe-coding-postgres-mcp.git

打开项目文件夹：
依次前往“文件”>“打开文件夹”（或“打开…”）。
找到并选择新克隆的 vibe-coding-postgres-mcp 文件夹。
打开项目文件夹后，在 Antigravity 中启动新的集成终端。设置 PROJECT_ID 环境变量，并配置 gcloud CLI 以使用该变量（将 [YOUR_PROJECT_ID] 替换为实际的 GCP 项目 ID）：

export PROJECT_ID=[YOUR_PROJECT_ID]
gcloud config set project $PROJECT_ID

gcloud auth login

验证您的有效账号：

gcloud auth list

启用所需的 API

在 Antigravity 终端中运行以下命令，以启用必要的 Google Cloud 服务：

gcloud services enable alloydb.googleapis.com \
                       compute.googleapis.com \
                       servicenetworking.googleapis.com \
                       aiplatform.googleapis.com \
                       run.googleapis.com \
                       artifactregistry.googleapis.com \
                       cloudbuild.googleapis.com

3. 创建 AlloyDB 实例

在本部分中，您将在 Antigravity 终端中运行自动脚本，以在 Google Cloud 中预配 AlloyDB 集群和实例

在有效的 Antigravity 集成终端（已位于 vibe-coding-postgres-mcp 项目目录中）中，运行 AlloyDB 预配脚本：

source database/deploy_alloydb.sh --region us-central1 --public-ip

注意：预配过程大约需要 10-15 分钟

预配脚本将执行以下操作：：

创建名为 default 的 VPC 网络（如果您的项目中不存在此类网络）。
为 AlloyDB 设置专用服务访问通道。
部署 AlloyDB 集群和主实例，并同时启用专用 IP 和公共 IP。
向 AlloyDB 服务代理授予必要的 Agent Platform 权限。

输出的内容应类似于以下文本：

----------------------------------------
Deployment Process Completed
Cluster:  alloydb-aip-01 (STANDARD)
Instance: alloydb-aip-01-pr
Region:   us-central1
Private IP: XX.XX.XX.XX
Public IP:  XX.XX.XX.XX
Initial Password: XXXXXXXXXX (if new cluster)
----------------------------------------

请务必复制并保存以下详细信息：

AlloyDB 专用 IP：由 Cloud Run 应用使用，以便在 VPC 内安全连接。
AlloyDB 公共 IP：由本地 Antigravity IDE 使用，以便直接连接。
数据库密码：为 postgres 用户自动生成的密码。

4. 部署前端

在本部分中，您将使用 Antigravity 集成终端将基准 Next.js 前端（状态 0）部署到 Google Cloud Run。此初始版本使用模拟数据，并且尚未连接到数据库。

首先，直接在 Antigravity 终端中运行以下命令，以向 Compute Engine 默认服务账号授予必要的 IAM 角色：

PROJECT_NUMBER=$(gcloud projects describe $(gcloud config get-value project) --format="value(projectNumber)")
# Grant Storage Object Viewer (to read source code)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/storage.objectViewer"
# Grant Log Writer (to write build logs)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/logging.logWriter"
# Grant Artifact Registry Writer (to push container images)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/artifactregistry.writer"

在 Antigravity 终端中，从 vibe-coding-postgres-mcp 目录的根目录运行以下命令，以将 Next.js 应用编译并部署到 VPC 网络中：

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
  --allow-unauthenticated \
  --region=us-central1

部署完成后，系统会输出服务网址。

Building using Dockerfile and deploying container to Cloud Run service [berlin-gastronomy-guide] in project [vibe-coding-postgres-mcp] region [us-central1]
Building and deploying...
  Validating configuration...done
  Uploading sources...done
  Building Container... Logs are available at [ https://console.cloud.google.com/cloud-build/builds;region=us-central1/46a6e834-d5e9-4dfd-885e-d39e2790f72d?project=734791203988 ]....done
  Setting IAM Policy...done
  Creating Revision...done
  Routing traffic...done
Done.
Service [berlin-gastronomy-guide] revision [berlin-gastronomy-guide-00002-n6k] has been deployed and is serving 100 percent of traffic.
Service URL: https://berlin-gastronomy-guide-[YOUR_PROJECT_NUMBER].us-central1.run.app

复制该网址并在浏览器中打开。

验证您是否看到了柏林 AI 美食指南网页，其中显示了模拟餐厅卡片。

5. 将 Antigravity 连接到 Google Cloud

为了让本地运行的 IDE (Antigravity) 中的 AI 智能体能够与数据库互动，我们将使用官方 Google Cloud AlloyDB MCP 服务器。

由于我们在预配期间在 AlloyDB 实例上启用了公共 IP，因此本地 IDE 可以通过互联网直接连接到该实例。连接使用 SSL 和密码验证进行保护，MCP 服务器使用本地 Google Cloud 凭据来授权连接。

在 Antigravity 中配置 MCP 服务器

在 Antigravity IDE 中，点击聊天窗口右上角的三点状菜单 (...)。
选择“MCP 服务器”，然后点击“托管 MCP 服务器”（或“查看原始配置”/“修改配置文件”）。
在 mcpServers 对象内添加以下 JSON 代码块。请务必将 [YOUR_PROJECT_ID] 和 [YOUR_ALLOYDB_PASSWORD] 替换为实际项目 ID 和您在 AlloyDB 预配步骤中保存的数据库密码：

"alloydb-postgres": {
  "command": "npx",
  "args": [
    "-y",
    "@toolbox-sdk/server@latest",
    "--prebuilt",
    "alloydb-postgres",
    "--stdio"
  ],
  "env": {
    "ALLOYDB_POSTGRES_PROJECT": "[YOUR_PROJECT_ID]",
    "ALLOYDB_POSTGRES_REGION": "us-central1",
    "ALLOYDB_POSTGRES_CLUSTER": "alloydb-aip-01",
    "ALLOYDB_POSTGRES_INSTANCE": "alloydb-aip-01-pr",
    "ALLOYDB_POSTGRES_DATABASE": "postgres",
    "ALLOYDB_POSTGRES_USER": "postgres",
    "ALLOYDB_POSTGRES_PASSWORD": "[YOUR_ALLOYDB_PASSWORD]"
  }
}

保存配置文件
IDE 将自动启动 MCP 服务器。您应该会在 MCP 面板中看到 alloydb-postgres 旁边的绿色圆点，表示连接成功。

6. 氛围编程：数据库注入

现在，您的 Antigravity IDE 已通过 MCP 服务器连接到 AlloyDB 实例，您可以开始体验氛围编程了。

在此步骤中，您将指示 AI 智能体读取包含柏林美食目录的本地 CSV 文件，并将其加载到 AlloyDB 数据库中。

任务

您将使用 Antigravity 中的智能体聊天。智能体将自主读取文件、分析数据类型、连接到数据库、创建表并插入记录。

在 Antigravity 中，打开“智能体聊天”面板（通常位于编辑器右侧）。

然后，将以下提示复制并粘贴到聊天中，然后按 Enter 键：

Read the headers of database/seed_data_berlin.csv to determine column data types and create the restaurants table using the MCP tool execute_sql. Then, read the CSV rows locally and insert all 100 records into remote AlloyDB using a single batched multi-row INSERT INTO ... VALUES (...), (...), ...; statement via execute_sql. Do not print the CSV contents, row payloads, or SQL statements to the chat transcript.

验证

智能体将执行以下操作：

读取 CSV 文件标头和一些示例行，以确定合适的架构。
调用 AlloyDB MCP 工具以创建表 restaurants。
将 CSV 文件中的 100 条餐厅记录批量插入到数据库中。

7. 氛围编程：将前端连接到数据库

在本部分中，您将 Next.js 前端连接到实时 AlloyDB 数据库。您将指示智能体将模拟数据替换为实时数据库查询，并实现关键字搜索。

任务

您将提示智能体编写连接代码并更新首页。由于我们在 .agents/AGENTS.md 中提交了数据库 SSL 规则，因此智能体会自动配置连接池以使用 SSL 进行云连接，而无需您在提示中指定！

在 Antigravity 智能体聊天中，复制并粘贴以下提示，然后按 Enter 键（将 [YOUR_PASSWORD] 替换为实际数据库密码）：

Connect our Next.js frontend to the restaurants table in the database using the pg library. Use a connection pool configured with environment variables: DB_HOST, DB_USER (postgres), DB_PASS (password is '

[YOUR_PASSWORD]

'), and DB_NAME (postgres). Replace the mock data in page.tsx with a live query, and implement keyword search on the name, category, and description. When testing or verifying queries, always use LIMIT 3 and suppress quiet npm/build logs.

观察智能体执行任务：

它将安装 pg 软件包及其 TypeScript 类型 (@types/pg)。
它将创建数据库连接文件（或 Next.js 服务器操作）并配置连接池。
它将读取 AGENTS.md 规则，并自动为非本地主机添加 SSL 配置。
它将重写 page.tsx 以查询数据库，并根据搜索查询过滤结果。

验证

如需测试更改，您必须将前端重新部署到 Cloud Run。由于我们使用的是“仅限云端”流程，因此新代码的交付方式如下。

在 Antigravity 中打开集成终端（确保您位于根目录中）。

运行部署命令，将 AlloyDB 专用 IP 和密码作为环境变量传递（将占位符替换为实际值）：

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

部署完成后，在浏览器中打开服务网址。

尝试搜索“Burgermeister”或“Kebab”。您应该会看到从数据库加载的真实餐厅！

请注意，餐厅卡片现在会显示其实际 GCS 图片（因为数据库记录包含我们之前上传的公共 GCS 网址！）。

8. 氛围编程：启用语义搜索

在本部分中，您将升级应用以支持 AI 支持的语义向量搜索。用户将能够通过描述他们要寻找的“氛围”或体验（例如“浪漫晚餐场所”或“夜店后的小吃”），而不是仅匹配确切的关键字进行搜索。

任务

您将指示智能体在 restaurants 表中启用语义搜索。智能体将利用代码库中的 add-vector-search-alloydb 自定义技能自动处理数据库扩展程序、Agent Platform 模型注册、嵌入生成和查询更新。

在 Antigravity 智能体聊天中，复制并粘贴以下提示，然后按 Enter 键：

Upgrade our database to support Semantic Vector Search on the restaurants table based on the description column. Then, update our frontend search query to use vector similarity search. Execute embedding generation quietly without printing embedding vectors or SQL progress logs to chat.

观察智能体执行任务：

它将连接到 AlloyDB 并启用向量 (pgvector) 和 google_ml_integration 扩展程序。
它将在数据库内注册 Agent Platform 嵌入模型 (text-embedding-004)。
它将向 restaurants 表添加新的嵌入列。
它将运行数据库内查询，为所有 100 个餐厅说明生成嵌入。
它将更新前端代码，为用户的搜索查询生成嵌入，并使用余弦距离运算符 (<=>) 执行向量相似度搜索。

验证

将更新后的代码重新部署到 Cloud Run。

在 Antigravity 集成终端中，运行部署命令（将占位符替换为实际值）：

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

部署完成后，在浏览器中打开服务网址。

通过输入自然语言说明（例如以下内容）来测试语义搜索：

“浪漫晚餐场所”
“夜店后的小吃”

请注意，即使餐厅的名称或说明中没有确切的“浪漫”或“夜店”字词，它也会返回高度相关的餐厅（例如 Cafe Clärchens 或 Burgermeister）！

9. 氛围编程：数据库优化

随着应用的增长，必须优化数据库以处理大量数据（10 万行以上）和高并发搜索流量。在最后一步中，您将把智能体视为虚拟数据库管理员 (DBA)，以分析和优化数据库架构。

任务

您将要求智能体充当首席数据库架构师，分析当前架构并推荐优化方案。查看并批准建议后，智能体将使用其 optimize-database-alloydb 自定义技能自动应用这些建议。

Act as my Principal Database Architect! Our semantic search is feeling great, but let's level up our backend to effortlessly scale to 100K+ rows and handle high concurrent traffic. Inspect our restaurants schema quietly, and work your magic by immediately applying your top 2 production optimizations—an HNSW vector index and list partitioning by neighborhood—right now in this turn. No need to wait for approval! Keep the SQL logs clean and hit me with a crisp 3-bullet summary of how we just supercharged our database.

验证

智能体将自主分析数据库架构并应用两项关键的生产优化：

HNSW （分层可导航小世界）索引：无需扫描整个表，即可将向量相似度搜索速度提高几个数量级。
声明式列表分区：按邻域对 restaurants 表进行分区，以实现高效扩缩和维护。

最后，它将为您提供一个简明的 3 点摘要，说明这些生产升级的架构优势！

10. 挑战：添加评价和评分

现在轮到您来测试氛围编程技能了！在此挑战中，您将扩展柏林美食指南以支持客户评价和星级评分。

任务

您无需遵循复制粘贴提示，而是在 Antigravity 智能体聊天中编写自己的提示 ，以实现以下功能：

数据库架构：创建一个链接到 restaurants 表的新 reviews 表。它应存储评分（1 到 5 之间的整数）和简短的文本评论。
数据生成：为数据库中的 100 家餐厅中的每家生成 3-4 条真实的客户评价。
前端集成：更新 Next.js 前端，以计算并在每张餐厅卡片上显示平均星级评分（例如 ⭐⭐⭐⭐☆）。
过滤：在页面顶部添加一个下拉过滤条件，以按评分过滤餐厅（例如“显示全部”“4 星以上”“3 星以上”）。

验证

智能体完成任务后，将应用重新部署到 Cloud Run（将占位符替换为实际值）：

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

部署完成后，刷新浏览器并验证您是否在卡片上看到了星级评分

。

11. 结果

完成这些步骤后，您已使用氛围编程成功构建并优化了新一代数据库支持的 AI 应用。本部分重点介绍了您已实现的核心架构功能：

智能体数据库集成 (Model Context Protocol)

传统上，编写数据库代码是一个手动过程，需要在 IDE、文档和数据库客户端之间切换上下文。

在本实验中，您使用了 Model Context Protocol (MCP) Toolbox 来弥合这一差距。通过将数据库架构检查和 SQL 执行作为工具直接向 AI 智能体公开，智能体能够：

检查原始 CSV 数据并设计数据库架构。
生成并执行 DDL 以创建表。
连接 Next.js 应用中的连接池。

这展示了 MCP 如何使数据库开发成为一种对话式、高速体验，同时让开发者在 IDE 中保持完全控制。

数据库内 AI (Agent Platform 和语义搜索)

您的应用利用 AlloyDB 与 Google Cloud 的 Agent Platform 的原生集成，使用 SQL 直接在数据库内生成向量嵌入：

在线嵌入生成：AlloyDB 不会将数据提取到外部 Python 服务，而是通过 SQL 函数在数据库内调用 text-embedding-004 模型。
语义向量搜索：通过使用 pgvector 扩展程序和余弦距离运算符 (<=>)，智能体可以将用户的自然语言“氛围”（例如“浪漫晚餐”）与餐厅目录中最接近的向量表示进行匹配，并在几毫秒内返回语义相关的结果。

生产级数据库优化（HNSW 和分区）

为了确保应用可以扩缩到 10 万行以上并处理高流量，您充当虚拟 DBA 来应用两项高级数据库优化：

HNSW（分层可导航小世界）索引：您在向量列上创建了 HNSW 索引。与平面索引不同，HNSW 构建了一个多层图，可实现极快的近似最近邻 (ANN) 搜索，并具有高召回率。
声明式表分区：您按邻域对 restaurants 表进行了分区。这可确保以特定区域为目标的查询仅扫描相关分区，而不是整个表，从而大幅减少磁盘 I/O 和查询延迟。

作为应用开发者，我们通常会避开复杂的数据库配置、向量数学和深度索引策略，因为它们需要专业的 DBA 知识。通过将氛围编程与智能体 IDE 结合使用，我们弥合了这一差距。现在，我们可以自信地使用自然语言设计、构建和优化生产级数据库应用，从而显著加快开发周期，并让我们专注于最重要的事情：打造出色的用户体验。

12. 清理

为避免系统因本实验中使用的资源向您的 Google Cloud 账号收取费用，请按照以下步骤操作：

在 Google Cloud 控制台中，前往管理资源页面。
在项目列表中，选择要删除的项目，然后点击“删除”。
在对话框中输入项目 ID，然后点击“关停”以删除项目。

13. 恭喜

您已使用氛围编程成功构建并部署了数据驱动型 AI 应用！

在此实验中，您：

预配了同时具有专用 IP 和公共 IP 访问权限的 AlloyDB 数据库。
使用 Model Context Protocol (MCP) Toolbox 将 Antigravity IDE 直接连接到数据库。
使用自然语言注入 CSV 目录，将 Next.js 前端连接到数据库，并将其部署到 Cloud Run。
启用了数据库内 Agent Platform 集成，以生成向量嵌入并执行语义搜索。
充当虚拟 DBA，使用 HNSW 索引和表分区优化生产规模的数据库。

所有这些操作都是通过与 AI 智能体进行自然对话完成的，无需编写任何手动 SQL 代码或打开外部数据库客户端！

如需了解详情，请参阅产品文档：