Communitygithub.com

Electron-App-Automatisierung

Automatisieren Sie Electron-Desktop-Apps (VS Code, Slack, Discord, Figma, Notion, Spotify usw.) mit agent-browser über das Chrome DevTools-Protokoll.

Was ist Electron-App-Automatisierung?

Diese Fähigkeit ermöglicht es KI-Agenten, jede Electron-Desktop-App zu automatisieren, indem sie sich über das Chrome DevTools-Protokoll (CDP) mit ihr verbinden. Da Electron-Apps auf Chromium basieren, bieten sie einen CDP-Port, der von agent-browser erkannt und gesteuert werden kann. Der Workflow umfasst das Starten der App mit Remote-Debugging, das Verbinden mit dem CDP-Port, das Erstellen von Snapshots zur Erkennung interaktiver Elemente und die anschließende Interaktion über Element-Referenzen. Unterstützt werden gängige Apps wie Slack, VS Code, Discord, Figma, Notion und Spotify. Die Automatisierung kann Tab-Wechsel, Webview-Steuerung, Screenshots und Datenextraktion umfassen. Für Fehlerbehebung gibt es Hinweise zu Verbindungsproblemen, fehlenden Elementen und zum Umgang mit benutzerdefinierten Eingabekomponenten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/electron
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht Electron-App-Automatisierung?

Automatisieren Sie jede Electron-Desktop-App mit agent-browser. Electron-Apps basieren auf Chromium und legen einen Chrome DevTools Protocol (CDP)-Port offen, mit dem agent-browser eine Verbindung herstellen kann. Dies ermöglicht denselben Snapshot-Interact-Workflow, der auch für Webseiten verwendet wird.

Kern-Workflow

  1. Starten Sie die Electron-App mit aktiviertem Remote-Debugging
  2. Verbinden Sie agent-browser mit dem CDP-Port
  3. Snapshot zur Erkennung interaktiver Elemente erstellen
  4. Interagieren Sie mithilfe von Element-Referenzen
  5. Erneuter Snapshot nach Navigation oder Zustandsänderungen
# Electron-App mit Remote-Debugging starten
open -a "Slack" --args --remote-debugging-port=9222

# agent-browser mit der App verbinden
agent-browser connect 9222

# Standard-Workflow ab hier
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

Electron-Apps mit CDP starten

Jede Electron-App unterstützt das Flag --remote-debugging-port, da es in Chromium integriert ist.

macOS

# 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

slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224

Windows

"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

Wichtig: Wenn die App bereits ausgeführt wird, beenden Sie sie zuerst und starten Sie sie dann mit dem Flag neu. Das Flag --remote-debugging-port muss beim Start vorhanden sein.

Verbinden

# Mit einem bestimmten Port verbinden
agent-browser connect 9222

# Oder --cdp bei jedem Befehl verwenden
agent-browser --cdp 9222 snapshot -i

# Automatische Erkennung einer laufenden Chromium-basierten App
agent-browser --auto-connect snapshot -i

Nach connect zielen alle nachfolgenden Befehle auf die verbundene App, ohne dass --cdp erforderlich ist.

Tab-Verwaltung

Electron-Apps haben oft mehrere Fenster oder Webviews. Verwenden Sie Tab-Befehle, um diese aufzulisten und zwischen ihnen zu wechseln:

# Alle verfügbaren Ziele auflisten (Fenster, Webviews usw.)
agent-browser tab

# Zu einem bestimmten Tab nach Index wechseln
agent-browser tab 2

# Nach URL-Muster wechseln
agent-browser tab --url "*settings*"

Webview-Unterstützung

Electron <webview>-Elemente werden automatisch erkannt und können wie normale Seiten gesteuert werden. Webviews erscheinen als separate Ziele in der Tab-Liste mit type: "webview":

# Mit laufender Electron-App verbinden
agent-browser connect 9222

# Ziele auflisten – Webviews erscheinen neben Seiten
agent-browser tab
# Beispielausgabe:
#   0: [page]    Slack - Hauptfenster     https://app.slack.com/
#   1: [webview] Eingebetteter Inhalt     https://example.com/widget

# Zu einem Webview wechseln
agent-browser tab 1

# Normal mit dem Webview interagieren
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.png

Hinweis: Die Webview-Unterstützung funktioniert über eine direkte CDP-Verbindung.

Häufige Muster

App inspizieren und navigieren

open -a "Slack" --args --remote-debugging-port=9222
sleep 3  # Auf App-Start warten
agent-browser connect 9222
agent-browser snapshot -i
# Snapshot-Ausgabe lesen, um UI-Elemente zu identifizieren
agent-browser click @e10  # Zu einem Abschnitt navigieren
agent-browser snapshot -i  # Erneuter Snapshot nach Navigation

Screenshots von Desktop-Apps erstellen

agent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.png

Daten aus einer Desktop-App extrahieren

agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.json

Formulare in Desktop-Apps ausfüllen

agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "Suchanfrage"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i

Mehrere Apps gleichzeitig ausführen

Verwenden Sie benannte Sitzungen, um mehrere Electron-Apps gleichzeitig zu steuern:

# Mit Slack verbinden
agent-browser --session slack connect 9222

# Mit VS Code verbinden
agent-browser --session vscode connect 9223

# Unabhängig voneinander interagieren
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -i

Farbschema

Das Standard-Farbschema bei der Verbindung über CDP ist möglicherweise light. Um den Dunkelmodus beizubehalten:

agent-browser connect 9222
agent-browser --color-scheme dark snapshot -i

Oder global festlegen:

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

Fehlerbehebung

"Verbindung abgelehnt" oder "Kann nicht verbinden"

  • Stellen Sie sicher, dass die App mit --remote-debugging-port=NNNN gestartet wurde
  • Wenn die App bereits ausgeführt wurde, beenden und mit dem Flag neu starten
  • Überprüfen Sie, ob der Port nicht von einem anderen Prozess belegt ist: lsof -i :9222

App wird gestartet, aber Verbindung schlägt fehl

  • Warten Sie einige Sekunden nach dem Start, bevor Sie die Verbindung herstellen (sleep 3)
  • Manche Apps benötigen Zeit, um ihr Webview zu initialisieren

Elemente werden im Snapshot nicht angezeigt

  • Die App verwendet möglicherweise mehrere Webviews. Verwenden Sie agent-browser tab, um Ziele aufzulisten und zum richtigen zu wechseln

Kann nicht in Eingabefelder tippen

  • Versuchen Sie agent-browser keyboard type "text", um ohne Selektor an der aktuellen Fokusposition zu tippen
  • Manche Electron-Apps verwenden benutzerdefinierte Eingabekomponenten; verwenden Sie agent-browser keyboard inserttext "text", um Tastenereignisse zu umgehen

Unterstützte Apps

Jede App, die auf Electron basiert, funktioniert, einschließlich:

  • Kommunikation: Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
  • Entwicklung: VS Code, GitHub Desktop, Postman, Insomnia
  • Design: Figma, Notion, Obsidian
  • Medien: Spotify, Tidal
  • Produktivität: Todoist, Linear, 1Password

Wenn eine App mit Electron erstellt wurde, unterstützt sie --remote-debugging-port und kann mit agent-browser automatisiert werden.

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to

vercel-labs/agentcore

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.

vercel-labs/derive-client

Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to "derive a client", "build a CLI for <site>", "reverse engineer this site's API", "record network requests", "turn this site into an API", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.

vercel-labs/dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

vercel-labs/protected-vercel-deployments

Access and test Vercel deployments protected by Vercel Authentication, SSO, or Deployment Protection with agent-browser. Use when a preview or production URL redirects to a Vercel login page, returns a protection 401 or 403, or needs short-lived Trusted Sources OIDC authentication instead of a static bypass secret or public exception.

vercel-labs/slack

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

vercel-labs/vercel-sandbox

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

vercel-labs/webmcp-gen

Build and validate experimental WebMCP tools for an existing web page. Use when an agent needs to expose a site's real workflows as page tools, create webmcp.init.js, define deterministic checks, or compare WebMCP with accessibility-tree automation.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community