1. はじめに
バイブ コーディングは、フロントエンドの開発速度と方法に革命をもたらしましたが、データベースに到達すると行き詰まることがよくあります。従来、デベロッパーはコンテキストを切り替え、複雑な SQL スキーマを作成し、接続プールを管理し、データベース拡張機能を手動で構成する必要がありました。
この Codelab では、スムーズな会話型のデータベース開発ワークフローを体験します。Model Context Protocol（MCP）とエージェント IDE を使用して、エディタを熟練したデータ エンジニアとして扱い、シンプルなアイデアから、完全に接続され、最適化され、AI 対応のデータベース アプリケーションを数分で作成できます。ワークスペースを離れる必要はありません。
作成するアプリの概要
この Codelab では、AlloyDB を基盤とする最新の Next.js アプリケーションである AI Gastronomy Guide を作成してデプロイします。このアプリケーションは、次の機能をサポートします。
- 動的カタログの取り込み: 未加工の CSV ファイルからレストラン データを自動的にインポートして構造化します。
- キーワード ベースの検索: 全文検索を使用してデータベースを動的にクエリします。
- AI を活用したセマンティック検索: Agent Platform エンベディングを使用して「雰囲気」（例: 「デートに最適な居心地の良い場所」や「深夜の軽食」）を記述してレストランを検索します。
学習内容
- パブリック IP と VPC ネットワーク構成を使用して Google Cloud AlloyDB インスタンスをプロビジョニングする。
- Model Context Protocol（MCP）ツールボックスを使用して、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. 始める前に
このセクションでは、AI Berlin Gastronomy Guide の構築を開始する前に Google Cloud プロジェクトで必要な初期設定について説明します。
プロジェクトの作成
- 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
- Google Cloud CLI にログインします。
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 のプライベート サービス アクセスを設定します。
- プライベート IP とパブリック IP の両方が有効になっている AlloyDB クラスタとプライマリ インスタンスをデプロイします。
- 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
デプロイが完了すると、サービス URL が出力されます。
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
URL をコピーしてブラウザで開きます。
モック レストラン カードを表示する Berlin AI Gastronomy Guide ウェブページが表示されることを確認します。
5. Antigravity を Google Cloud に接続する
ローカルで実行されている IDE（Antigravity）の AI エージェントがデータベースとやり取りできるようにするには、公式の Google Cloud AlloyDB MCP サーバーを使用します。
プロビジョニング時に AlloyDB インスタンスでパブリック IP を有効にしたため、ローカル IDE はインターネット経由で直接接続できます。接続は SSL とパスワード認証を使用して保護され、MCP サーバーはローカルの Google Cloud 認証情報を使用して接続を承認します。
Antigravity で MCP サーバーを構成する
- Antigravity IDE で、チャット ウィンドウの右上にあるメニュー（3 つの点）をクリックします。
- [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 インスタンスに接続されたので、バイブ コーディングを開始できます。
このステップでは、ベルリンのグルメ カタログを含むローカル CSV ファイルを読み取り、AlloyDB データベースに読み込むように AI エージェントに指示します。
タスク
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 ツールを呼び出して、テーブル レストランを作成します。
- CSV ファイルからデータベースに 100 件のレストラン レコードを一括挿入します。
7. バイブ コーディング: フロントエンドをデータベースに接続する
このセクションでは、Next.js フロントエンドをライブ AlloyDB データベースに接続します。エージェントに、モックデータをライブ データベース クエリに置き換えてキーワード検索を実装するように指示します。
タスク
エージェントに接続コードを記述してホームページを更新するように指示します。.agents/AGENTS.md でデータベース SSL ルールを commit したため、プロンプトで指定しなくても、エージェントはクラウド接続に 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 に再デプロイする必要があります。「Cloud-Only」フローを使用しているため、新しいコードは次のように配信されます。
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
デプロイが完了したら、ブラウザでサービス URL を開きます。
「Burgermeister」または「Kebab」を検索してみてください。データベースから読み込まれた実際のレストランが表示されます。
レストラン カードに実際の GCS 画像が表示されるようになりました（データベース レコードには、先ほどアップロードした公開 GCS URL が含まれているため）。
8. バイブ コーディング: セマンティック検索を有効にする
このセクションでは、AI を活用したセマンティック ベクトル検索をサポートするようにアプリケーションをアップグレードします。ユーザーは、正確なキーワードに一致させるだけでなく、探している「雰囲気」やエクスペリエンス（「ロマンチックなディナー スポット」や「クラブ帰りの軽食」など）を記述して検索できるようになります。
タスク
エージェントに、レストラン テーブルでセマンティック検索を有効にするように指示します。エージェントは、リポジトリの 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 に接続し、vector（pgvector）拡張機能と google_ml_integration 拡張機能を有効にします。
- データベース内に Agent Platform エンベディング モデル（text-embedding-004）を登録します。
- レストラン テーブルに新しいエンベディング列を追加します。
- データベース内クエリを実行して、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
デプロイが完了したら、ブラウザでサービス URL を開きます。
次のような自然言語の説明を入力して、セマンティック検索をテストします。
- 「ロマンチックなディナー スポット」
- 「クラブ帰りの軽食」
名前や説明に「ロマンチック」や「クラブ」という単語が含まれていなくても、関連性の高いレストラン（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.
確認
エージェントはデータベース スキーマを自律的に分析し、次の 2 つの重要な本番環境の最適化を適用します。
- HNSW （Hierarchical Navigable Small World）インデックス: テーブル全体をスキャンせずに、ベクトル類似度検索を大幅に高速化します。
- 宣言型リスト パーティショニング: 効率的なスケーリングとメンテナンスのために、レストラン テーブルを近隣ごとにパーティション分割します。
最後に、これらの本番環境アップグレードのアーキテクチャ上のメリットを説明する 3 つの箇条書きの概要が表示されます。
10. チャレンジ: レビューと評価を追加する
バイブ コーディングのスキルを試す番です。このチャレンジでは、ベルリンのグルメ ガイドを拡張して、顧客レビューと星評価をサポートします。
タスク
コピー＆ペーストのプロンプトに従うのではなく、Antigravity エージェント チャットで独自のプロンプトを作成 して、次の機能を実装します。
- データベース スキーマ: 新しい
reviewsテーブルをrestaurantsテーブルにリンクします。評価（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）ツールボックス を使用してこのギャップを解消しました。データベース スキーマの検査と SQL 実行をツールとして AI エージェントに直接公開することで、エージェントは次のことができるようになりました。
- 未加工の CSV データを検査して、データベース スキーマを設計します。
- DDL を生成して実行し、テーブルを作成します。
- Next.js アプリケーションで接続プールを接続します。
これにより、MCP を使用すると、IDE 内でデベロッパーが完全に制御しながら、データベース開発を会話型で高速なエクスペリエンスにできることがわかります。
データベース内 AI（Agent Platform とセマンティック検索）
このアプリケーションは、AlloyDB の Google Cloud Agent Platform とのネイティブ統合を活用して、SQL を使用してデータベース内で直接ベクトル エンベディングを生成します。
- オンライン エンベディング生成: データを外部の Python サービスにプルするのではなく、AlloyDB は SQL 関数を使用してデータベース内の text-embedding-004 モデルを呼び出します。
- セマンティック ベクトル検索: pgvector 拡張機能とコサイン距離演算子（<=>）を使用することで、エージェントはユーザーの自然言語の「雰囲気」（例: 「ロマンチックなディナー」）をレストラン カタログ内の最も近いベクトル表現と照合し、セマンティックに関連する結果をミリ秒単位で返します。
本番環境グレードのデータベース最適化（HNSW とパーティショニング）
アプリケーションが 10 万行以上にスケーリングして大量のトラフィックを処理できるように、仮想 DBA として 2 つの高度なデータベース最適化を適用しました。
- HNSW（Hierarchical Navigable Small World）インデックス: ベクトル列に HNSW インデックスを作成しました。フラット インデックスとは異なり、HNSW はマルチレイヤ グラフを構築し、高い再現率で非常に高速な近似最近傍（ANN）検索を可能にします。
- 宣言型テーブル パーティショニング: レストラン テーブルを近隣ごとにパーティション分割しました。これにより、特定のエリアを対象とするクエリはテーブル全体ではなく関連するパーティションのみをスキャンするため、ディスク I/O とクエリ レイテンシが大幅に削減されます。
アプリケーション デベロッパーは、複雑なデータベース構成、ベクトル数学、高度なインデックス戦略を避けることがよくあります。これには、専門的な DBA の知識が必要となるためです。エージェント IDE でバイブ コーディングを活用することで、このギャップを解消できます。自然言語を使用して、本番環境グレードのデータベース アプリケーションを自信を持って設計、構築、最適化できるようになりました。これにより、開発サイクルが大幅に短縮され、最も重要なこと（優れたユーザー エクスペリエンスの構築）に集中できます。
12. クリーンアップ
このラボで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。
- Google Cloud コンソールで、[リソースの管理] ページに移動します。
- プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
- ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
13. 完了
バイブ コーディングを使用して、データドリブンで AI を活用したアプリケーションを構築してデプロイできました。
このラボの内容:
- プライベート IP とパブリック IP の両方のアクセス権を持つ AlloyDB データベースをプロビジョニングしました。
- Model Context Protocol（MCP）ツールボックスを使用して、Antigravity IDE をデータベースに直接接続しました。
- 自然言語を使用して、CSV カタログを取り込み、Next.js フロントエンドをデータベースに接続し、Cloud Run にデプロイしました。
- データベース内 Agent Platform 統合を有効にして、ベクトル エンベディングを生成し、セマンティック検索を実行しました。
- 仮想 DBA として、HNSW インデックスとテーブル パーティショニングを使用して、本番環境規模のデータベースを最適化しました。
これらはすべて、AI エージェントとの自然な会話を通じて実現しました。手動で SQL を記述したり、外部データベース クライアントを開いたりする必要はありません。
詳細については、プロダクト ドキュメントをご覧ください。