1---
2name: electron
3description: 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.
4allowed-tools: Bash(agent-browser:*), Bash(npx agent-browser:*)
5---
6 
7# Electron App Automation
8 
9Automate 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.
10 
11## Core Workflow
12 
131. **Launch** the Electron app with remote debugging enabled
142. **Connect** agent-browser to the CDP port
153. **Snapshot** to discover interactive elements
164. **Interact** using element refs
175. **Re-snapshot** after navigation or state changes
18 
19```bash
20# Launch an Electron app with remote debugging
21open -a "Slack" --args --remote-debugging-port=9222
22 
23# Connect agent-browser to the app
24agent-browser connect 9222
25 
26# Standard workflow from here
27agent-browser snapshot -i
28agent-browser click @e5
29agent-browser screenshot slack-desktop.png
30```
31 
32## Launching Electron Apps with CDP
33 
34Every Electron app supports the `--remote-debugging-port` flag since it's built into Chromium.
35 
36### macOS
37 
38```bash
39# Slack
40open -a "Slack" --args --remote-debugging-port=9222
41 
42# VS Code
43open -a "Visual Studio Code" --args --remote-debugging-port=9223
44 
45# Discord
46open -a "Discord" --args --remote-debugging-port=9224
47 
48# Figma
49open -a "Figma" --args --remote-debugging-port=9225
50 
51# Notion
52open -a "Notion" --args --remote-debugging-port=9226
53 
54# Spotify
55open -a "Spotify" --args --remote-debugging-port=9227
56```
57 
58### Linux
59 
60```bash
61slack --remote-debugging-port=9222
62code --remote-debugging-port=9223
63discord --remote-debugging-port=9224
64```
65 
66### Windows
67 
68```bash
69"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
70"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223
71```
72 
73**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.
74 
75## Connecting
76 
77```bash
78# Connect to a specific port
79agent-browser connect 9222
80 
81# Or use --cdp on each command
82agent-browser --cdp 9222 snapshot -i
83 
84# Auto-discover a running Chromium-based app
85agent-browser --auto-connect snapshot -i
86```
87 
88After `connect`, all subsequent commands target the connected app without needing `--cdp`.
89 
90## Tab Management
91 
92Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:
93 
94```bash
95# List all available targets (windows, webviews, etc.)
96agent-browser tab
97 
98# Switch to a specific tab by index
99agent-browser tab 2
100 
101# Switch by URL pattern
102agent-browser tab --url "*settings*"
103```
104 
105## Webview Support
106 
107Electron `<webview>` elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with `type: "webview"`:
108 
109```bash
110# Connect to running Electron app
111agent-browser connect 9222
112 
113# List targets -- webviews appear alongside pages
114agent-browser tab
115# Example output:
116#   0: [page]    Slack - Main Window     https://app.slack.com/
117#   1: [webview] Embedded Content        https://example.com/widget
118 
119# Switch to a webview
120agent-browser tab 1
121 
122# Interact with the webview normally
123agent-browser snapshot -i
124agent-browser click @e3
125agent-browser screenshot webview.png
126```
127 
128**Note:** Webview support works via raw CDP connection.
129 
130## Common Patterns
131 
132### Inspect and Navigate an App
133 
134```bash
135open -a "Slack" --args --remote-debugging-port=9222
136sleep 3  # Wait for app to start
137agent-browser connect 9222
138agent-browser snapshot -i
139# Read the snapshot output to identify UI elements
140agent-browser click @e10  # Navigate to a section
141agent-browser snapshot -i  # Re-snapshot after navigation
142```
143 
144### Take Screenshots of Desktop Apps
145 
146```bash
147agent-browser connect 9222
148agent-browser screenshot app-state.png
149agent-browser screenshot --full full-app.png
150agent-browser screenshot --annotate annotated-app.png
151```
152 
153### Extract Data from a Desktop App
154 
155```bash
156agent-browser connect 9222
157agent-browser snapshot -i
158agent-browser get text @e5
159agent-browser snapshot --json > app-state.json
160```
161 
162### Fill Forms in Desktop Apps
163 
164```bash
165agent-browser connect 9222
166agent-browser snapshot -i
167agent-browser fill @e3 "search query"
168agent-browser press Enter
169agent-browser wait 1000
170agent-browser snapshot -i
171```
172 
173### Run Multiple Apps Simultaneously
174 
175Use named sessions to control multiple Electron apps at the same time:
176 
177```bash
178# Connect to Slack
179agent-browser --session slack connect 9222
180 
181# Connect to VS Code
182agent-browser --session vscode connect 9223
183 
184# Interact with each independently
185agent-browser --session slack snapshot -i
186agent-browser --session vscode snapshot -i
187```
188 
189## Color Scheme
190 
191The default color scheme when connecting via CDP may be `light`. To preserve dark mode:
192 
193```bash
194agent-browser connect 9222
195agent-browser --color-scheme dark snapshot -i
196```
197 
198Or set it globally:
199 
200```bash
201AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222
202```
203 
204## Troubleshooting
205 
206### "Connection refused" or "Cannot connect"
207 
208- Make sure the app was launched with `--remote-debugging-port=NNNN`
209- If the app was already running, quit and relaunch with the flag
210- Check that the port isn't in use by another process: `lsof -i :9222`
211 
212### App launches but connect fails
213 
214- Wait a few seconds after launch before connecting (`sleep 3`)
215- Some apps take time to initialize their webview
216 
217### Elements not appearing in snapshot
218 
219- The app may use multiple webviews. Use `agent-browser tab` to list targets and switch to the right one
220 
221### Cannot type in input fields
222 
223- Try `agent-browser keyboard type "text"` to type at the current focus without a selector
224- Some Electron apps use custom input components; use `agent-browser keyboard inserttext "text"` to bypass key events
225 
226## Supported Apps
227 
228Any app built on Electron works, including:
229 
230- **Communication:** Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
231- **Development:** VS Code, GitHub Desktop, Postman, Insomnia
232- **Design:** Figma, Notion, Obsidian
233- **Media:** Spotify, Tidal
234- **Productivity:** Todoist, Linear, 1Password
235 
236If an app is built with Electron, it supports `--remote-debugging-port` and can be automated with agent-browser.
237