Communitygithub.com

vercel-labs/electron

Automatisez les applications de bureau Electron (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) en utilisant agent-browser via le protocole Chrome DevTools. À utiliser lorsque l'utilisateur doit interagir avec une application Electron, automatiser une application de bureau, se connecter à une application en cours d'exécution, contrôler une application native ou tester une application Electron. Les déclencheurs incluent « automatiser l'application Slack », « contrôler VS Code », « interagir avec l'application Discord », « tester cette application Electron », « se connecter à une application de bureau » ou toute tâche nécessitant l'automatisation d'une application Electron native.

Qu'est-ce que electron ?

Cette compétence permet d'automatiser n'importe quelle application de bureau Electron en utilisant agent-browser via le protocole Chrome DevTools (CDP). Les applications Electron étant construites sur Chromium, elles exposent un port CDP auquel agent-browser peut se connecter, permettant ainsi le même flux de travail d'instantané et d'interaction que pour les pages web. Le processus typique consiste à lancer l'application avec le flag `--remote-debugging-port`, à connecter agent-browser à ce port, puis à utiliser des commandes comme `snapshot`, `click`, `fill` ou `screenshot` pour interagir avec l'interface. La compétence prend en charge la gestion de plusieurs fenêtres et webviews, les sessions nommées pour contrôler plusieurs applications simultanément, et propose des correctifs pour les problèmes courants comme les éléments non détectés ou les champs de saisie récalcitrants. Elle est compatible avec la plupart des applications Electron populaires : Slack, Discord, VS Code, Figma, Notion, Spotify, etc.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/electron
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Automatisation d'applications Electron

Automatisez n'importe quelle application de bureau Electron en utilisant agent-browser. Les applications Electron sont construites sur Chromium et exposent un port Chrome DevTools Protocol (CDP) auquel agent-browser peut se connecter, permettant ainsi le même flux de travail d'instantané et d'interaction que pour les pages web.

Flux de travail principal

  1. Lancez l'application Electron avec le débogage à distance activé
  2. Connectez agent-browser au port CDP
  3. Instantané pour découvrir les éléments interactifs
  4. Interagissez en utilisant les références d'éléments
  5. Re-instantané après une navigation ou un changement d'état
# Lancer une application Electron avec le débogage à distance
open -a "Slack" --args --remote-debugging-port=9222

# Connecter agent-browser à l'application
agent-browser connect 9222

# Flux de travail standard à partir de là
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

Lancement d'applications Electron avec CDP

Chaque application Electron prend en charge le flag --remote-debugging-port car il est intégré à Chromium.

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

Important : Si l'application est déjà en cours d'exécution, quittez-la d'abord, puis relancez-la avec le flag. Le flag --remote-debugging-port doit être présent au moment du lancement.

Connexion

# Se connecter à un port spécifique
agent-browser connect 9222

# Ou utiliser --cdp sur chaque commande
agent-browser --cdp 9222 snapshot -i

# Détection automatique d'une application Chromium en cours d'exécution
agent-browser --auto-connect snapshot -i

Après connect, toutes les commandes suivantes ciblent l'application connectée sans avoir besoin de --cdp.

Gestion des onglets

Les applications Electron ont souvent plusieurs fenêtres ou webviews. Utilisez les commandes d'onglet pour les lister et basculer entre elles :

# Lister toutes les cibles disponibles (fenêtres, webviews, etc.)
agent-browser tab

# Passer à un onglet spécifique par index
agent-browser tab 2

# Passer par motif d'URL
agent-browser tab --url "*settings*"

Prise en charge des Webviews

Les éléments <webview> d'Electron sont automatiquement détectés et peuvent être contrôlés comme des pages normales. Les webviews apparaissent comme des cibles séparées dans la liste des onglets avec type: "webview" :

# Se connecter à l'application Electron en cours d'exécution
agent-browser connect 9222

# Lister les cibles – les webviews apparaissent à côté des pages
agent-browser tab
# Exemple de sortie :
#   0: [page]    Slack - Fenêtre principale     https://app.slack.com/
#   1: [webview] Contenu intégré                https://example.com/widget

# Passer à une webview
agent-browser tab 1

# Interagir normalement avec la webview
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.png

Remarque : La prise en charge des webviews fonctionne via une connexion CDP brute.

Schémas courants

Inspecter et naviguer dans une application

open -a "Slack" --args --remote-debugging-port=9222
sleep 3  # Attendre le démarrage de l'application
agent-browser connect 9222
agent-browser snapshot -i
# Lire la sortie de l'instantané pour identifier les éléments de l'interface utilisateur
agent-browser click @e10  # Naviguer vers une section
agent-browser snapshot -i  # Re-instantané après la navigation

Prendre des captures d'écran d'applications de bureau

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

Extraire des données d'une application de bureau

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

Remplir des formulaires dans des applications de bureau

agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "requête de recherche"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i

Exécuter plusieurs applications simultanément

Utilisez des sessions nommées pour contrôler plusieurs applications Electron en même temps :

# Se connecter à Slack
agent-browser --session slack connect 9222

# Se connecter à VS Code
agent-browser --session vscode connect 9223

# Interagir avec chacune indépendamment
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -i

Schéma de couleurs

Le schéma de couleurs par défaut lors de la connexion via CDP peut être light. Pour préserver le mode sombre :

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

Ou définissez-le globalement :

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

Dépannage

« Connexion refusée » ou « Impossible de se connecter »

  • Assurez-vous que l'application a été lancée avec --remote-debugging-port=NNNN
  • Si l'application était déjà en cours d'exécution, quittez-la et relancez-la avec le flag
  • Vérifiez que le port n'est pas utilisé par un autre processus : lsof -i :9222

L'application se lance mais la connexion échoue

  • Attendez quelques secondes après le lancement avant de vous connecter (sleep 3)
  • Certaines applications prennent du temps pour initialiser leur webview

Les éléments n'apparaissent pas dans l'instantané

  • L'application peut utiliser plusieurs webviews. Utilisez agent-browser tab pour lister les cibles et basculer vers la bonne

Impossible de taper dans les champs de saisie

  • Essayez agent-browser keyboard type "texte" pour taper au niveau du focus actuel sans sélecteur
  • Certaines applications Electron utilisent des composants de saisie personnalisés ; utilisez agent-browser keyboard inserttext "texte" pour contourner les événements de touche

Applications prises en charge

Toute application construite avec Electron fonctionne, y compris :

  • Communication : Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
  • Développement : VS Code, GitHub Desktop, Postman, Insomnia
  • Design : Figma, Notion, Obsidian
  • Média : Spotify, Tidal
  • Productivité : Todoist, Linear, 1Password

Si une application est construite avec Electron, elle prend en charge --remote-debugging-port et peut être automatisée avec agent-browser.

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.

Skills associés

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