electron

Overview

What the electron skill does

electron スキルは、agent-browser と Chrome DevTools Protocol (CDP) を利用して、既存の Electron デスクトップアプリケーションをエージェントから自動化できるようにします。VS Code、Slack、Discord、Figma、Notion、Spotify など、多くの人気ツールは Electron 製で、内部的には Chromium 上で動作しています。DevTools ポートを公開すれば、ブラウザ上のウェブサイトとほぼ同じように制御できます。

このスキルを使うと、エージェントは次のようなことができます:

• リモートデバッグを有効にした状態で Electron アプリを起動する
• agent-browser 経由でアプリの CDP ポートに接続する
• 現在の UI を把握するために スナップショット を取得する
• 安定した要素参照を使って、要素を 操作 する（クリック、入力、ナビゲーションなど）
• 状態が変化するたびに再度スナップショットを取り、複数ステップのワークフローを継続する

Who this skill is for

electron スキルは、次のようなケースで利用に向いています:

• Electron デスクトップアプリ内のワークフローを自動化 したい（例: Slack メッセージ送信、Notion ワークスペースの操作、VS Code コマンドの実行）
• Electron アプリを含めた エンドツーエンドテスト やリグレッションチェックを行いたい
• Web 自動化と組み合わせて、Electron アプリも含めた クロスアプリのワークフロー自動化 を行いたい
• GUI レコーダーや独自 API ではなく、CDP ベースの CLI 中心の自動化 を好む

このスキルは、次のようなユーザーやチームに適しています:

• Bash を使って macOS / Linux 上でシェルコマンドを実行することに慣れている
• agent-browser や同様の CDP ツールを使ったことがある
• ネイティブ OS のウィジェットを直接スクリプトするのではなく、Electron アプリを「ブラウザターゲット」として扱う考え方に馴染みがある

When electron is not a good fit

electron スキルが適していないケース:

• 操作したいアプリが Electron 製ではない、あるいは DevTools ポートを公開して いない
• アプリウィンドウの外側（システムダイアログ、Electron 以外でレンダリングされるファイルピッカーなど）での深い OS レベルの操作が必要な場合
• Electron アプリを 開発 したい（このスキルは既存アプリの 自動化 用であり、新規開発用ではありません）
• ターミナル操作を一切せず、完全に GUI だけで完結する自動化ツールを求めている場合

このような場合は、別のデスクトップ自動化ツールや OS ネイティブのスクリプティングソリューションを検討してください。

How the automation model works

内部的には、electron スキルは agent-browser による Web 自動化と同じ、スナップショット/インタラクトのパターンで動作します:

1. Electron アプリを --remote-debugging-port を付けて起動 し、CDP を公開する
2. agent-browser からそのポートへ 接続 する
3. 現在の DOM / アクセシビリティツリーを取得するために Snapshot を実行する
4. agent-browser のコマンドと要素参照を使って、UI 要素に Interact（操作）する
5. 主要な状態変化や画面遷移ごとに Re-snapshot して最新状態を取得する

CDP ベースであるため、エージェントからはアプリがブラウザページと同様に見え、セッションをまたいでも再現性の高いスクリプト可能なフローを構築できます。

How to Use

1. Install the electron skill

electron スキルをエージェント環境で使えるようにするには、vercel-labs/agent-browser リポジトリからインストールします:

npx skills add https://github.com/vercel-labs/agent-browser --skill electron

このコマンドで electron スキル定義が取り込まれ、エージェントは次のようなコマンドを利用できるようになります:

• Bash(agent-browser:*)
• Bash(npx agent-browser:*)

あわせて、agent-browser をローカルにインストールするか、npx で実行できる状態にしておいてください。このスキルが利用するコマンドを実際に動かすために必要です。

2. Confirm prerequisites

electron スキルに依存するフローを実行する前に、以下を確認してください:

• open や bash などのコマンドを実行できるシェルを備えた macOS または Linux 環境がある
• 対象アプリが実際に Electron ベース である（Slack、VS Code、Discord、Figma、Notion、Spotify など）
• アプリを --remote-debugging-port フラグ付きで起動できる（Chromium/Electron に標準で備わっている機能です）

このフラグを付けてアプリを起動できない場合、エージェントは CDP で接続できません。

3. Launch an Electron app with CDP enabled

重要なのは、アプリを remote debugging port を有効にした状態で起動することです:

# 例: macOS の Slack
open -a "Slack" --args --remote-debugging-port=9222

このパターンは、他の Electron アプリにも適用できます。必要に応じてアプリ名を変更してください。

起動に成功すると、指定したポート（この例では 9222）で CDP のエンドポイントが公開されます。

4. Connect agent-browser to the running app

リモートデバッグ有効でアプリを起動したら、agent-browser から接続します:

agent-browser connect 9222

接続が成功すると、Electron アプリのウィンドウに対して、通常のスナップショット取得や操作コマンドを実行できるようになります。

5. Run the standard snapshot–interact workflow

ここまで設定できれば、Electron アプリをほぼブラウザページと同じように扱えます:

# 操作可能な要素を探索
agent-browser snapshot -i

# 特定の要素参照をクリック（例: @e5）
agent-browser click @e5

# 現在のウィンドウのスクリーンショットを取得
agent-browser screenshot slack-desktop.png

典型的なエージェント実行フローでは、次のように動きます:

• snapshot を呼び出して、現在の UI 状態を把握する
• @e5 や @e12 などの要素参照を元に、クリックや文字入力の対象を選ぶ
• 画面遷移やモーダルの開閉など、大きな変化があったら再度 snapshot を実行する

6. Integrate into larger desktop and workflow automation

electron スキルは、複数のアプリを組み合わせた自動化を行う際に特に有用です。たとえば、エージェントは次のようなフローを構成できます:

• Chrome 上の Web アプリからデータを取得する
• Slack（Electron）を開いて、整形したステータスメッセージを投稿する
• VS Code（Electron）に切り替えて、ビルドのトリガーやタスクの実行を行う

すべて CDP と agent-browser 経由で動作するため、CLI からスクリプトとして記述することも、LLM ベースのエージェントに自動オーケストレーションさせることも可能です。

7. Adapting to your environment

リポジトリのサンプルは汎用的な Electron パターンにフォーカスしていますが、実際には次の点を自分の環境に合わせて調整してください:

• 対象アプリケーション（Slack、Discord、Notion、自社開発の Electron ツールなど）
• ポート番号（空いているポートを選択。9222 がよく使われますが必須ではありません）
• OS コマンド（macOS では open、Linux ではそれぞれの起動コマンド）

起動コマンドをカスタマイズする際も、--remote-debugging-port フラグだけは必ず残してください。これがないと、electron スキルが agent-browser 経由で接続できなくなります。

FAQ

Is the electron skill only for Slack and VS Code?

いいえ。electron スキルは、--remote-debugging-port を付けて起動できる あらゆる Electron アプリ で動作します。Slack や VS Code は代表例に過ぎず、同じパターンは Discord、Figma、Notion、Spotify など、多くの Electron ベースツールにもそのまま適用できます。

How does electron know it is talking to an Electron app and not a website?

自動化の観点では、Electron アプリは Chromium ブラウザと同様の Chrome DevTools Protocol インターフェースを公開します。指定したポートに接続すると、agent-browser はターゲットをブラウザページと同じように扱います。electron スキルは、そのポートが Electron ベースの Chromium インスタンスに紐づいていることを前提に動作します。

Do I need to modify the Electron app’s source code?

いいえ。アプリのソースコードを変更する必要は ありません。既存アプリを --remote-debugging-port フラグ付きで起動し、CDP を公開するだけで動作します。OS の起動コマンドに追加の引数を渡せる形であれば、市販のパッケージ済み Electron アプリでもそのまま利用できます。

Can the electron skill automate system dialogs or non-Electron windows?

electron スキルの対象は、Chromium バックエンドを持ち CDP 経由でアクセスできる Electron ウィンドウ に限られます。OS ネイティブのダイアログや、Electron 外のウィンドウは基本的にこのインターフェースからは見えません。そのような自動化には、別途 OS レベルの自動化ツールが必要です。

What commands does the skill rely on?

スキルメタデータによると、electron は次のコマンドを使用できます:

• Bash(agent-browser:*)
• Bash(npx agent-browser:*)

つまりエージェントは、connect、snapshot、click、screenshot などのサブコマンドを含む agent-browser コマンドを、直接または npx 経由で実行できます。

How do I troubleshoot connection issues on the CDP port?

エージェントが接続できない場合は、次の点を確認してください:

• アプリを --remote-debugging-port=<port> 付きで起動しているか
• agent-browser connect で指定したポート番号が、起動時のポートと一致しているか
• アプリのインスタンスが複数起動していないか（余分なインスタンスを終了し、デバッグフラグ付きで再起動してください）

ポートがブロックされている、またはすでに使用中の場合は、利用可能な別のポートを選び、起動コマンドと接続コマンドの両方をそのポート番号に合わせて更新します。

When should I choose another skill instead of electron?

次のようなケースでは、electron 以外のスキルを選ぶと良いでしょう:

• ターゲットが通常の ブラウザ上のウェブサイト である（ブラウザ向け自動化用のスキルを使用）
• ファイル操作やシステム設定の変更、非 Electron アプリの操作など、OS レベルのアクションが必要
• 主な目的が Electron アプリの「自動化」ではなく「開発」である

electron スキルが最も効果を発揮するのは、既存の Electron デスクトップアプリを、より広いデスクトップ/ワークフロー自動化の一部として CDP ベースで自動化したい 場面です。