
Electron App Automation
OfficialFreeSeamlessly automate any Electron desktop application.
Free · Opens the source repo
What Electron App Automation does
Electron App Automation allows developers to automate interactions with Electron-based desktop applications using the agent-browser and Chrome DevTools Protocol (CDP). This skill is particularly useful for automating tasks in popular Electron apps such as Slack, VS Code, Discord, and Figma. By leveraging the remote debugging capabilities built into Electron, users can connect to these applications and perform a variety of automated actions, from taking screenshots to filling forms and extracting data.
The core workflow involves launching the desired Electron app with the --remote-debugging-port flag, connecting the agent-browser to the specified port, and then using commands to interact with the app's elements. Users can take snapshots of the app's UI to identify interactive components, click on elements, and even manage multiple tabs or windows within the application. This makes it an ideal tool for testing, automating repetitive tasks, or gathering data from these applications.
Electron App Automation is designed for developers and testers who need to streamline their workflows with Electron applications. It is particularly beneficial in scenarios where manual interaction is time-consuming or error-prone. By automating these interactions, users can increase productivity and ensure consistency in their processes. The skill is also useful for creating automated tests for Electron applications, allowing developers to verify functionality without manual intervention.
However, it is important to note that this skill requires the Electron app to be launched with the remote debugging option enabled. If the app is already running without this flag, users will need to restart it. Additionally, while the skill supports a wide range of Electron applications, it may not be suitable for apps that do not expose CDP or for use cases outside of automation and testing.
When to use it
Use this skill when you need to automate tasks in Electron applications or perform testing on them.
When not to use it
Avoid this skill if you are working with non-Electron applications or if the app cannot be launched with the remote debugging flag.
What you can build with it
Automate Slack Interactions
Launch Slack with remote debugging and automate sending messages or taking screenshots.
Test VS Code Extensions
Connect to VS Code and automate the testing of extensions by interacting with the editor's UI.
Extract Data from Figma
Use this skill to automate data extraction from Figma designs for documentation or analysis.
How to install Electron App Automation
View source1. Install with the skills CLI
npx skills add vercel-labs/agent-browser/electron --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by vercel-labsElectron App Automation
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.
Core Workflow
- Launch the Electron app with remote debugging enabled
- Connect agent-browser to the CDP port
- Snapshot to discover interactive elements
- Interact using element refs
- Re-snapshot after navigation or state changes
# 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.png
Launching Electron Apps with CDP
Every Electron app supports the --remote-debugging-port flag since it's built into Chromium.
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
Important: 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.
Connecting
# 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 -i
After connect, all subsequent commands target the connected app without needing --cdp.
Tab Management
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*"
Webview Support
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.png
Note: Webview support works via raw CDP connection.
Common Patterns
Inspect and Navigate an App
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 navigation
Take Screenshots of Desktop Apps
agent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.png
Extract Data from a Desktop App
agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.json
Fill Forms in Desktop Apps
agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "search query"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i
Run Multiple Apps Simultaneously
Use 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 -i
Color Scheme
The default color scheme when connecting via CDP may be light. To preserve dark mode:
agent-browser connect 9222
agent-browser --color-scheme dark snapshot -i
Or set it globally:
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222
Troubleshooting
"Connection refused" or "Cannot connect"
- Make sure the app was launched with
--remote-debugging-port=NNNN - If the app was already running, quit and relaunch with the flag
- Check that the port isn't in use by another process:
lsof -i :9222
App launches but connect fails
- Wait a few seconds after launch before connecting (
sleep 3) - Some apps take time to initialize their webview
Elements not appearing in snapshot
- The app may use multiple webviews. Use
agent-browser tabto list targets and switch to the right one
Cannot type in input fields
- Try
agent-browser keyboard type "text"to type at the current focus without a selector - Some Electron apps use custom input components; use
agent-browser keyboard inserttext "text"to bypass key events
Supported Apps
Any app built on Electron works, including:
- Communication: Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
- Development: VS Code, GitHub Desktop, Postman, Insomnia
- Design: Figma, Notion, Obsidian
- Media: Spotify, Tidal
- Productivity: Todoist, Linear, 1Password
If an app is built with Electron, it supports --remote-debugging-port and can be automated with agent-browser.
Frequently asked questions about Electron App Automation
Similar skills
Agent-Browser Core
Efficient browser automation for AI agents.
Setup My IQ
Effortlessly create and update your personal context portfolio.
CRM Maintenance
Automate HubSpot updates from your calendar and emails.
Zoom MCP
Streamline access to Zoom meeting assets and recordings.
Slack Automation
Automate tasks and extract data from Slack easily.
SMB Onboard
Guides small business owners through initial tool setup.
