はじめに

2026 年 7 月 1 日 Browser tools for GitHub Copilot が VS Code で GA になりました。

一言でいうと、AI エージェントが本物のブラウザを自律的に操作できるようになった機能です。

これまで Copilot に「このページを確認して」と頼んでも、AI はコードを読むだけでしたが、これからはエージェントが自分でブラウザを開き、ボタンをクリックし、バグを見つけて、コード修正まで一貫して行えるようになります。

この記事では、実際にエージェントに電卓アプリを作らせてブラウザでテストさせた体験を書きます。

エージェントが使えるブラウザ操作ツール

外部の MCP サーバー不要、VS Code に標準搭載です。

ツール	できること
`openBrowserPage` / `navigatePage`	URL を開く・ページ遷移
`readPage` / `screenshotPage`	ページ内容の読み取り・スクリーンショット
`clickElement` / `typeInPage` / `hoverElement` / `dragElement`	クリック・入力・ホバー・ドラッグ
`handleDialog`	alert / confirm / prompt への応答
`runPlaywrightCode`	複雑な自動化をスクリプトで一括実行

やってみた

準備

VS Code を最新版にアップデートするだけで使えます（GA でデフォルト有効）。

チャットを Agent モードに切り替えて、ツールピッカーで「Built-in > Browser」が有効になっていることを確認しておきます。

Step 1：電卓アプリを作ってもらう

空フォルダを VS Code で開いて、このプロンプトを投げます。

0〜9の数字、四則演算（+−×÷）、クリア、イコールのボタンを持つ電卓を
HTML・CSS・JavaScript で作ってください。

エージェントが index.html、styles.css、script.js などを生成します。

Step 2：ブラウザで開いてもらう

電卓をブラウザで開いてください。

エージェントが openBrowserPage ツールで統合ブラウザに index.html を開きます。

VS Code の統合ブラウザ内に電卓が表示された

Step 3：テストしてもらう

全ての操作が正しく動くか確認してください。

エージェントが clickElement を呼び出して実際にボタンを押してテストします。7 + 3 = 10 の確認から始まり、各演算を順に検証していきます。

エージェントが 7→+→3→= の順にクリックし、結果が 10 であることを確認した

Step 4：バグを発見する

テストを続けていくと、エージェントが 5 ÷ 0 を実行します。

Infinity が表示された。ゼロ除算チェックが抜けていた

エージェントが「5 ÷ 0 を実行したところ Infinity が表示されました。ゼロ除算の処理が実装されていません」と報告してくれます。

Step 5：バグを直してもらう

バグを直してください。

エージェントが script.js を修正します。

  case '÷':
-   result = a / b;
-   break;
+   if (b === 0) {
+     current = 'エラー';
+     updateDisplay();
+     previous = '';
+     return;
+   }
+   result = a / b;
+   break;

修正後、エージェントがブラウザをリロードして同じ操作を再実行し、「直った」ことを確認します。

5 ÷ 0 に対して エラー が正しく表示されるようになった

プロンプトを数回投げるだけで「作る → テスト → バグ発見 → 修正 → 再テスト」のサイクルが完結しました！

プライバシーについて

「AI がブラウザを操作できるなら、自分のタブも全部見られる？」

いや、違います。設計はこうなっています。

自分が開いたタブ：ツールバーの「Share with Agent」ボタンを押さない限り、AI からは見えない
エージェントが開いたタブ：自分の Cookie・ストレージとは完全に分離されたセッションで動く
カメラ・マイク・位置情報：AI が自動で承認することはできない

ログインが必要な操作をエージェントに任せる場合は、自分でログインしたタブを Share with Agent で明示的に共有する必要があります。

まとめ

Browser tools for GitHub Copilot の GA で、フロントエンド開発の「確認する」作業を AI に任せられるようになりました。

「作ったものが動くか確認するのは自分の仕事」という前提が変わっています。試してみる価値はあると思います。