VS Code 1.122 は、ブラウザを「確認用」から「指示用」に近づけた
2026年5月28日に公開された Visual Studio Code 1.122 は、エージェント体験、BYOK、統合ブラウザを中心にしたアップデートです。公式のハイライトでは、Air-gapped BYOK、Browser device emulation、Rich issue reporting が挙げられています。 (Visual Studio Code 1.122)
今回いちばん実務で効きそうなのは、統合ブラウザが UI 開発のフィードバック面として使いやすくなったことです。
これまで、AI にデザイン修正を頼むときは、言葉だけで説明するか、外部ブラウザのスクリーンショットを撮って貼るか、該当 DOM や CSS を別途説明する必要がありました。「この余白が広い」「スマホ幅だとボタンが詰まっている」「このカードだけ視線が散る」のような指示は、コードだけでは伝わりにくく、スクリーンショットだけでも修正対象を特定しづらい。
1.122 では、この摩擦が少し下がりました。統合ブラウザで画面を見ながら、モバイル表示を試し、必要なスクリーンショットを Chat に渡せます。さらに現在の VS Code では、統合ブラウザ上の要素を選んで Chat の文脈に追加したり、実験的な browser tools を有効にしてエージェントにページ操作を任せたりできます。つまり、「コードを読ませる」だけでなく「画面を見せて指示する」開発体験に近づいている、という読み方ができます。 (Integrated browser, Manage context for AI)
「マウスで指示できるようになった」で合っているか
結論から言うと、方向性としては合っています。ただし、1.122 単体の新機能として正確に言うなら、次の整理が安全です。
1.122 で明確に追加されたのは、統合ブラウザの デバイスエミュレーション と Add Screenshot to Chat です。ブラウザタブの overflow menu から Show Emulation Toolbar を開くと、画面サイズ、モバイル / タッチエミュレーション、カスタム user-agent などを VS Code 内で切り替えられます。さらに、現在のブラウザ viewport のスクリーンショットを Chat に添付できるようになりました。 (Visual Studio Code 1.122)
一方で、「ページ上の要素をマウスで選んで Chat に渡す」機能は、統合ブラウザの現在のドキュメントでは Add Element to Chat として説明されています。ブラウザ toolbar のボタンから選択モードに入り、ページ上の要素を hover / select して、HTML、CSS、スクリーンショットを文脈として追加する流れです。 (Integrated browser)
また、エージェントがブラウザをクリックしたり、入力したり、Playwright code を実行したりする browser tools は、まだ experimental です。workbench.browser.enableChatTools を有効にすると、エージェントが統合ブラウザのページを読み取り、クリック、入力、hover、drag、スクリーンショット取得などを行えるようになります。 (Integrated browser)
したがって、読者向けにはこう表現するのがよさそうです。
VS Code 1.122 で、統合ブラウザはモバイル確認とスクリーンショット共有がしやすくなった。既存の要素選択や experimental な browser tools と組み合わせると、UI を見ながらマウス操作で文脈を渡し、AI にデザイン修正を依頼する流れがかなり現実的になった。
デバイスエミュレーション - スマホ確認の往復が短くなる
Web UI の修正でいちばん面倒なのは、デスクトップでは整っているのに、スマホ幅で急に崩れるパターンです。カードの高さ、ボタンの折り返し、画像の比率、ナビゲーションの余白、フォームの tap target などは、コードを読んでいるだけでは判断しづらい。
1.122 の統合ブラウザでは、VS Code の中でデバイスエミュレーションを切り替えられます。外部ブラウザを開いて DevTools を立ち上げ、別ウィンドウで Copilot Chat に戻る、という往復が短くなります。
実務では、次の流れが自然です。
pnpm devなどでローカル開発サーバーを起動する- VS Code の統合ブラウザで
localhostを開く - Show Emulation Toolbar からモバイル幅を選ぶ
- 崩れている箇所を確認する
- スクリーンショットや要素を Chat に追加する
- 「この幅で CTA が2行にならないように」「カード間の余白を詰めて」など、画面を前提に修正を依頼する
この体験の価値は、単にモバイル幅を見られることではありません。確認している画面と、AI に渡す文脈が同じ VS Code 内にあることです。UI の修正指示は言葉にすると曖昧になりがちですが、画面文脈を添えると、AI 側も「どの要素の話か」を取り違えにくくなります。
Add Screenshot to Chat - 「この見た目」をそのまま渡す
今回のもうひとつの重要な追加が Add Screenshot to Chat です。現在のブラウザ viewport をスクリーンショットとして Chat に添付できます。公式リリースノートでも、レイアウト問題のデバッグのような UI 関連タスクに有用だと説明されています。 (Visual Studio Code 1.122)
これは、デザイン修正の依頼でかなり効きます。
たとえば、言葉だけで次のように頼むとします。
トップページのヒーローが少し重いので、余白を調整してください。この指示だけでは、AI は「重い」が何を指すのか判断できません。文字サイズなのか、画像の濃さなのか、CTA の位置なのか、上部余白なのか、視覚的な密度なのかが曖昧です。
スクリーンショットを添えたうえで、次のように言うと精度が上がります。
添付したスクリーンショットのファーストビューで、見出しとCTAの間が空きすぎています。
スマホ幅ではCTAが見切れないようにしつつ、デスクトップではヒーロー下の次セクションが少し見える状態にしてください。ここまで具体化できると、AI にとっても修正対象が明確になります。特に Astro / Next.js / React のようにコンポーネントが分かれているプロジェクトでは、スクリーンショットで見た崩れと、該当コンポーネントの CSS / Tailwind class をつなげて考えやすくなります。
Add Element to Chat - 「この要素」を選んで渡す
スクリーンショットは画面全体の文脈に強い一方で、特定の要素を直したいときは、要素選択のほうが向いています。
統合ブラウザの Add Element to Chat では、ページ上の要素を選択して Chat に追加できます。設定次第で、選択した要素の CSS やスクリーンショットも含められます。これにより、「このカード」「このボタン」「このフォーム行」といった修正対象を、コード位置と見た目の両方から渡しやすくなります。 (Manage context for AI)
これは、UI 修正の指示をかなり変えます。
従来:
料金プランのカードの見た目をもう少し整理してください。統合ブラウザ文脈あり:
選択した料金プランカードを対象にしてください。
デスクトップでは3枚の高さを揃え、スマホでは価格とCTAが離れすぎないように調整してください。
既存の色は変えず、余白とタイポグラフィだけで整理してください。後者のほうが、AI に任せる範囲と守る範囲が明確です。UI 開発では「なんとなく良くして」よりも、「この要素を、ここだけ、この制約で直す」のほうが成果が安定します。統合ブラウザは、その対象指定をマウス操作で助ける道具になりつつあります。
エージェントにブラウザ操作を任せるときの注意点
browser tools を有効にすると、エージェントは統合ブラウザを開き、ページを読み、クリックや入力をし、スクリーンショットを撮れるようになります。これは、UI の確認や簡単な動作検証には非常に便利です。
ただし、現時点では experimental と明記されています。チームで使う場合は、次のような境界線を決めたほうが安全です。
- 認証済みの管理画面を共有する前に、何を見せるかを確認する
- 顧客情報、契約情報、決済情報を含む画面では使い方を限定する
- destructive な操作につながるボタンは、エージェントに押させない
- UI 修正では、エージェントの判断だけでなく、人間が最終的にブラウザで確認する
1.119 以降、VS Code はエージェントとブラウザの共有に明示的な許可を挟む方向へ寄っています。便利になったから全部見せるのではなく、必要な画面だけを渡すという使い方が実務では重要です。
BYOK まわりも企業導入では大きい
今回のもうひとつの大きな変更は、BYOK を GitHub サインインなしで使えるようになったことです。これにより、GitHub サインインができない制限環境や air-gapped に近い環境でも、自前のモデルプロバイダー、Ollama、カスタムエンドポイントを使って Chat、tools、MCP servers を動かしやすくなります。 (Visual Studio Code 1.122)
また、Custom Endpoint provider が Stable になり、Chat Completions、Responses、Messages API 互換のエンドポイントへ接続しやすくなりました。企業でモデル接続を標準化したい場合や、社内 proxy / gateway 越しにモデルを使いたい場合には、こちらも見逃せない変更です。 (Visual Studio Code 1.122)
ただし、Inline suggestions と NES は引き続き GitHub サインインが必要です。BYOK が担うのは Chat、tools、MCP servers であり、VS Code 内のすべての AI 機能がサインインなしで動くわけではありません。この点は、社内展開時に誤解されやすいところです。
まず試すなら、この順番
1.122 を入れたら、まずは統合ブラウザから試すのがよさそうです。
- Command Palette から
Browser: Open Integrated Browserを実行する - ローカルの Web アプリを開く
- overflow menu から Show Emulation Toolbar を開く
- モバイル幅で崩れを確認する
- Add Screenshot to Chat で画面を添付する
- 必要なら Add Element to Chat で対象要素を選ぶ
- 修正後、同じ統合ブラウザで再確認する
この流れが安定すると、デザイン修正の依頼がかなり具体的になります。
添付したスマホ幅のスクリーンショットを基準に、ヒーローのCTAが折り返さないようにしてください。
ただし見出しサイズは落としすぎず、次セクションの先頭が少し見える余白にしてください。このような指示は、コードだけを読ませるよりも、画面を共有したほうが通りやすい。AI コーディングでは、プロンプトの上手さだけでなく、どの文脈を渡すかが成果を左右します。1.122 の統合ブラウザ改善は、その文脈渡しをエディタ内に寄せるアップデートです。
まとめ
Visual Studio Code 1.122 は、統合ブラウザを UI 開発の実務に近づけたリリースです。
- デバイスエミュレーションで、VS Code 内からモバイル / タッチ表示を確認しやすくなった
- Add Screenshot to Chat で、現在のブラウザ表示をそのまま AI の文脈に渡せるようになった
- Add Element to Chat と組み合わせると、修正対象の要素をマウスで選んで指示しやすくなる
- experimental な browser tools を有効にすれば、エージェントにブラウザ操作や簡単な検証を任せられる
- BYOK は GitHub サインインなしでも使える範囲が広がり、制限環境での AI 開発導入に近づいた
「ブラウザでマウス操作しながら、AI にデザイン修正を指示できるようになった」という理解は、方向性としてかなり合っています。厳密には、1.122 で新しく入ったのはデバイスエミュレーションとスクリーンショット文脈化で、要素選択やエージェントのブラウザ操作は統合ブラウザ全体の文脈にある機能です。
それでも実務上の体験としては大きい。UI を見て、崩れを見つけ、画面や要素を Chat に渡し、その場で修正して、同じブラウザで確認する。このループが短くなるほど、AI コーディングは「コード生成」から「画面を一緒に見ながら直す作業」に近づいていきます。
当社は、生成 AI コンサルティング、生成 AI を活用したシステム開発、自社プロダクト開発を通じて、こうしたエディタ側の進化をチームの開発プロセスに落とし込む支援を行っています。
参照元
- Visual Studio Code 1.122 Release Notes（公式） (Visual Studio Code)
- Integrated browser（公式ドキュメント） (Visual Studio Code)
- Manage context for AI（公式ドキュメント） (Visual Studio Code)