electron

Overview

What the electron skill does

La skill electron permet à un agent d’automatiser des applications de bureau Electron existantes en utilisant agent-browser et le Chrome DevTools Protocol (CDP). De nombreux outils populaires comme VS Code, Slack, Discord, Figma, Notion et Spotify sont construits avec Electron et s’exécutent en interne sur Chromium. En exposant un port DevTools, ils peuvent être contrôlés presque comme un site web dans un navigateur.

Avec cette skill, l’agent peut :

• Lancer une app Electron avec le remote debugging activé
• Se connecter au port CDP de l’app via agent-browser
• Prendre des snapshots pour comprendre l’interface actuelle
• Interagir avec les éléments (clic, saisie, navigation) à l’aide de références d’éléments stables
• Reprendre un snapshot après des changements d’état pour poursuivre un workflow multi-étapes

Who this skill is for

Utilisez la skill electron si vous :

• Avez besoin d’automatiser des workflows à l’intérieur d’une app de bureau Electron (par exemple envoyer un message Slack, naviguer dans un espace de travail Notion, déclencher une commande VS Code)
• Souhaitez inclure des apps Electron dans des tests end-to-end ou des contrôles de régression
• Avez besoin d’automatiser des workflows multi-applications, en combinant apps Electron et automatisation web
• Préférez une automatisation en ligne de commande (CLI) basée sur CDP plutôt que des enregistreurs graphiques ou des APIs propriétaires

Cette skill convient aux équipes et aux personnes qui sont déjà à l’aise avec :

• L’exécution de commandes shell (macOS, Linux) via Bash
• L’utilisation de agent-browser ou d’outils CDP similaires
• Le fait de traiter les apps Electron comme des « browser targets » plutôt que de script-er directement les widgets natifs du système

When electron is not a good fit

La skill electron n’est pas idéale si :

• L’app que vous voulez contrôler n’est pas une app Electron et n’expose aucun port DevTools
• Vous avez besoin d’interactions profondes au niveau du système d’exploitation en dehors de la fenêtre de l’app (boîtes de dialogue système, sélecteurs de fichiers non rendus par Electron, etc.)
• Vous voulez développer des apps Electron (cette skill sert à automatiser des apps existantes, pas à en créer de nouvelles)
• Vous recherchez des outils d’automatisation 100 % graphiques, sans terminal

Dans ces cas, il vaut mieux opter pour une autre solution d’automatisation de bureau ou de scripting natif pour l’OS.

How the automation model works

Sous le capot, la skill electron utilise le même modèle snapshot/interact que l’automatisation web dans agent-browser :

1. Lancer avec --remote-debugging-port pour que l’app Electron expose CDP
2. Se connecter à ce port depuis agent-browser
3. Snapshot pour capturer le DOM / arbre d’accessibilité actuel
4. Interagir avec les éléments de l’UI via les commandes agent-browser et des références d’éléments
5. Re-snapshot après chaque changement d’état ou de navigation important

Comme tout repose sur CDP, l’agent « voit » l’app comme une page de navigateur, ce qui permet des scénarios reproductibles et scriptables entre les sessions.

How to Use

1. Install the electron skill

Pour rendre la skill electron disponible dans l’environnement de votre agent, installez-la depuis le dépôt vercel-labs/agent-browser :

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

Cela récupère la définition de la skill electron et permet à l’agent d’utiliser :

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

Vous devez également avoir agent-browser installé ou accessible via npx pour que les commandes utilisées par cette skill puissent être exécutées.

2. Confirm prerequisites

Avant d’exécuter des flows qui s’appuient sur la skill electron, vérifiez :

• Que vous disposez de macOS ou Linux avec un shell où vous pouvez lancer open, bash ou des commandes équivalentes
• Que l’application cible est bien basée sur Electron (Slack, VS Code, Discord, Figma, Notion, Spotify et bien d’autres)
• Que vous pouvez démarrer l’app avec le flag --remote-debugging-port (ce comportement est natif dans Chromium/Electron)

Si vous ne pouvez pas lancer l’app avec ce flag, l’agent ne pourra pas se connecter via CDP.

3. Launch an Electron app with CDP enabled

L’exigence principale est de démarrer l’app avec un remote debugging port :

# Exemple : Slack sur macOS
open -a "Slack" --args --remote-debugging-port=9222

Ce modèle s’applique également aux autres apps Electron ; adaptez simplement le nom de l’app si nécessaire.

Une fois lancée, l’app expose un endpoint CDP sur le port indiqué (ici, 9222).

4. Connect agent-browser to the running app

Avec l’app lancée en remote debugging, connectez-vous via agent-browser :

agent-browser connect 9222

Après une connexion réussie, vous pouvez exécuter les commandes habituelles de snapshot et d’interaction sur la fenêtre de l’app Electron.

5. Run the standard snapshot–interact workflow

Vous pouvez maintenant traiter l’app Electron comme une page de navigateur :

# Découvrir les éléments interactifs
agent-browser snapshot -i

# Cliquer sur une référence d’élément spécifique (exemple : @e5)
agent-browser click @e5

# Capturer une capture d’écran de la fenêtre actuelle
agent-browser screenshot slack-desktop.png

Dans un workflow typique piloté par un agent, celui-ci va :

• Appeler snapshot pour comprendre l’état actuel de l’interface
• Choisir des éléments par leurs références (par exemple @e5, @e12) pour cliquer ou saisir du texte
• Utiliser à nouveau snapshot après tout changement majeur (navigation, ouverture/fermeture de modal, etc.)

6. Integrate into larger desktop and workflow automation

La skill electron est particulièrement utile lorsque vous devez enchaîner plusieurs apps. Par exemple, un agent peut :

• Récupérer des données depuis une app web dans Chrome
• Ouvrir Slack (Electron) et publier un message de statut formaté
• Passer à VS Code (Electron) pour lancer un build ou exécuter une tâche

Comme tout passe par CDP et agent-browser, vous pouvez tout script-er depuis la CLI ou laisser un agent basé sur un LLM orchestrer automatiquement ces étapes.

7. Adapting to your environment

Même si les exemples du dépôt se concentrent sur le modèle Electron générique, vous devez adapter l’approche à votre contexte :

• Applications (Slack, Discord, Notion, outils Electron internes personnalisés)
• Ports (choisissez un port libre ; 9222 est courant mais pas obligatoire)
• Commandes OS (utilisez open sur macOS, les commandes de lancement appropriées sur Linux)

À chaque fois que vous modifiez les commandes de lancement, conservez le flag --remote-debugging-port afin que la skill electron puisse toujours se connecter via agent-browser.

FAQ

Is the electron skill only for Slack and VS Code?

Non. La skill electron fonctionne avec toute app Electron qui peut être démarrée avec --remote-debugging-port. Slack et VS Code sont des exemples fréquents, mais le même modèle s’applique à Discord, Figma, Notion, Spotify et de nombreux autres outils basés sur Electron.

How does electron know it is talking to an Electron app and not a website?

Du point de vue de l’automatisation, les apps Electron exposent une interface Chrome DevTools Protocol similaire à celle d’un navigateur Chromium. Une fois connecté au port indiqué, agent-browser interagit avec la cible comme s’il s’agissait d’une page de navigateur. La skill electron suppose simplement que ce port correspond à une instance Chromium pilotée par Electron.

Do I need to modify the Electron app’s source code?

Non. Vous n’avez pas besoin de modifier le code source de l’app. Il suffit de lancer l’app existante avec le flag --remote-debugging-port pour exposer CDP. Cela fonctionne avec des applications Electron packagées et prêtes à l’emploi, tant que la commande de lancement de l’OS accepte des arguments supplémentaires.

Can the electron skill automate system dialogs or non-Electron windows?

La skill electron se concentre sur les fenêtres Electron qui s’appuient sur Chromium et sont accessibles via CDP. Les boîtes de dialogue natives de l’OS ou les fenêtres en dehors d’Electron ne sont généralement pas visibles via cette interface. Pour ce type d’automatisation, il vous faudra un outil distinct d’automatisation au niveau du système d’exploitation.

What commands does the skill rely on?

D’après les métadonnées de la skill, electron est autorisée à utiliser :

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

Cela signifie que l’agent peut exécuter des commandes agent-browser directement ou via npx, notamment connect, snapshot, click, screenshot et les autres sous-commandes prises en charge.

How do I troubleshoot connection issues on the CDP port?

Si l’agent ne parvient pas à se connecter :

• Vérifiez que l’app a été démarrée avec --remote-debugging-port=<port>
• Confirmez que le numéro de port utilisé dans agent-browser connect correspond à la commande de lancement
• Assurez-vous qu’une seule instance de l’app est en cours d’exécution ; fermez les instances supplémentaires et relancez avec le flag de debugging

Si le port est bloqué ou déjà utilisé, choisissez un autre port disponible et mettez à jour à la fois la commande de lancement et la commande de connexion.

When should I choose another skill instead of electron?

Choisissez une autre skill lorsque :

• La cible est un site web dans un navigateur classique (utilisez plutôt une skill dédiée à l’automatisation de navigateur)
• Vous avez besoin d’actions au niveau de l’OS : gestion de fichiers, préférences système ou apps non-Electron
• Vous développez principalement des applications Electron plutôt que de les automatiser

La skill electron est particulièrement efficace lorsque vous cherchez spécifiquement à automatiser via CDP une app de bureau Electron existante dans le cadre d’une automatisation plus large du poste de travail ou des workflows.