Google Antigravityでエージェントファースト開発を始めよう(2) エージェントに指示してブックマーク管理アプリを作成する

GoogleのAI開発ツール「Antigravity」を使ってエージェントファースト開発を実践する本連載。前回はAntigravityやエージェントファースト開発の概要を紹介した。今回は、実際にAntigravityを使ってプロジェクトを作成し、AIエージェントとの協働開発を体験してみよう。

この連載で作ろうとしているアプリの概要

まず、この連載を通じて作成するサンプルアプリケーションについて説明する。今回は「MyMarks」というブックマーク管理アプリを作ることを想定している。機能は最低限で、次のようなものを実装する予定である。

ブックマーク一覧の表示
新しいブックマークの追加
タグによる分類と絞り込み
データはlocalStorageに保存

技術スタックとしては、Next.js（React）とTypeScriptを使用する。コーディング作業の大半はAIに任せる形になるが、AIが生成したコードのレビューや承認は人間が行う必要があるので、使用する技術に関する基本的な知識はあった方がいい。

もし、ReactやTypeScriptをまったく知らないのであれば、知っている別のフレームワークと言語を使うように指示してみるのもいいだろう。

メニューの日本語化

インストール直後はAntigravityのメニューなどがすべて英語表記になっている。これを日本語表記に変えるにはVS Code用の日本語拡張機能を適用すればよい。拡張機能アイコンから拡張機能の管理画面を開いて、「Japanese」と検索すれば、「Japanese Language Pack for Visual Studio Code」という拡張機能がヒットする。これをインストールしておこう。

VS Codeの日本語拡張機能をインストールする

2つのビューを理解する

Antigravityには、EditorとAgent Managerという2つの画面がある。それぞれの役割を理解しておこう。

Editor

Editorは、従来のIDEに近い画面構成だ。左側にファイルエクスプローラー、中央にコードエディター、右側にエージェントパネルが配置されている。コードの詳細な編集や、ファイルの直接的な操作は、この画面で行う。

VS Codeとほぼ同じUI構成をしており、エディター内ではTab補完やインライン編集といったなじみのある機能も利用できる。ソースコードレベルの細かい調整が必要な場合や、生成されたコードを詳しく確認したい場合に使用する。

Editorの表示例

Agent Manager

Antigravity独自の画面で、複数のプロジェクトやタスクを俯瞰的に管理できるダッシュボードとなっている。Antigravityを起動すると、最初に表示されるのがこのビューだ。この画面では、エージェントとの対話や指示を行う。現在どんなタスクが実行中なのか、承認待ちのタスクはあるか、といった情報が一目で分かる。

Agent Managerに表示される要素としては次のようなものがある。

Playground：エージェントと会話形式でやりとりできる領域。ここで新しいタスクの指示を出す
ワークスペース一覧：進行中のプロジェクトが表示される
タスクステータス: 各エージェントの状態(Thinking / Waiting / Done)を確認できる
Artifacts：エージェントが生成した成果物のプレビュー

Agent Managerの表示例

ビューの使い分け

Antigravityによる開発の基本的な作業流れは次のようになる。

Agent Managerでエージェントに指示を出す
エージェントが作業を実行し、結果をArtifactsとして提示
必要に応じてEditorに切り替えてコードの詳細を確認
またAgent Managerに戻って次の指示を出す

この2つのビューは、キーボードショートカットの[Cmd]+[E]（macOS）または[Ctrl]+[E]（Windows/Linux）で切り替えられる。または、ウィンドウ右上の「Open Agent Manager」「Open Editor」ボタンでも切り替えられる。エージェントとの対話はAgent Manager、コードの詳細確認はEditorという具合に、状況に応じて使い分けよう。

作成したいアプリケーションを指示する

それでは、実際にプロジェクトを作成してみよう。まず、表示をAgent Managerに切り替える。初めて使う場合は、次のようなスタートアップ画面になっているはずだ。

Agent Managerの初期表示

「Next」ボタンを押すと、ローカルフォルダーとリモートフォルダーのどちらをワークスペースとして開くか聞かれるので、今回は「Open local folder」をクリックして、プロジェクトファイルを格納するフォルダーを開こう。筆者の例ではホームディレクトリの「workspace」の下に「MyMarks」というフォルダーを作って、これを今回のプロジェクトフォルダーとした。

プロジェクトのワークスペースとするフォルダーを開く

VS Codeには、作業するフォルダーが信頼できるユーザーによって作成されたものかを確認することで、安全性を高める機能がある。AntigravityもVS Codeベースなので、この機能が有効になっている。

もし、フォルダーを開こうとして次のような警告が出た場合は、そのフォルダーに悪意のあるファイルなどが含まれていないことを確認した上で「Yes, I trust the author」をクリックしよう。すぐ上のチェックボックスにチェックを入れておけば、次回からこの確認を省略できる。

フォルダーが信頼できるものかどうかの警告

ワークスペースを開くと、次のようにAIエージェントとの対話が可能になる。

AIエージェントとの対話を開始する

対話を始めるにあたって、使用する会話モード（Conversation mode）とAIモデル（Model）を選択する必要がある。会話モードには「Planning」と「Fast」がある。Planningは複数ステップのタスクを用意して順次実行するモードで、Fastは単独のタスクを直接実行するモードである。今回はタスクの用意も含めてすべてエージェント任せにしたいので「Planning」を選択する。

会話モードを選択

AIモデルはGemini 3を含めて複数のモデルから選択できる。AntigravityにはGemini 3の無料利用枠も含まれているが、今回は比較的無料枠の制限が緩いClaude Sonnet 4.5を使うようにする。AIモデルは、自分が加入しているAIサービスによって使い分けるといいだろう。完全無料のGPT-OSS 120Bも選べる。

AIモデルを選択

準備ができたら、作りたいアプリケーションの内容を自然言語で伝えよう。本稿の例では次のように入力した。

Next.jsとTypeScriptで、ブックマーク管理アプリを作りたい。
アプリ名はMyMarksとする。
次のような機能を実装する。
- ブックマーク一覧の表示
- 新しいブックマークの追加
- タグによる分類と絞り込み
- データはlocalStorageに保存

この指示を送信すると、早速エージェントが作業を開始する。

エージェントが作業を開始

エージェントによる開発作業

エージェントはまず、プロジェクトの全体像を考えた上で必要となるタスクのリストを作成し、続いて具体的な実装の計画を立てる。タスクのリストは「Task Artifact」として、実装計画は「Plan Artifact」として作成される。

どのようなArtifactが作成されたのかは、エージェントの出力で確認できる。各ファイルの右側にある「View」をクリックすれば、その内容が右側に表示される。

作成されたArtifactsを確認する

さて、Antigravityの初期設定の際にエージェントの動作ポリシーを「Review-driven development」にした場合、エージェントはタスクの実行途中でたびたび人間に確認を求めてくる。今回の例では、実装計画ができたタイミングで、次のように計画の承認を求められるはずだ。

実装計画が開いて確認と承認を求められる

実装計画には、実施する作業の内容や、作成するファイルとその概要、動作テストの内容などが記載されている。計画に不備がある場合には、その箇所にコメントを付けて修正の指示ができる。計画に問題がなさそうであれば、「Proceed」をクリックすればエージェントが実装を開始する。

実装の途中にも、エージェントはたびたび人間による確認を求めてくる。たとえば下図では、Next.jsの初期化用のコマンドを実行していいかどうか聞かれている。

コマンドを実行していいかどうか確認を求められている

コマンドに問題がなさそうであれば、「Accept」をクリックして作業を続けさせよう。何度も確認を求められるのは少し煩わしく感じることもあるが、AIは想定外の処理を実行しようとすることもあるので、完全には信用せずにきちんと内容を確認することをお勧めする。

コーディングが完了すると、エージェントは実装計画に従って動作テストを開始する。今回のようなWebアプリの場合、AntigravityはWebブラウザと連動して自動的にテストを実行できる。Antigravityが使うWebブラウザはGoogle Chromeに専用の拡張機能を適用したもので、通常のChromeとは異なるサンドボックスプロセスとして実行される。AntigravityはこのWebブラウザ内でクリックやテキスト入力などの操作を人間に代わって実施できる。

次のスクリーンショットは、エージェントがMyMarksの動作テストを行っている様子である。このまましばらく待っていれば、ブックマークの追加やタグ付け、タグを使った絞り込みなど、最初に指示した内容の機能が正しく動作するかを自動的にテストしてくれる。