Communitygithub.com

vercel-labs/electron

Automatiza aplicaciones de escritorio Electron (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) usando agent-browser a través del Protocolo de Herramientas para Desarrolladores de Chrome (CDP).

¿Qué es electron?

Esta habilidad permite automatizar cualquier aplicación de escritorio construida con Electron, como Slack, VS Code, Discord, Notion o Spotify, utilizando agent-browser. Electron expone un puerto de depuración remota (Chrome DevTools Protocol – CDP) que agent-browser aprovecha para inspeccionar y controlar la aplicación mediante instantáneas (snapshots) e interacciones con referencias de elementos, de forma similar a como se automatizan páginas web. El flujo de trabajo principal incluye lanzar la app con el flag `--remote-debugging-port`, conectar agent-browser a ese puerto, hacer una instantánea para descubrir los elementos interactivos y luego ejecutar acciones como clics, relleno de formularios o capturas de pantalla. Soporta múltiples ventanas y webviews, gestión de pestañas, sesiones con nombre para controlar varias apps simultáneamente, y opciones de personalización del esquema de color. Es compatible con macOS, Linux y Windows, y funciona con cualquier app que use Electron, desde herramientas de comunicación y desarrollo hasta aplicaciones de diseño y productividad.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/electron
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Automatización de aplicaciones Electron

Automatiza cualquier aplicación de escritorio Electron usando agent-browser. Las aplicaciones Electron están construidas sobre Chromium y exponen un puerto del Protocolo de Herramientas para Desarrolladores de Chrome (CDP) al que agent-browser puede conectarse, permitiendo el mismo flujo de trabajo de instantánea e interacción utilizado para páginas web.

Flujo de trabajo principal

  1. Inicia la aplicación Electron con la depuración remota habilitada
  2. Conecta agent-browser al puerto CDP
  3. Toma una instantánea para descubrir elementos interactivos
  4. Interactúa usando referencias de elementos
  5. Vuelve a tomar instantánea después de navegación o cambios de estado
# Inicia una aplicación Electron con depuración remota
open -a "Slack" --args --remote-debugging-port=9222

# Conecta agent-browser a la aplicación
agent-browser connect 9222

# Flujo de trabajo estándar desde aquí
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

Iniciar aplicaciones Electron con CDP

Todas las aplicaciones Electron soportan el flag --remote-debugging-port, ya que está integrado en 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

Importante: Si la aplicación ya está en ejecución, ciérrala primero y luego relánzala con el flag. El flag --remote-debugging-port debe estar presente al momento del lanzamiento.

Conexión

# Conecta a un puerto específico
agent-browser connect 9222

# O usa --cdp en cada comando
agent-browser --cdp 9222 snapshot -i

# Descubre automáticamente una aplicación basada en Chromium en ejecución
agent-browser --auto-connect snapshot -i

Después de connect, todos los comandos subsiguientes apuntan a la aplicación conectada sin necesidad de --cdp.

Gestión de pestañas

Las aplicaciones Electron a menudo tienen múltiples ventanas o webviews. Usa los comandos de pestañas para listar y cambiar entre ellas:

# Lista todos los objetivos disponibles (ventanas, webviews, etc.)
agent-browser tab

# Cambia a una pestaña específica por índice
agent-browser tab 2

# Cambia por patrón de URL
agent-browser tab --url "*settings*"

Soporte para Webviews

Los elementos <webview> de Electron se descubren automáticamente y pueden controlarse como páginas normales. Los webviews aparecen como objetivos separados en la lista de pestañas con type: "webview":

# Conecta a la aplicación Electron en ejecución
agent-browser connect 9222

# Lista objetivos – los webviews aparecen junto a las páginas
agent-browser tab
# Ejemplo de salida:
#   0: [page]    Slack - Main Window     https://app.slack.com/
#   1: [webview] Contenido incrustado     https://example.com/widget

# Cambia a un webview
agent-browser tab 1

# Interactúa con el webview normalmente
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.png

Nota: El soporte para webviews funciona a través de la conexión CDP directa.

Patrones comunes

Inspeccionar y navegar en una aplicación

open -a "Slack" --args --remote-debugging-port=9222
sleep 3  # Espera a que la aplicación se inicie
agent-browser connect 9222
agent-browser snapshot -i
# Lee la salida de la instantánea para identificar elementos de la interfaz
agent-browser click @e10  # Navega a una sección
agent-browser snapshot -i  # Vuelve a tomar instantánea después de la navegación

Tomar capturas de pantalla de aplicaciones de escritorio

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

Extraer datos de una aplicación de escritorio

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

Rellenar formularios en aplicaciones de escritorio

agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "consulta de búsqueda"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -i

Ejecutar múltiples aplicaciones simultáneamente

Usa sesiones nombradas para controlar varias aplicaciones Electron al mismo tiempo:

# Conecta a Slack
agent-browser --session slack connect 9222

# Conecta a VS Code
agent-browser --session vscode connect 9223

# Interactúa con cada una de forma independiente
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -i

Esquema de color

El esquema de color predeterminado al conectarse vía CDP puede ser light. Para conservar el modo oscuro:

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

O establécela globalmente:

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

Solución de problemas

"Conexión rechazada" o "No se puede conectar"

  • Asegúrate de que la aplicación se haya iniciado con --remote-debugging-port=NNNN
  • Si la aplicación ya estaba en ejecución, ciérrala y relánzala con el flag
  • Verifica que el puerto no esté en uso por otro proceso: lsof -i :9222

La aplicación se inicia pero la conexión falla

  • Espera unos segundos después del lanzamiento antes de conectar (sleep 3)
  • Algunas aplicaciones tardan en inicializar su webview

Los elementos no aparecen en la instantánea

  • La aplicación puede usar múltiples webviews. Usa agent-browser tab para listar objetivos y cambiar al correcto

No se puede escribir en campos de entrada

  • Prueba con agent-browser keyboard type "texto" para escribir en el foco actual sin un selector
  • Algunas aplicaciones Electron usan componentes de entrada personalizados; usa agent-browser keyboard inserttext "texto" para omitir los eventos de teclado

Aplicaciones compatibles

Cualquier aplicación construida con Electron funciona, incluyendo:

  • Comunicación: Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
  • Desarrollo: VS Code, GitHub Desktop, Postman, Insomnia
  • Diseño: Figma, Notion, Obsidian
  • Medios: Spotify, Tidal
  • Productividad: Todoist, Linear, 1Password

Si una aplicación está construida con Electron, soporta --remote-debugging-port y puede automatizarse con 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 relacionados

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