electron

Overview

What the electron skill does

La skill electron permite que un agente automatice aplicaciones de escritorio Electron existentes usando agent-browser y Chrome DevTools Protocol (CDP). Muchas herramientas populares como VS Code, Slack, Discord, Figma, Notion y Spotify están construidas con Electron y se ejecutan internamente sobre Chromium. Al exponer un puerto DevTools, pueden controlarse de forma muy similar a un sitio web en un navegador.

Con esta skill, el agente puede:

• Lanzar una app Electron con depuración remota activada
• Conectarse al puerto CDP de la app vía agent-browser
• Tomar snapshots para entender el estado actual de la interfaz
• Interactuar con elementos (click, escribir, navegar) usando referencias de elementos estables
• Volver a tomar snapshots tras cambios de estado para continuar flujos de trabajo de varios pasos

Who this skill is for

Usa la skill electron si:

• Necesitas automatizar flujos dentro de una app de escritorio Electron (por ejemplo, enviar un mensaje en Slack, navegar un espacio de trabajo en Notion, lanzar un comando en VS Code)
• Quieres incluir apps Electron en tests end-to-end o comprobaciones de regresión
• Necesitas automatizar flujos entre varias apps, usando aplicaciones Electron junto con automatización web
• Prefieres automatización basada en CLI sobre CDP en lugar de grabadores GUI o APIs propietarias

Es adecuada para equipos y personas que ya se sienten cómodos con:

• Ejecutar comandos de shell (macOS, Linux) con Bash
• Usar agent-browser u otras herramientas similares basadas en CDP
• Tratar las apps Electron como "targets de navegador" en lugar de hacer scripting directo de widgets nativos del sistema operativo

When electron is not a good fit

La skill electron no es la mejor opción si:

• La app que quieres controlar no es una app Electron y no expone un puerto DevTools
• Necesitas interacciones profundas a nivel de sistema operativo fuera de la ventana de la app (diálogos del sistema, selectores de archivos que no renderiza Electron, etc.)
• Quieres desarrollar apps Electron (esta skill es para automatizar apps existentes, no para crear nuevas)
• Buscas herramientas de automatización totalmente gráficas, sin usar terminal

En esos casos, puede que te interese otra solución de automatización de escritorio o de scripting nativo del sistema operativo.

How the automation model works

Internamente, la skill electron usa el mismo patrón de snapshot/interacción que la automatización web en agent-browser:

1. Lanzar con --remote-debugging-port para que la app Electron exponga CDP
2. Conectarse a ese puerto desde agent-browser
3. Snapshot para capturar el DOM actual / árbol de accesibilidad
4. Interactuar con elementos de la interfaz usando comandos de agent-browser y referencias de elementos
5. Volver a hacer snapshot tras cada cambio importante de estado o navegación

Al basarse en CDP, el agente ve la app como si fuera una página de navegador, lo que permite flujos repetibles y scriptables entre sesiones.

How to Use

1. Install the electron skill

Para poner la skill electron a disposición del entorno de tu agente, instálala desde el repositorio vercel-labs/agent-browser:

npx skills add https://github.com/vercel-labs/agent-browser --skill electron

Esto descarga la definición de la skill electron y permite que el agente use:

• Bash(agent-browser:*)
• Bash(npx agent-browser:*)

También deberías tener agent-browser instalado o disponible vía npx para que los comandos que usa esta skill se puedan ejecutar correctamente.

2. Confirm prerequisites

Antes de ejecutar flujos que dependan de la skill electron, verifica lo siguiente:

• Tienes macOS o Linux con una shell donde puedas ejecutar open, bash o comandos equivalentes
• La aplicación de destino es realmente una app basada en Electron (Slack, VS Code, Discord, Figma, Notion, Spotify y muchas otras)
• Puedes iniciar la app con el flag --remote-debugging-port (esto viene incorporado en Chromium/Electron)

Si no puedes iniciar la app con ese flag, el agente no podrá conectarse mediante CDP.

3. Launch an Electron app with CDP enabled

El requisito principal es iniciar la app con un puerto de depuración remota:

# Ejemplo: Slack en macOS
open -a "Slack" --args --remote-debugging-port=9222

Este patrón se aplica también a otras apps Electron; ajusta el nombre de la aplicación según necesites.

Una vez iniciada, la app expone un endpoint CDP en el puerto especificado (en este ejemplo, 9222).

4. Connect agent-browser to the running app

Con la aplicación ejecutándose con depuración remota activa, conéctate usando agent-browser:

agent-browser connect 9222

Tras una conexión correcta, podrás ejecutar los comandos habituales de snapshot e interacción sobre la ventana de la app Electron.

5. Run the standard snapshot–interact workflow

Ahora puedes tratar la app Electron casi igual que una página en el navegador:

# Descubrir elementos interactivos
agent-browser snapshot -i

# Hacer click en una referencia de elemento concreta (ejemplo: @e5)
agent-browser click @e5

# Capturar una captura de pantalla de la ventana actual
agent-browser screenshot slack-desktop.png

En un flujo típico ejecutado por un agente, este:

• Llama a snapshot para entender el estado actual de la interfaz
• Selecciona elementos por sus referencias (por ejemplo, @e5, @e12) para hacer click o escribir en ellos
• Vuelve a usar snapshot después de cualquier cambio importante (navegación, apertura/cierre de modales, etc.)

6. Integrate into larger desktop and workflow automation

La skill electron es especialmente útil cuando necesitas encadenar varias apps. Por ejemplo, un agente puede:

• Recuperar datos de una aplicación web en Chrome
• Abrir Slack (Electron) y publicar un mensaje de estado con formato
• Cambiar a VS Code (Electron) para lanzar una build o ejecutar una tarea

Como todo se controla mediante CDP y agent-browser, puedes hacer scripting desde la CLI o permitir que un agente basado en LLM lo orqueste automáticamente.

7. Adapting to your environment

Aunque los ejemplos del repositorio se centran en el patrón genérico de Electron, deberías adaptar el enfoque a tu entorno específico:

• Aplicaciones (Slack, Discord, Notion, herramientas internas personalizadas basadas en Electron)
• Puertos (elige un puerto libre; 9222 es común pero no obligatorio)
• Comandos de sistema operativo (usa open en macOS y los comandos de lanzamiento apropiados en Linux)

Siempre que modifiques los comandos de lanzamiento, mantén el flag --remote-debugging-port para que la skill electron pueda seguir conectándose mediante agent-browser.

FAQ

¿La skill electron sirve solo para Slack y VS Code?

No. La skill electron funciona con cualquier app Electron que pueda iniciarse con --remote-debugging-port. Slack y VS Code son ejemplos habituales, pero el mismo patrón se aplica a Discord, Figma, Notion, Spotify y muchas otras herramientas basadas en Electron.

¿Cómo sabe electron que está hablando con una app Electron y no con un sitio web?

Desde el punto de vista de la automatización, las apps Electron exponen una interfaz Chrome DevTools Protocol similar a la de un navegador Chromium. Una vez conectado al puerto indicado, agent-browser interactúa con el destino como si fuera una página de navegador. La skill electron simplemente asume que el puerto corresponde a una instancia de Chromium basada en Electron.

¿Necesito modificar el código fuente de la app Electron?

No. No necesitas cambiar el código fuente de la aplicación. Solo tienes que iniciar la app existente con el flag --remote-debugging-port para exponer CDP. Esto funciona con aplicaciones Electron empaquetadas y listas para usar, siempre que el comando de lanzamiento del sistema operativo permita pasar argumentos adicionales.

¿Puede la skill electron automatizar diálogos del sistema u otras ventanas que no sean Electron?

La skill electron se centra en ventanas Electron que usan Chromium y son accesibles vía CDP. Los diálogos nativos del sistema operativo o ventanas fuera de Electron generalmente no son visibles a través de esta interfaz. Para ese tipo de automatización, necesitarías una herramienta de automatización a nivel de sistema operativo.

¿En qué comandos se basa la skill?

Según los metadatos de la skill, electron puede usar:

• Bash(agent-browser:*)
• Bash(npx agent-browser:*)

Esto significa que el agente puede ejecutar comandos de agent-browser directamente o vía npx, incluyendo connect, snapshot, click, screenshot y otros subcomandos compatibles.

¿Cómo soluciono problemas de conexión con el puerto CDP?

Si el agente no puede conectarse:

• Comprueba que la app se haya iniciado con --remote-debugging-port=<port>
• Confirma que el número de puerto usado en agent-browser connect coincide con el del comando de lanzamiento
• Verifica que solo haya una instancia de la app ejecutándose; cierra instancias adicionales y vuelve a lanzar la app con el flag de depuración

Si el puerto está bloqueado o ya está en uso, elige otro puerto disponible y actualiza tanto el comando de lanzamiento como el de conexión.

¿Cuándo debería elegir otra skill en lugar de electron?

Elige otra skill cuando:

• El objetivo es un sitio web en un navegador (en ese caso, usa una skill de automatización centrada en navegador)
• Necesitas acciones a nivel de sistema operativo como gestión de archivos, preferencias del sistema u otras apps que no sean Electron
• Estás principalmente desarrollando, y no automatizando, aplicaciones Electron

La skill electron es más efectiva cuando lo que buscas es automatización basada en CDP de una app de escritorio Electron existente como parte de una automatización de escritorio o de flujos de trabajo más amplia.