はじめに — AIがデスクトップアプリを「触れる」時代
Claude Codeって、ターミナルの中では最強クラスに賢いんですよ。
ファイルを読んで、コードを書いて、コマンドを叩いて。
でもね、ちょっと考えてみてください。
VS Codeの画面を見て、ボタンをクリックする。
Figmaのデザインを確認して、要素を操作する。
こういうことって、今までClaude Codeにはできなかったんです。
ターミナルの外にある「GUI」の世界は、AIにとってずっと見えない領域だった。
ところが最近、Electron Skill っていう仕組みが出てきて、この壁がちょっと崩れ始めてるんです。
「AIがデスクトップアプリのUIを認識して、クリックしたりテキスト入力したりできる」
...って聞くと、なんかSFっぽいですよね。
でもこれ、もう動くんです。実際に試してみたので、その全記録を共有します。
この記事で伝えたいこと
この記事では、僕が実際にElectron Skillを導入して、VS CodeやAntigravity（VS Code Fork）をClaude Codeから操作できるようにした手順を、そのまま再構成してます。
成功した話だけじゃなくて、Figmaで盛大に失敗した話 も包み隠さず書いてます。
「へー、こんなことできるんや」って思ってもらえたら嬉しいし、
「自分のプロジェクトでも試してみよ」ってなったら、もっと嬉しい。
そもそもElectron Skillって何なのか
ここ、ちょっと丁寧に説明させてください。
Electron Skillっていうのは、Claude Codeに「Electronアプリを操作する能力」を追加するプラグイン みたいなもの。
もうちょっと具体的に言うと、裏側では CDP（Chrome DevTools Protocol） っていうプロトコルを使ってます。これ、Chromeの開発者ツールがブラウザと通信するときに使ってるやつと同じ仕組みなんですよ。
ここがポイントなんですけど、ElectronアプリっていうのはChromiumを内蔵して動いてるんです。つまり、中身はChromeの親戚みたいなもの。だからChrome向けのCDPがそのまま使える。VS CodeもSlackデスクトップ版もDiscordも、全部Electronベースなので、理屈の上ではCDPで通信できるわけです。
整理すると、こういう流れになります。
Claude Code
↓ （コマンド実行）
agent-browser CLI
↓ （CDP通信）
Electronアプリ（Chromium内蔵）
↓ （UI要素をref番号で公開）
ボタン、テキストボックス、メニュー...
- Electronアプリを「CDPポート付き」で起動する
-
agent-browserっていうCLIツールで接続する - UI要素の一覧（スナップショット）を取得する
- ref番号を指定して、クリックや入力を実行する
AIがアプリのUIを「見て」「触る」ためのパイプラインが、これで繋がるわけです。
前提条件 — 始める前に確認しておくこと
始める前に、以下が揃ってるか確認しておいてください。
| 項目 | 要件 |
|---|---|
| Node.js / npm | インストール済み（npx が使えること） |
| Claude Code | インストール済み（/opt/homebrew/bin/claude 等） |
| 対象リポジトリ | 任意のプロジェクトディレクトリ |
特別なものは要らないです。Node.jsとClaude Codeが入ってれば、もうスタートできます。
Step 1：Electron Skill のインストール — 思ったより簡単
まずはプロジェクトディレクトリに移動して、npx skills add を実行します。
cd /Users/yourname/workspace/your-project
npx skills add vercel-labs/agent-browser --skill electron --yes
ここでポイントなのが --yes フラグ。
これを付けないとインタラクティブモードになって、「どのエージェント用に設定しますか？」って聞かれるんですよ。Claude Code、Cursor、Codex...みたいな選択肢が出てくる。
--yes を付ければ、Claude Code用に自動設定してくれるので、余計なやりとりなしで一発で完了します。
インストール後のディレクトリ構造
実行すると、こんな感じでファイルが自動生成されます。
プロジェクトルート/
├── .agents/
│ └── skills/
│ └── electron/
│ └── SKILL.md ← AIが読む指示書
├── .agent/
│ └── skills/
│ └── electron/
│ └── SKILL.md ← Cursor等のエージェント用（同内容）
├── .claude/
│ └── skills/
│ └── electron → ../../.agents/skills/electron （symlink）
└── skills.json ← スキル管理のメタデータ
ここで注目してほしいのが SKILL.md というファイル。
これ、人間が読むドキュメントじゃなくて、AIが読むための指示書 なんです。Claude Codeがこのファイルを読んで「あ、Electronアプリを操作できるんやな」って理解する。スキルの本体はこの .md ファイルに書かれた自然言語の指示、っていうのが面白いところ。
skills.json の中身はこんな感じです。
{
"version": 1,
"skills": {
"electron": {
"source": "vercel-labs/agent-browser",
"sourceType": "github",
"computedHash": "ece34a633aa7b40e..."
}
}
}
どのGitHubリポジトリからスキルを取得したかの情報と、computedHash が入ってます。このハッシュ値は スキルが改ざんされていないことを検証するためのもの で、サプライチェーン攻撃（第三者がスキルの中身を書き換えて悪意あるコードを仕込む攻撃）への対策になってます。外部からスキルを取得する仕組みだからこそ、こういう整合性チェックは地味に大事。
Step 2：agent-browser CLI のインストール — ここ忘れがち
ここ、ちょっと注意が必要なポイント。
Step 1でインストールした SKILL.md は、あくまで AIへの指示書。実際にElectronアプリと通信するための CLIツール は、別途インストールが必要なんです。
npm install -g agent-browser
「Skill入れたのに動かんやん」ってなる人、だいたいここを見落としてるかなと。
インストール確認
which agent-browser
# → /Users/yourname/.nodebrew/current/bin/agent-browser
agent-browser --version
# → agent-browser 0.15.2
バージョン番号が表示されたら準備完了。
agent-browser の主要コマンド一覧
ここで agent-browser で使える主なコマンドを整理しておきます。後のステップで実際に使うので、頭の片隅に入れておいてください。
| コマンド | 説明 |
|---|---|
connect <port> |
指定したCDPポートに接続する |
snapshot -i |
全UI要素をref番号付きで一覧表示する |
click @eXX |
指定したref番号の要素をクリックする |
fill @eXX "テキスト" |
指定した入力欄にテキストを入力する（標準のHTMLinput要素向け） |
keyboard inserttext "テキスト" |
キーボード入力をシミュレートする（カスタムエディタ領域向け） |
screenshot ファイル名.png |
現在の画面をスクリーンショットとして保存する |
tab |
開いているタブの一覧を表示する |
fill と keyboard inserttext の違いは後で詳しく説明しますが、ざっくり言うと 標準的なHTML input要素には fill、独自実装のエディタ領域（VS Codeのチャット欄など）には keyboard inserttext と覚えておけば大丈夫です。
Step 3：動作確認 — 実際にアプリを操作してみる
さて、ここからが本番。
実際にElectronアプリに接続して、UIを操作してみます。
VS Code での成功例
まずはVS Code。これが一番わかりやすい成功例です。
① アプリの終了（起動中なら一旦閉じる）
CDPポート（先ほど説明した、アプリと通信するためのポート）を有効にするには、アプリ起動時にオプションを渡す必要があります。なので、既に起動してる場合は一旦終了させます。
# 起動中のVS Codeプロセスを終了させるコマンド
pkill -f "Visual Studio Code" 2>/dev/null
# VS Codeのサブプロセスも終了
pkill -f "Code Helper" 2>/dev/null
# プロセスが完全に終了するまで少し待つ
sleep 3
pkillは指定した名前に一致するプロセスを終了するコマンドです。2>/dev/nullはエラーメッセージを非表示にしてるだけなので、対象プロセスがなくても問題ありません。VS Code以外のアプリが終了することはないので安心してください。
② CDPポート付きで再起動
open -a "Visual Studio Code" --args --remote-debugging-port=9223
--remote-debugging-port=9223 がミソ。これで「ポート9223でCDP接続を受け付けるよ」とVS Codeに伝えてます。
ポート番号は9222〜9229あたりで好きな番号を使えます。複数のアプリを同時に操作したい場合は、アプリごとに別のポート番号を割り当ててください。
③ CDPポートが開いたか確認
起動直後はまだポートが開いてないことがあるので、数秒待ってから確認します。
# アプリの起動完了を待つ（環境によっては長めに取ってOK）
sleep 8
curl -s http://127.0.0.1:9223/json/version
成功すると、こんなJSONが返ってきます。
{
"Browser": "Chrome/142.0.7444.235",
"Protocol-Version": "1.3",
"User-Agent": "... Code/1.108.0 Chrome/142.0.7444.235 Electron/39.2.7 ...",
"V8-Version": "14.2.231.21"
}
ElectronのバージョンとかChromiumのバージョンが見えてますよね。先ほど「ElectronはChromiumを内蔵している」って説明しましたけど、まさにその証拠がここに出てます。これが返ってくれば、CDPポートは正常に開いてる状態。
何も返ってこない場合は、sleep の秒数を増やしてみてください。マシンスペックによっては起動に時間がかかることもあるので。
④ agent-browserで接続
agent-browser connect 9223
# → ✓ Done
✓ Done が出たら接続完了。ここまでは意外とサクッといけます。
⑤ スナップショットの取得（ここが面白い）
agent-browser snapshot -i
これを実行すると、VS Codeの 全UI要素がref番号付きで一覧表示 されます。
- button "前に戻る (⌃-)" [ref=e1]
- button "次に進む (⌃⇧-)" [ref=e2] [disabled]
- checkbox "プライマリ サイド バーを切り替える (⌘B)" [ref=e8] [checked]
- textbox "ターミナル 1 の..." [ref=e65]
- button "新しいチャット (⌘N)" [ref=e67]
...
正直、初めてこの出力を見たとき、ちょっと感動しました。
AIから見たら、VS Codeのボタンもテキストボックスも、全部 ref=eXX っていう番号で識別できるオブジェクトになってるんです。
人間が「あのボタンをクリックして」って言う代わりに、AIは「@e67 をクリックして」って指定できる。
GUIが、APIになった瞬間。
ただし一つ大事なこと。ref番号はアプリを起動するたびに変わる可能性があります。 「前回 e67 だったから今回も e67」とは限らない。なので必ず 毎回 snapshot -i で確認してから操作する という手順を踏んでください。これ、省略するとまったく関係ないボタンを押しちゃうことになるので、要注意。
⑥ 操作の実行
ref番号がわかれば、あとは操作するだけ。
# クリック
agent-browser click @e67
# テキスト入力
agent-browser fill @e80 "こんにちは"
# スクリーンショット撮影
agent-browser screenshot vscode-connected.png
# → ✓ Screenshot saved to vscode-connected.png
ここで一つ注意点。
VS Codeのチャット欄みたいな カスタム入力コンポーネント では、fill コマンドが効かないことがあるんです。
なぜかというと、fill はHTMLの標準的な <input> や <textarea> 要素に対して値を設定するコマンドなんですよ。でもVS Codeのチャット欄は、内部的にはMonaco Editor（VS Codeのコアであるコードエディタ）をベースにしたカスタムコンポーネントで、標準的なinput要素ではない。なので fill が「この要素、入力先として認識できんぞ」ってなる。
その場合は keyboard コマンドを使います。
agent-browser keyboard inserttext "テキスト"
keyboard inserttext は、OSレベルのキーボード入力をシミュレートするので、要素の実装方式に関係なくテキストを入力できる。ただしその分、事前にクリックして対象の入力欄にフォーカスを当てておく 必要があります。
まとめると、こういう使い分けです。
| 状況 | 使うコマンド |
|---|---|
| 標準的な入力フォーム（検索バー等） | fill @eXX "テキスト" |
| カスタムエディタ領域（チャット欄、コードエディタ等） |
click @eXX → keyboard inserttext "テキスト"
|
fill が効かなくて「あれ？」ってなったら、keyboard inserttext を試してみてください。これ、地味にハマりポイントなので覚えておいて損はないかなと。
Antigravity（VS Code Fork）での成功例
VS Codeのフォークである Antigravity でも試してみました。
# ① 終了
osascript -e 'quit app "Antigravity"'
# ② CDPポート9222で再起動
sleep 3
open -a "Antigravity" --args --remote-debugging-port=9222
# ③ 接続
sleep 5
agent-browser connect 9222
# → ✓ Done
VS Codeとほぼ同じ手順で接続できます。
面白いのは、タブの一覧も取得できる こと。
agent-browser tab
# → [0] mirror-app - vscode-file://...
# [1] electron-skills-test-1 — ELECTRON-SKILL-GUIDE.md - vscode-file://...
複数タブの切り替えも含めて、完全に動作しました。
# まず snapshot で最新のref番号を確認
agent-browser snapshot -i
# ref番号を確認してから操作
agent-browser click @e86 # チャット入力欄をクリック
agent-browser fill @e86 "こんにちは" # テキスト入力
agent-browser click @e93 # 送信ボタンをクリック
VS Code系のフォークなら、基本的に同じ手順でいけそうです。
Figma での失敗例 — ここは正直に書く
で、ここからがちょっと悲しい話。
「VS Codeでうまくいったんやから、Figmaもいけるやろ」って思ったんですよ。
"/Applications/Figma.app/Contents/MacOS/Figma" --remote-debugging-port=9225 &
sleep 8
curl -s http://127.0.0.1:9225/json/version
# → レスポンスなし
curl -s http://127.0.0.1:9225/json/list
# → レスポンスなし
何も返ってこない。
--remote-debugging-port フラグだけじゃなくて、ELECTRON_ENABLE_REMOTE_DEBUGGING=1 っていう環境変数とか、--inspect フラグとか、思いつく方法は全部試しました。
結果、全部ダメ。
Figma v126.x では、CDPポートがセキュリティ制限でブロックされてる んです。
これ、アプリ側が意図的に塞いでるので、こちら側でどうにかできる問題じゃない。考えてみれば当然で、デザインツールに外部からのリモート操作を許可するのはセキュリティリスクが高い。Figmaの設計判断として理にかなってます。
代替手段としては、ブラウザ版のFigma（figma.com）をChrome経由で操作する っていう方法があります。Chrome自体をCDPポート付きで起動して、ブラウザ内のFigmaを操作する形。デスクトップアプリにこだわらなければ、こっちのルートでいけるはず。
正直、ここは期待してただけにけっこう残念やったんですけど、逆に 「全部のElectronアプリで使えるわけじゃない」 っていう現実がわかったのは収穫かなと。
アプリ互換性まとめ
| アプリ | バージョン | CDP接続 | 備考 |
|---|---|---|---|
| VS Code | 1.108.0 (Electron 39.2.7) | 成功 | snapshot, click, fill, screenshot 全て動作 |
| Antigravity | VS Code Fork | 成功 | 複数タブ切替を含め完全動作 |
| Figma | v126.x | 失敗 | CDPポートがセキュリティ制限でブロック |
結局のところ、アプリがCDPポートを開放してくれるかどうか がすべて。
技術的にはElectron＝Chromium内蔵なので理屈上はCDPが使えるんですけど、アプリ側がセキュリティ上の理由でポートを塞いでいる場合はどうしようもない。試す前に curl でCDPエンドポイントの応答を確認する、というのが最初のステップになります。
最小手順まとめ — コピペで使えるクイックスタート
ここまで読んでくれた人のために、最小手順をまとめておきます。
# 1. Skillインストール（プロジェクトで1回だけ）
npx skills add vercel-labs/agent-browser --skill electron --yes
# 2. CLIインストール（マシンで1回だけ）
npm install -g agent-browser
# 3. 使うとき（毎回）
open -a "アプリ名" --args --remote-debugging-port=9222
sleep 5
agent-browser connect 9222
agent-browser snapshot -i # UI要素取得（ref番号は毎回確認すること）
agent-browser click @eXX # 操作（XXはsnapshotで確認した番号）
これだけ。めちゃくちゃシンプル。
おわりに — GUIの壁が崩れ始めている
ここまで読んでくださった方、ありがとうございます。
今回の記事で伝えたかったのは、「AIがGUIを操作できるようになる」っていうのは、思ってる以上に大きな変化かもしれない ということ。
今までAIエージェントって、基本的にCLIの世界で生きてたんですよね。ファイル操作、コマンド実行、API呼び出し。全部テキストベース。
でも、Electron Skillによって、GUIという人間の世界 にAIが一歩踏み込んできた。
もちろんまだ制約はある。Figmaみたいに接続できないアプリもあるし、カスタムコンポーネントで fill が効かないケースもある。
でもね、この「一歩」って、かなりデカい一歩な気がするんです。
将来的には、Claude Codeに「VS Codeでこのファイル開いて、ここの設定変えといて」とか、「Slackアプリ開いてこのチャンネルにメッセージ送っといて」とか、そういう指示が普通にできるようになるかもしれない。
まずやってみる3ステップ
この記事を読んで興味を持った方は、まずこの3つだけ試してみてください。
-
VS Codeで接続してみる。 上の手順通りにCDPポート付きで起動して、
agent-browser connectする。ここまで5分もかからないです。 -
snapshot -iを眺めてみる。 自分が普段使ってるVS Codeが、ref番号付きのオブジェクトの集合体として見える体験は、ちょっと世界の見え方が変わります。 -
1つだけクリックしてみる。 どのボタンでもいいので、
agent-browser click @eXXを実行してみる。AIがGUIを操作するっていうのがどういうことなのか、体感としてわかるはず。
「へー、こんな感じか」って体感するだけでも、十分に価値があるかなと。
何か詰まったところがあれば、コメント欄で聞いてもらえたら、わかる範囲でお答えします。
一緒に、AIとGUIの新しい関係を探っていきましょか。