Setting the chapter. One moment.
Skills
Chapter 5 of 8
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol.
2 minutes · 397 words · 22 sections
Automate any Electron desktop app using agent-browser. Electron apps are built on Chromium and expose a Chrome DevTools Protocol (CDP) port that agent-browser can connect to, enabling the same snapshot-interact workflow used for web pages.
# Launch an Electron app with remote debugging
open -a "Slack" --args --remote-debugging-port=9222
# Connect agent-browser to the app
agent-browser connect 9222
# Standard workflow from here
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.pngEvery Electron app supports the --remote-debugging-port flag since it’s built into Chromium.
# 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"
slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224"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=9223Important: If the app is already running, quit it first, then relaunch with the flag. The --remote-debugging-port flag must be present at launch time.
# Connect to a specific port
agent-browser connect 9222
# Or use --cdp on each command
agent-browser --cdp 9222 snapshot -i
# Auto-discover a running Chromium-based app
agent-browser --auto-connect snapshot -iAfter connect, all subsequent commands target the connected app without needing --cdp.
Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:
# List all available targets (windows, webviews, etc.)
agent-browser tab
# Switch to a specific tab by index
agent-browser tab 2
# Switch by URL pattern
agent-browser tab --url "*settings*"Electron <webview> elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with type: "webview":
# Connect to running Electron app
agent-browser connect 9222
# List targets -- webviews appear alongside pages
agent-browser tab
# Example output:
# 0: [page] Slack - Main Window https://app.slack.com/
# 1: [webview] Embedded Content https://example.com/widget
# Switch to a webview
agent-browser tab 1
# Interact with the webview normally
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.pngNote: Webview support works via raw CDP connection.
open -a "Slack" --args --remote-debugging-port=9222
sleep 3 # Wait for app to start
agent-browser connect 9222
agent-browser snapshot -i
# Read the snapshot output to identify UI elements
agent-browser click @e10 # Navigate to a section
agent-browser snapshot -i # Re-snapshot after navigationagent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.pngagent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.jsonagent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "search query"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -iUse named sessions to control multiple Electron apps at the same time:
# Connect to Slack
agent-browser --session slack connect 9222
# Connect to VS Code
agent-browser --session vscode connect 9223
# Interact with each independently
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -iThe default color scheme when connecting via CDP may be light. To preserve dark mode:
agent-browser connect 9222
agent-browser --color-scheme dark snapshot -iOr set it globally:
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222--remote-debugging-port=NNNNlsof -i :9222sleep 3)agent-browser tab to list targets and switch to the right oneagent-browser keyboard type "text" to type at the current focus without a selectoragent-browser keyboard inserttext "text" to bypass key eventsAny app built on Electron works, including:
If an app is built with Electron, it supports --remote-debugging-port and can be automated with agent-browser.
Install this repository
npx skills add vercel-labs/agent-browser/plugin marketplace add vercel-labs/agent-browserSkills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
Bash(agent-browser:*),Bash(npxagent-browser:*)skill-data/electron/SKILL.mdmain, last pushed 8 August 2026.SKILL.md, not by matching a directory convention. 2 distinct layouts observed: skill-data/*/SKILL.md, skills/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by Vercel, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree./vercel-labs/agent-browser.md, and each chapter at its own .md URL.