electron

Overview

What the electron skill does

Das electron Skill ermöglicht es einem Agenten, bestehende Electron-Desktopanwendungen mit agent-browser und dem Chrome DevTools Protocol (CDP) zu automatisieren. Viele bekannte Tools wie VS Code, Slack, Discord, Figma, Notion und Spotify basieren auf Electron und laufen intern auf Chromium. Wenn sie einen DevTools-Port bereitstellen, können sie ähnlich wie eine Website im Browser gesteuert werden.

Mit diesem Skill kann der Agent:

• Eine Electron-App mit aktiviertem Remote-Debugging starten
• Über agent-browser eine Verbindung zum CDP-Port der App herstellen
• Snapshots erstellen, um die aktuelle UI zu erfassen
• Mit Elementen interagieren (klicken, tippen, navigieren) auf Basis stabiler Element-Referenzen
• Nach Zustandsänderungen erneut snapshotten, um mehrstufige Workflows fortzusetzen

Who this skill is for

Nutze das electron Skill, wenn du:

• Workflows innerhalb einer Electron-Desktop-App automatisieren möchtest (z. B. eine Slack-Nachricht senden, in einem Notion-Workspace navigieren, einen VS Code-Befehl auslösen)
• Electron-Apps in End-to-End-Tests oder Regressionstests einbinden willst
• App-übergreifende Workflow-Automatisierung brauchst, bei der Electron-Apps zusammen mit Web-Automatisierung verwendet werden
• CLI-basierte Automatisierung auf CDP-Basis bevorzugst statt GUI-Recorder oder proprietäre APIs

Es eignet sich für Teams und Einzelpersonen, die bereits vertraut sind mit:

• dem Ausführen von Shell-Befehlen (macOS, Linux) über Bash
• der Nutzung von agent-browser oder ähnlichen CDP-Tools
• dem Ansatz, Electron-Apps als „Browser Targets“ zu behandeln, statt direkt native OS-Widgets zu skripten

When electron is not a good fit

Das electron Skill ist weniger geeignet, wenn:

• Die App, die du steuern willst, keine Electron-App ist und keinen DevTools-Port bereitstellt
• Du tiefgreifende, OS-level-Interaktionen außerhalb des App-Fensters brauchst (Systemdialoge, Dateiauswahldialoge, die nicht von Electron gerendert werden etc.)
• Du Electron-Apps entwickeln möchtest (dieses Skill dient der Automatisierung bestehender Apps, nicht der Entwicklung neuer)
• Du eine komplett GUI-basierte Automatisierung ohne Terminaleinsatz erwartest

In solchen Fällen ist eine andere Lösung für Desktop-Automatisierung oder OS-native Skripting-Tools vermutlich besser geeignet.

How the automation model works

Unter der Haube verwendet das electron Skill das gleiche Snapshot/Interact-Muster wie die Web-Automatisierung in agent-browser:

1. Start mit --remote-debugging-port, damit die Electron-App CDP bereitstellt
2. Verbindung zu diesem Port von agent-browser aus aufbauen
3. Snapshot erstellen, um den aktuellen DOM- bzw. Accessibility-Tree zu erfassen
4. Mit UI-Elementen interagieren – über agent-browser-Kommandos und Element-Referenzen
5. Nach jedem größeren Zustands- oder Navigationswechsel erneut snapshotten

Da das Ganze auf CDP basiert, sieht der Agent die App ähnlich wie eine Browserseite und kann wiederholbare, skriptbare Abläufe über mehrere Sitzungen hinweg aufbauen.

How to Use

1. Install the electron skill

Um das electron Skill in deiner Agent-Umgebung verfügbar zu machen, installiere es aus dem vercel-labs/agent-browser Repository:

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

Damit wird die electron Skill-Definition geladen und der Agent kann nutzen:

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

Außerdem solltest du agent-browser installiert haben oder über npx verfügbar machen, damit die von diesem Skill verwendeten Befehle ausgeführt werden können.

2. Confirm prerequisites

Bevor du Flows ausführst, die auf dem electron Skill basieren, stelle sicher, dass:

• Du macOS oder Linux mit einer Shell hast, in der du open, bash oder vergleichbare Befehle ausführen kannst
• Die Zielanwendung tatsächlich eine Electron-App ist (Slack, VS Code, Discord, Figma, Notion, Spotify und viele andere)
• Du die App mit dem Flag --remote-debugging-port starten kannst (dies ist in Chromium/Electron eingebaut)

Wenn du die App nicht mit diesem Flag starten kannst, kann der Agent keine Verbindung über CDP herstellen.

3. Launch an Electron app with CDP enabled

Die Kernvoraussetzung ist, die App mit einem Remote-Debugging-Port zu starten:

# Example: Slack on macOS
open -a "Slack" --args --remote-debugging-port=9222

Dieses Muster gilt auch für andere Electron-Apps; passe den App-Namen entsprechend an.

Sobald die App läuft, stellt sie auf dem angegebenen Port (hier 9222) einen CDP-Endpunkt bereit.

4. Connect agent-browser to the running app

Wenn die App mit Remote-Debugging läuft, verbindest du dich mit agent-browser:

agent-browser connect 9222

Nach erfolgreicher Verbindung kannst du die üblichen Snapshot- und Interaktionsbefehle gegen das Electron-App-Fenster ausführen.

5. Run the standard snapshot–interact workflow

Jetzt kannst du die Electron-App ähnlich wie eine Browserseite behandeln:

# Discover interactive elements
agent-browser snapshot -i

# Click a specific element reference (example: @e5)
agent-browser click @e5

# Capture a screenshot of the current window
agent-browser screenshot slack-desktop.png

In einem typischen Agent-Run-Workflow wird der Agent:

• snapshot aufrufen, um den aktuellen UI-Zustand zu verstehen
• Elemente über ihre Referenzen auswählen (z. B. @e5, @e12), um darauf zu klicken oder hinein zu tippen
• snapshot erneut verwenden nach größeren Änderungen (Navigation, Öffnen/Schließen eines Modals etc.)

6. Integrate into larger desktop and workflow automation

Das electron Skill ist besonders hilfreich, wenn du mehrere Apps in einer Kette automatisieren möchtest. Ein Agent kann zum Beispiel:

• Daten aus einer Web-App in Chrome abrufen
• Slack (Electron) öffnen und eine formatierte Statusmeldung posten
• Zu VS Code (Electron) wechseln, um einen Build zu starten oder einen Task auszuführen

Da alles über CDP und agent-browser läuft, kannst du die Abläufe von der CLI aus skripten oder einen LLM-basierten Agenten die Orchestrierung automatisch übernehmen lassen.

7. Adapting to your environment

Die Repository-Beispiele konzentrieren sich auf das generische Electron-Muster, du solltest den Ansatz aber an deine Umgebung anpassen, insbesondere an:

• Anwendungen (Slack, Discord, Notion, interne Electron-Tools)
• Ports (wähle einen freien Port; 9222 ist verbreitet, aber nicht zwingend)
• OS-Befehle (verwende open unter macOS, passende Startbefehle unter Linux)

Wann immer du Startbefehle anpasst, achte darauf, dass das Flag --remote-debugging-port erhalten bleibt, damit das electron Skill weiterhin über agent-browser verbinden kann.

FAQ

Ist das electron Skill nur für Slack und VS Code gedacht?

Nein. Das electron Skill funktioniert mit jeder Electron-App, die mit --remote-debugging-port gestartet werden kann. Slack und VS Code sind gängige Beispiele, aber das gleiche Muster gilt für Discord, Figma, Notion, Spotify und viele andere Electron-basierte Tools.

Woher weiß electron, dass es mit einer Electron-App und nicht mit einer Website spricht?

Aus Automatisierungssicht stellen Electron-Apps eine Chrome DevTools Protocol-Schnittstelle bereit, die einem Chromium-Browser ähnelt. Sobald die Verbindung zu dem angegebenen Port steht, interagiert agent-browser mit dem Target, als wäre es eine Browserseite. Das electron Skill geht dabei schlicht davon aus, dass der Port zu einer Electron-basierten Chromium-Instanz gehört.

Muss ich den Quellcode der Electron-App ändern?

Nein. Du musst den Quellcode nicht anpassen. Es reicht, die bestehende App mit dem Flag --remote-debugging-port zu starten, damit CDP verfügbar wird. Das funktioniert auch mit paketierten, „off-the-shelf“ Electron-Anwendungen, solange der OS-Startbefehl zusätzliche Argumente zulässt.

Kann das electron Skill Systemdialoge oder nicht-Electron-Fenster automatisieren?

Das electron Skill konzentriert sich auf Electron-Fenster, die auf Chromium basieren und über CDP zugänglich sind. OS-native Dialoge oder Fenster außerhalb von Electron sind über diese Schnittstelle in der Regel nicht sichtbar. Für solche Aufgaben benötigst du ein separates OS-level-Automatisierungstool.

Auf welche Befehle stützt sich das Skill?

Laut Skill-Metadaten darf electron folgende Befehle nutzen:

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

Das bedeutet, der Agent kann agent-browser-Kommandos direkt oder über npx ausführen, darunter connect, snapshot, click, screenshot und weitere unterstützte Subcommands.

Wie behebe ich Verbindungsprobleme mit dem CDP-Port?

Wenn der Agent keine Verbindung herstellen kann:

• Prüfe, ob die App mit --remote-debugging-port=<port> gestartet wurde
• Stelle sicher, dass die Portnummer in agent-browser connect dem Startbefehl entspricht
• Verifiziere, dass nur eine Instanz der App läuft; schließe zusätzliche Instanzen und starte sie mit dem Debugging-Flag neu

Wenn der Port blockiert ist oder bereits verwendet wird, wähle einen anderen freien Port und passe sowohl den Start- als auch den Connect-Befehl an.

Wann sollte ich ein anderes Skill statt electron verwenden?

Wähle ein anderes Skill, wenn:

• Das Ziel eine normale Website im Browser ist (nutze dann ein browserfokussiertes Automatisierungs-Skill)
• Du OS-level-Aktionen wie Dateiverwaltung, Systemeinstellungen oder nicht-Electron-Apps automatisieren willst
• Du primär Electron-Anwendungen entwickelst statt sie zu automatisieren

Das electron Skill ist am effektivsten, wenn du gezielt CDP-basierte Automatisierung einer bestehenden Electron-Desktop-App als Teil einer breiteren Desktop- oder Workflow-Automatisierung umsetzen möchtest.