Communitygithub.com

vercel-labs/electron

Electronデスクトップアプリ（VS Code、Slack、Discord、Figma、Notion、Spotifyなど）を、agent-browser経由でChrome DevTools Protocolを使って自動化します。

electron とは？

このスキルは、agent-browserとChrome DevTools Protocol（CDP）を利用して、あらゆるElectronベースのデスクトップアプリケーションを自動化するためのものです。ElectronアプリはChromium上に構築されているため、`--remote-debugging-port`フラグで起動するとCDPポートが公開され、agent-browserがそのポートに接続して、Webページと同じようにスナップショット取得や要素操作を実行できます。SlackやVS Code、Discord、Figma、Notion、Spotifyなど、主要なElectronアプリをサポートしており、macOS、Linux、Windowsの各OSに対応しています。また、複数のウィンドウやWebビューをタブ管理で切り替えたり、複数のアプリを同時に制御するための名前付きセッションにも対応しており、デスクトップアプリのテスト、データ抽出、スクリーンショット取得、フォーム入力などを効率的に行えます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/electron
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Electronアプリの自動化

agent-browserを使用して、あらゆるElectronデスクトップアプリを自動化できます。ElectronアプリはChromium上に構築されており、Chrome DevTools Protocol（CDP）ポートを公開します。agent-browserはこのポートに接続することで、Webページと同じスナップショット操作ワークフローを実現します。

基本ワークフロー

  1. 起動：リモートデバッグを有効にしてElectronアプリを起動する
  2. 接続：agent-browserをCDPポートに接続する
  3. スナップショット：操作可能な要素を発見する
  4. 操作：要素参照を使用して操作する
  5. 再スナップショット：ナビゲーションや状態変化後に再度スナップショットを取得する
# リモートデバッグを有効にしてElectronアプリを起動
open -a "Slack" --args --remote-debugging-port=9222

# agent-browserをアプリに接続
agent-browser connect 9222

# 以降は標準のワークフロー
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

CDPを使用したElectronアプリの起動

すべてのElectronアプリは、Chromiumに組み込まれている--remote-debugging-portフラグをサポートしています。

macOS

# Slack
open -a "Slack" --args --remote-debugging-port=9222

# VS Code
open -a "Visual Studio Code" --args --remote-debugging-port=9223

# Discord
open -a "Discord" --args --remote-debugging-port=9224

# Figma
open -a "Figma" --args --remote-debugging-port=9225

# Notion
open -a "Notion" --args --remote-debugging-port=9226

# Spotify
open -a "Spotify" --args --remote-debugging-port=9227

Linux

slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224

Windows

"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223

重要： アプリがすでに起動している場合は、一度終了してからフラグを付けて再起動してください。--remote-debugging-portフラグは起動時に指定する必要があります。

接続

# 特定のポートに接続
agent-browser connect 9222

# または各コマンドで--cdpを使用
agent-browser --cdp 9222 snapshot -i

# 実行中のChromiumベースアプリを自動検出
agent-browser --auto-connect snapshot -i

connect実行後は、後続のすべてのコマンドが接続済みのアプリを対象とし、--cdpは不要です。

タブ管理

Electronアプリには複数のウィンドウやWebビューが含まれることがよくあります。タブコマンドを使用して一覧表示や切り替えが可能です：

# 利用可能なすべてのターゲット（ウィンドウ、Webビューなど）を一覧表示
agent-browser tab

# インデックスで特定のタブに切り替え
agent-browser tab 2

# URLパターンで切り替え
agent-browser tab --url "*settings*"

Webビューサポート

Electronの<webview>要素は自動的に検出され、通常のページと同じように制御できます。Webビューはタブ一覧でtype: "webview"として個別のターゲットとして表示されます：

# 実行中のElectronアプリに接続
agent-browser connect 9222

# ターゲットを一覧表示 -- Webビューはページとともに表示
agent-browser tab
# 出力例：
#   0: [page]    Slack - メインウィンドウ     https://app.slack.com/
#   1: [webview] 埋め込みコンテンツ        https://example.com/widget

# Webビューに切り替え
agent-browser tab 1

# Webビューを通常通り操作
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.png

注釈： Webビューサポートは生のCDP接続を介して機能します。

一般的なパターン

アプリの調査とナビゲーション

open -a "Slack" --args --remote-debugging-port=9222
sleep 3  # アプリの起動を待機
agent-browser connect 9222
agent-browser snapshot -i
# スナップショット出力を読み、UI要素を特定
agent-browser click @e10  # セクションに移動
agent-browser snapshot -i  # ナビゲーション後に再スナップショット

デスクトップアプリのスクリーンショット取得

agent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.png

デスクトップアプリからのデータ抽出

agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.json

デスクトップアプリでのフォーム入力

agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "検索クエリ"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i

複数アプリの同時実行

名前付きセッションを使用して、複数のElectronアプリを同時に制御できます：

# Slackに接続
agent-browser --session slack connect 9222

# VS Codeに接続
agent-browser --session vscode connect 9223

# それぞれ独立して操作
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -i

カラースキーム

CDP経由で接続した場合のデフォルトのカラースキームはlightになる場合があります。ダークモードを維持するには：

agent-browser connect 9222
agent-browser --color-scheme dark snapshot -i

または、グローバルに設定します：

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

トラブルシューティング

「Connection refused」または「Cannot connect」

  • アプリが--remote-debugging-port=NNNNで起動されていることを確認してください
  • アプリがすでに起動している場合は、終了してからフラグを付けて再起動してください
  • ポートが他のプロセスで使用されていないか確認：lsof -i :9222

アプリは起動するが接続に失敗する

  • 起動後、接続前に数秒待機してください（sleep 3）
  • 一部のアプリはWebビューの初期化に時間がかかります

スナップショットに要素が表示されない

  • アプリが複数のWebビューを使用している可能性があります。agent-browser tabでターゲットを一覧表示し、適切なものに切り替えてください

入力フィールドに入力できない

  • セレクタなしで現在のフォーカスにテキストを入力するには、agent-browser keyboard type "text"を試してください
  • 一部のElectronアプリはカスタム入力コンポーネントを使用しています。キーイベントをバイパスするにはagent-browser keyboard inserttext "text"を使用してください

サポートされているアプリ

Electron上に構築されたあらゆるアプリが動作します。例：

  • コミュニケーション： Slack、Discord、Microsoft Teams、Signal、Telegram Desktop
  • 開発： VS Code、GitHub Desktop、Postman、Insomnia
  • デザイン： Figma、Notion、Obsidian
  • メディア： Spotify、Tidal
  • 生産性： Todoist、Linear、1Password

Electronで構築されたアプリであれば、--remote-debugging-portをサポートしており、agent-browserで自動化できます。

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to

vercel-labs/agentcore

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.

vercel-labs/derive-client

Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to "derive a client", "build a CLI for <site>", "reverse engineer this site's API", "record network requests", "turn this site into an API", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.

vercel-labs/dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

vercel-labs/protected-vercel-deployments

Access and test Vercel deployments protected by Vercel Authentication, SSO, or Deployment Protection with agent-browser. Use when a preview or production URL redirects to a Vercel login page, returns a protection 401 or 403, or needs short-lived Trusted Sources OIDC authentication instead of a static bypass secret or public exception.

vercel-labs/slack

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

vercel-labs/vercel-sandbox

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

vercel-labs/webmcp-gen

Build and validate experimental WebMCP tools for an existing web page. Use when an agent needs to expose a site's real workflows as page tools, create webmcp.init.js, define deterministic checks, or compare WebMCP with accessibility-tree automation.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community