Agents Windowの基本的なワークフロー
ここから、実際にプロジェクトを扱いながら、Agents Windowにおける基本的なワークフローを押さえていきます。
プロジェクトは、エディターウィンドウのAgentモードで作成した既存のアプリを使うことにします。アプリは、よくある「Reactによる足あとアプリ」です(図3)。もちろん、Agents Window内で作成から始めることもできます。
セッションの作成
まず必要なのは、セッションです。セッションとは、エージェントの作業単位のことで、このセッションを作るのがAgents Window利用の第一歩と言えます。
Agents Windowを初めて開いた段階では、チャットパネルには「最初に、次を選択します」と表示されているので(図4)、表1のいずれかからワークスペースを選択して新しいセッションを開始します。もし、この表示がなければセッションリストの右上にある[新規]をクリックしてください([Command]+[N]/[Ctrl]+[N]でも同様)。このように、セッションにはその作業場所となるワークスペースが必要です。
| 最初に、次を選択します | 場所 | エージェント |
|---|---|---|
| ローカル | ファイルシステムにあるフォルダー | Copilot(分離モード○)、Claude(分離モード×) |
| GitHub | GitHubにあるリポジトリ | Copilot Cloud |
| リモート(本稿作成時では実験段階) | 別コンピュータにあるワークスペースにトンネル/SSHなどで接続 | ― |
このように、ワークスペースに応じて利用できるエージェントも異なってきます。ここでは、「ローカル」でエージェントに「Copilot」を使い、既存プロジェクトを利用することを想定して作業を進めます。
なおプロジェクトは、後述する分離モードを利用するために、有効なGitリポジトリとして構成されている必要があります。
[NOTE]「GitHub」と「リモート」
「GitHub」「リモート」については解説を割愛しますが、GitHubを使う場合のエージェントは「Copilot Cloud(クラウド)」一択となっています。これはクラウドで動作するエージェントで、利用にはGitHubリポジトリでCopilot Cloud Agentを有効にしておく必要があります。「リモート」では、本連載の第12回で紹介したトンネル接続やSSH接続で、別コンピュータにあるワークスペースを利用します。
フォルダーの選択
プロジェクトのあるフォルダーをワークスペースとして選択します。図4の画面で、[ワークスペース]をクリックして、プルダウンから[ローカル]を選択後、[選択...]をクリックします。フォルダー選択のダイアログボックスが表示されるので、ワークスペースとなるフォルダーを選択します(開いたことのあるワークスペースがあれば、それらも候補として表示されるので、そこから選択することもできます)。
「このフォルダー内のファイルの作成者を信頼しますか?」と聞かれた場合には、問題ないことを確認して[フォルダーを信頼して続行]をクリックしてください。プロンプトが「新しいセッション」と表示が変わり、選択したフィルダーが表示されます。
エージェントの選択
続けて、「次を含む」からエージェントを選択します。ワークスペースで「ローカル」を選択すると、本稿作成時点では「Copilot」「Claude」「ローカル」からの選択となります(図5)。
それぞれ、以下の特性があるので、用途に応じて選ぶとよいでしょう。ここでは、分離モードを使いたいので、「Copilot」を選択しています。
- Copilot:ローカルで動作。ワークスペースでの操作に最適。分離モードを利用できる
- Claude:ローカルで動作。ワークスペースでの操作に利用可能。より深い思考が求められる場合に有効
- ローカル:ローカルLLMを指定
[NOTE]AIモデルの選択
Agentモードと同様、プロンプト部分にある[Auto]をクリックしてAIモデルを選択できます。「Auto」のままにしておくと、エージェントが適当なモデルを都度選択します。モデルによって消費するクレジット(Copilotにおける課金単位)が異なるので、課金が気になる人は「GPT-5 mini」などの消費クレジットの小さなものに切り替えておくとよいでしょう。本稿では、「Auto」のままにしておきます。
分離モードの選択
エージェントが「Copilot」の場合、分離モードが利用可能になります。分離モードとはAgents Windowの主要な機能の一つで、エージェントによるコードの変更を確定まで隔離する、既存コードの意図しない破壊を防ぐための仕組みです。プロンプトの右下に、「フォルダー」「ブランチ」と表示されているので(図6)、ここから分離モードを有効にできます。
- 作業ツリー:Gitのworktree機能を使い、mainブランチとは別の作業用ツリーを作成し、そこで作業する。作業結果はmainブランチにマージすることができる。main以外のブランチも指定可能
- フォルダー:現在のフォルダーで作業する。修正は、ただちにファイルに反映される
基本的には、Gitの機能を使う「作業ツリー」を選択した方が安全なので、本記事では「作業ツリー」を選択したものとして進めます。なお、ワークスペースがGitリポジトリとして構成されていないときには、「フォルダー」一択となります。
セッションの実行例~削除ボタンの追加
これで準備が整ったので、セッションで作業を開始します。図3を見ると、この足あとアプリには削除機能がないので、これを追加してもらいましょう。
作業内容の指示
プロンプト(「次のマイルストーンは何ですか?」と表示されている部分。表示内容は都度変化する)に、「削除ボタンを追加。」のように入力しました(図7)。
セッションリスト内にセッションが現れ、指示した内容から自動的にタイトルが生成されます。途中、外部コマンドの実行が必要な場合には、これまでのAgentモードのように確認を求めてきます。都度許可しても構いませんし、自動承認を設定して問題ないようなら、自動承認を設定してください。
図8の通り、[変更]パネルの[変更点]タブには、セッションで追加/変更された内容が表示されます。ファイルを開いて内容を確認したり、変更を破棄することもできます。変更内容が満足できないものであれば、すべてを破棄してやり直すといったことが可能です。
なお、[変更のマージ]をクリックすると、変更をコミットして作業ツリーから変更内容をmainブランチにマージできますが、マージは後ほど実行することにして、このまま作業を続行します。
[NOTE]バックグラウンドでの実行
VS Code 1.124以降では、プロンプト枠の右下にある
アイコンを[Option]/[Alt]キーを押しながらクリックすると、タスクをバックグラウンドで実行できます。複数のセッションを同時に展開できるAgents Windowが生きる機能といえます。バックグラウンドで実行する処理に承認が必要な場合、セッションリストに随時表示されるほか(図10)、プラットフォームの機能を使って通知されます。
タスクの登録と実行
プロジェクトが改変されたら、実行確認したいところです。アプリはNode.jsで動くWebアプリなので、開発サーバの起動が必要です。これもエージェントに依頼することができますが、定型の処理であればワークスペースにタスクとして登録し、それを実行した方がコスト面で有利です。
Agents Windowでは、OSのコマンドをタスクとして登録することで、セッションからそれを呼び出して実行できます。例としては、Node.jsの開発サーバ起動のnpm run devコマンド、Pythonコードのテストのためのpytestが挙げられています。これらを登録しておくと、タスクを選択するだけでセッション内で実行できます。
タスクの登録は、
アイコン(タスクおよびブラウザー)をクリックして、プルダウンから[タスクの追加...]を選択します。ダイアログボックスが開くので、タスクの名前(省略可)、実行するOSコマンド、実行オプション(セッションの作成時にこのタスクを自動的に実行するか)、保存先(ワークスペース、ユーザ)を設定します(図11)。
ここでは、アプリの実行に必要な、カレントディレクトリの移動コマンドと、開発サーバの起動コマンドを設定しました。設定は、プロジェクトのtasks.jsonファイルに保存されます。
タスクの呼び出しは、同じく
アイコン(タスクおよびブラウザー)をクリックして、プルダウンから追加したタスク(ここでは「開発サーバの起動」)を選択するだけです(図12)。
組み込みブラウザによるアプリの実行
このケースのようにプロジェクトがWebアプリである場合、開発サーバ起動時に表示されるURLを使って、組み込みブラウザで動作確認できます。図12のURLを[Command]+クリック/[Ctrl]+クリックするか、
アイコン(タスクおよびブラウザー)をクリックして、プルダウンから[ブラウザーを開く]を選択します。外部のブラウザではなく、組み込みのブラウザが起動します(図13)。削除ボタンも、しっかり追加されていて、機能します。
Agents Window内部でブラウズも完結させることで、たとえば表示されたページの特定の要素をチャットにアタッチすることもでき、よりエージェントの支援を受けやすくなっています。
