electron

Name: electron
Author: vercel-labs

39kstars2.5kforks

How to install electron?

vercel-labs/agent-browser/electron

$npx -y skills add vercel-labs/agent-browser --skill electron

Installs into the current project.

Summary

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 El

Files · 1

View on GitHub

SKILL.md

1	# Electron App Automation
2
3	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.
4
5	## Core Workflow
6
7	1. Launch the Electron app with remote debugging enabled
8	2. Connect agent-browser to the CDP port
9	3. Snapshot to discover interactive elements
10	4. Interact using element refs
11	5. Re-snapshot after navigation or state changes
12
13	```bash
14	# Launch an Electron app with remote debugging
15	open -a "Slack" --args --remote-debugging-port=9222
16
17	# Connect agent-browser to the app
18	agent-browser connect 9222
19
20	# Standard workflow from here
21	agent-browser snapshot -i
22	agent-browser click @e5
23	agent-browser screenshot slack-desktop.png
24	```
25
26	## Launching Electron Apps with CDP
27
28	Every Electron app supports the `--remote-debugging-port` flag since it's built into Chromium.
29
30	### macOS
31
32	```bash
33	# Slack
34	open -a "Slack" --args --remote-debugging-port=9222
35
36	# VS Code
37	open -a "Visual Studio Code" --args --remote-debugging-port=9223
38
39	# Discord
40	open -a "Discord" --args --remote-debugging-port=9224
41
42	# Figma
43	open -a "Figma" --args --remote-debugging-port=9225
44
45	# Notion
46	open -a "Notion" --args --remote-debugging-port=9226
47
48	# Spotify
49	open -a "Spotify" --args --remote-debugging-port=9227
50	```
51
52	### Linux
53
54	```bash
55	slack --remote-debugging-port=9222
56	code --remote-debugging-port=9223
57	discord --remote-debugging-port=9224
58	```
59
60	### Windows
61
62	```bash
63	"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
64	"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223
65	```
66
67	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.
68
69	## Connecting
70
71	```bash
72	# Connect to a specific port
73	agent-browser connect 9222
74
75	# Or use --cdp on each command
76	agent-browser --cdp 9222 snapshot -i
77
78	# Auto-discover a running Chromium-based app
79	agent-browser --auto-connect snapshot -i
80	```
81
82	After `connect`, all subsequent commands target the connected app without needing `--cdp`.
83
84	## Tab Management
85
86	Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:
87
88	```bash
89	# List all available targets (windows, webviews, etc.)
90	agent-browser tab
91
92	# Switch to a specific tab by index
93	agent-browser tab 2
94
95	# Switch by URL pattern
96	agent-browser tab --url "settings"
97	```
98
99	## Webview Support
100
101	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"`:
102
103	```bash
104	# Connect to running Electron app
105	agent-browser connect 9222
106
107	# List targets -- webviews appear alongside pages
108	agent-browser tab
109	# Example output:
110	# 0: [page] Slack - Main Window https://app.slack.com/
111	# 1: [webview] Embedded Content https://example.com/widget
112
113	# Switch to a webview
114	agent-browser tab 1
115
116	# Interact with the webview normally
117	agent-browser snapshot -i
118	agent-browser click @e3
119	agent-browser screenshot webview.png
120	```
121
122	Note: Webview support works via raw CDP connection.
123
124	## Common Patterns
125
126	### Inspect and Navigate an App
127
128	```bash
129	open -a "Slack" --args --remote-debugging-port=9222
130	sleep 3 # Wait for app to start
131	agent-browser connect 9222
132	agent-browser snapshot -i
133	# Read the snapshot output to identify UI elements
134	agent-browser click @e10 # Navigate to a section
135	agent-browser snapshot -i # Re-snapshot after navigation
136	```
137
138	### Take Screenshots of Desktop Apps
139
140	```bash
141	agent-browser connect 9222
142	agent-browser screenshot app-state.png
143	agent-browser screenshot --full full-app.png
144	agent-browser screenshot --annotate annotated-app.png
145	```
146
147	### Extract Data from a Desktop App
148
149	```bash
150	agent-browser connect 9222
151	agent-browser snapshot -i
152	agent-browser get text @e5
153	agent-browser snapshot --json > app-state.json
154	```
155
156	### Fill Forms in Desktop Apps
157
158	```bash
159	agent-browser connect 9222
160	agent-browser snapshot -i
161	agent-browser fill @e3 "search query"
162	agent-browser press Enter
163	agent-browser wait 1000
164	agent-browser snapshot -i
165	```
166
167	### Run Multiple Apps Simultaneously
168
169	Use named sessions to control multiple Electron apps at the same time:
170
171	```bash
172	# Connect to Slack
173	agent-browser --session slack connect

People who liked this also viewed

6 picks

Type

electron

39kstars2.5kforks

View on GitHub

How to install electron?

vercel-labs/agent-browser/electron

$npx -y skills add vercel-labs/agent-browser --skill electron

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Electron App Automation
2
3	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.
4
5	## Core Workflow
6
7	1. Launch the Electron app with remote debugging enabled
8	2. Connect agent-browser to the CDP port
9	3. Snapshot to discover interactive elements
10	4. Interact using element refs
11	5. Re-snapshot after navigation or state changes
12
13	```bash
14	# Launch an Electron app with remote debugging
15	open -a "Slack" --args --remote-debugging-port=9222
16
17	# Connect agent-browser to the app
18	agent-browser connect 9222
19
20	# Standard workflow from here
21	agent-browser snapshot -i
22	agent-browser click @e5
23	agent-browser screenshot slack-desktop.png
24	```
25
26	## Launching Electron Apps with CDP
27
28	Every Electron app supports the `--remote-debugging-port` flag since it's built into Chromium.
29
30	### macOS
31
32	```bash
33	# Slack
34	open -a "Slack" --args --remote-debugging-port=9222
35
36	# VS Code
37	open -a "Visual Studio Code" --args --remote-debugging-port=9223
38
39	# Discord
40	open -a "Discord" --args --remote-debugging-port=9224
41
42	# Figma
43	open -a "Figma" --args --remote-debugging-port=9225
44
45	# Notion
46	open -a "Notion" --args --remote-debugging-port=9226
47
48	# Spotify
49	open -a "Spotify" --args --remote-debugging-port=9227
50	```
51
52	### Linux
53
54	```bash
55	slack --remote-debugging-port=9222
56	code --remote-debugging-port=9223
57	discord --remote-debugging-port=9224
58	```
59
60	### Windows
61
62	```bash
63	"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
64	"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223
65	```
66
67	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.
68
69	## Connecting
70
71	```bash
72	# Connect to a specific port
73	agent-browser connect 9222
74
75	# Or use --cdp on each command
76	agent-browser --cdp 9222 snapshot -i
77
78	# Auto-discover a running Chromium-based app
79	agent-browser --auto-connect snapshot -i
80	```
81
82	After `connect`, all subsequent commands target the connected app without needing `--cdp`.
83
84	## Tab Management
85
86	Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:
87
88	```bash
89	# List all available targets (windows, webviews, etc.)
90	agent-browser tab
91
92	# Switch to a specific tab by index
93	agent-browser tab 2
94
95	# Switch by URL pattern
96	agent-browser tab --url "settings"
97	```
98
99	## Webview Support
100
101	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"`:
102
103	```bash
104	# Connect to running Electron app
105	agent-browser connect 9222
106
107	# List targets -- webviews appear alongside pages
108	agent-browser tab
109	# Example output:
110	# 0: [page] Slack - Main Window https://app.slack.com/
111	# 1: [webview] Embedded Content https://example.com/widget
112
113	# Switch to a webview
114	agent-browser tab 1
115
116	# Interact with the webview normally
117	agent-browser snapshot -i
118	agent-browser click @e3
119	agent-browser screenshot webview.png
120	```
121
122	Note: Webview support works via raw CDP connection.
123
124	## Common Patterns
125
126	### Inspect and Navigate an App
127
128	```bash
129	open -a "Slack" --args --remote-debugging-port=9222
130	sleep 3 # Wait for app to start
131	agent-browser connect 9222
132	agent-browser snapshot -i
133	# Read the snapshot output to identify UI elements
134	agent-browser click @e10 # Navigate to a section
135	agent-browser snapshot -i # Re-snapshot after navigation
136	```
137
138	### Take Screenshots of Desktop Apps
139
140	```bash
141	agent-browser connect 9222
142	agent-browser screenshot app-state.png
143	agent-browser screenshot --full full-app.png
144	agent-browser screenshot --annotate annotated-app.png
145	```
146
147	### Extract Data from a Desktop App
148
149	```bash
150	agent-browser connect 9222
151	agent-browser snapshot -i
152	agent-browser get text @e5
153	agent-browser snapshot --json > app-state.json
154	```
155
156	### Fill Forms in Desktop Apps
157
158	```bash
159	agent-browser connect 9222
160	agent-browser snapshot -i
161	agent-browser fill @e3 "search query"
162	agent-browser press Enter
163	agent-browser wait 1000
164	agent-browser snapshot -i
165	```
166
167	### Run Multiple Apps Simultaneously
168
169	Use named sessions to control multiple Electron apps at the same time:
170
171	```bash
172	# Connect to Slack
173	agent-browser --session slack connect

People who liked this also viewed

6 picks

Type