# Electron > Automatiza apps de escritorio Electron (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) usando agent-browser vía Chrome DevTools Protocol. Fuente: https://skillsagentes.com/skills/vercel-labs/agent-browser/electron Markdown: https://skillsagentes.com/skills/vercel-labs/agent-browser/electron.md Repositorio: https://github.com/vercel-labs/agent-browser Autor: vercel-labs Licencia: Apache-2.0 Actualizado: hace 5 meses Coste de contexto: 126 tok instalada, 1.7k tok al activarse, 1.7k tok con todos los archivos del bundle Bundle: 1 archivo, 7 KB Permisos que pide: bash(agent-browser:*), bash(npx agent-browser:*) ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add vercel-labs/agent-browser --skill electron --agent claude-code # Cursor npx -y skills add vercel-labs/agent-browser --skill electron --agent cursor # Codex npx -y skills add vercel-labs/agent-browser --skill electron --agent codex # Gemini CLI npx -y skills add vercel-labs/agent-browser --skill electron --agent gemini # Windsurf npx -y skills add vercel-labs/agent-browser --skill electron --agent windsurf # Cline npx -y skills add vercel-labs/agent-browser --skill electron --agent cline ``` ## Qué hace - Lanza apps Electron con --remote-debugging-port habilitado y conecta agent-browser vía CDP - Ofrece un flujo snapshot-interact (snapshot, click, fill, screenshot) para apps de escritorio nativas - Gestiona múltiples ventanas/webviews con los comandos `agent-browser tab` - Soporta controlar varias apps a la vez usando sesiones con nombre - Fija el esquema de color (por ejemplo, dark) al conectar, para preservar la apariencia de la app ## Cuándo usarla - El usuario necesita automatizar o interactuar con una app de escritorio Electron como Slack, VS Code, Discord, Figma, Notion o Spotify - Al conectarse a una app nativa en ejecución o probar una aplicación Electron - Al controlar ventanas, webviews o extraer datos de una app de escritorio ## Qué la activa - "Automatiza la app de Slack para enviar un mensaje" - "Conéctate a VS Code y haz una captura de pantalla" - "Controla la app de Discord con agent-browser" - "Extrae texto de la ventana de Notion" ## Antes de instalar - Requiere agent-browser instalado y lanzar la app Electron con la bandera --remote-debugging-port. - makes network requests ## Archivos - SKILL.md — 7 KB ## SKILL.md Reproducido tal cual desde vercel-labs/agent-browser bajo Apache-2.0. Esta sección es el documento original y está en inglés. # Electron 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 1. **Launch** the Electron app with remote debugging enabled 2. **Connect** agent-browser to the CDP port 3. **Snapshot** to discover interactive elements 4. **Interact** using element refs 5. **Re-snapshot** after navigation or state changes ```bash # 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 ```bash # 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 ```bash slack --remote-debugging-port=9222 code --remote-debugging-port=9223 discord --remote-debugging-port=9224 ``` ### Windows ```bash "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 ```bash # 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: ```bash # 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 `` elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with `type: "webview"`: ```bash # 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 ```bash 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 ```bash 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 ```bash 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 ```bash 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: ```bash # 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: ```bash agent-browser connect 9222 agent-browser --color-scheme dark snapshot -i ``` Or set it globally: ```bash 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 tab` to 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. ## Dónde encaja - Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código. - Creador: [vercel-labs](https://skillsagentes.com/creators/vercel-labs.md) — 20 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Core](https://skillsagentes.com/skills/vercel-labs/agent-browser/core.md): Guía central de uso de agent-browser: snapshots con refs, navegación, interacción con elementos, extracción de datos, screenshots, pestañas, formularios/auth, esperas, sesiones paralelas y solución de fallos. - [Agent Browser](https://skillsagentes.com/skills/vercel-labs/agent-browser/agent-browser.md): CLI de automatización de navegador para agentes de IA: navegar páginas, rellenar formularios, hacer clic, capturar pantallas, extraer datos, testear apps web o automatizar apps Electron y Slack. - [Webmcp Gen](https://skillsagentes.com/skills/vercel-labs/agent-browser/webmcp-gen.md): Crea y valida herramientas WebMCP experimentales para una página web existente, exponiendo flujos reales del sitio como herramientas de página frente a la automatización por árbol de accesibilidad.” - [Protected Vercel Deployments](https://skillsagentes.com/skills/vercel-labs/agent-browser/protected-vercel-deployments.md): Accede y prueba deployments de Vercel protegidos por Vercel Authentication, SSO o Deployment Protection con agent-browser, usando autenticación OIDC de Trusted Sources de corta duración en vez de un secreto de bypass estático. - [Derive Client](https://skillsagentes.com/skills/vercel-labs/agent-browser/derive-client.md): Reverse-engineerea la API interna de un sitio grabando el tráfico del navegador en un HAR, y genera un cliente o CLI standalone que llama a los endpoints sin necesitar navegador después. ## Skills relacionadas - [Skill Creator](https://skillsagentes.com/skills/anthropics/skills/skill-creator.md): Crea skills nuevos, modifica y mejora los existentes, y mide su rendimiento. Úsalo para crear un skill desde cero, editarlo, correr evals, o afinar su descripción para que dispare mejor. - [Agent Development](https://skillsagentes.com/skills/anthropics/claude-code/agent-development.md): Úsala cuando el usuario pida "crear un agente", "añadir un agente", "escribir un subagente" o necesite guía sobre estructura, frontmatter, ejemplos, tools o colores de agentes en plugins de Claude Code. - [Claude Opus 4 5 Migration](https://skillsagentes.com/skills/anthropics/claude-code/claude-opus-4-5-migration.md): Migra prompts y código desde Claude Sonnet 4.0, Sonnet 4.5 u Opus 4.1 hacia Opus 4.5, actualizando strings de modelo y ajustando prompts según diferencias de comportamiento conocidas. No migra Haiku 4.5. - [Hook Development](https://skillsagentes.com/skills/anthropics/claude-code/hook-development.md): Guía completa para crear e implementar hooks de plugins de Claude Code, con énfasis en la API avanzada de hooks basados en prompt. - [Ponytail Debt](https://skillsagentes.com/skills/dietrichgebert/ponytail/ponytail-debt.md): Recolecta los comentarios `ponytail:` del repo en un ledger de deuda técnica, para que los atajos y aplazamientos deliberados no se olviden. Reporte de una sola vez, no cambia nada. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)