Communitygithub.com

vercel-labs/electron

Automatize aplicativos desktop Electron (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) usando agent-browser via Chrome DevTools Protocol. Use quando o usuário precisar interagir com um app Electron, automatizar um app desktop, conectar-se a um app em execução, controlar um app nativo ou testar uma aplicação Electron. Os gatilhos incluem "automatizar o app Slack", "controlar o VS Code", "interagir com o app Discord", "testar este app Electron", "conectar-se ao app desktop" ou qualquer tarefa que exija automação de uma aplicação Electron nativa.

O que é electron?

Esta skill permite automatizar qualquer aplicativo desktop construído com Electron utilizando o agent-browser, que se conecta via Chrome DevTools Protocol (CDP). Como os apps Electron são baseados no Chromium, eles expõem uma porta CDP que possibilita o mesmo fluxo de snapshot e interação usado para páginas web. A skill simplifica o lançamento do app com a flag `--remote-debugging-port`, a conexão ao agent-browser e a execução de comandos como snapshot, click, preenchimento de formulários e captura de tela. Ela também gerencia múltiplas janelas e webviews, suporta sessões nomeadas para controle simultâneo de vários apps e oferece opções de esquema de cores. É útil para desenvolvedores que precisam testar ou automatizar interações em apps como Slack, VS Code, Discord, Figma, Notion e Spotify, eliminando a necessidade de automação manual repetitiva.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Automação de Aplicativos Electron

Automatize qualquer aplicativo desktop Electron usando agent-browser. Os aplicativos Electron são construídos sobre o Chromium e expõem uma porta do Chrome DevTools Protocol (CDP) à qual o agent-browser pode se conectar, permitindo o mesmo fluxo de trabalho de snapshot e interação usado para páginas web.

Fluxo de Trabalho Principal

  1. Inicie o aplicativo Electron com depuração remota ativada
  2. Conecte o agent-browser à porta CDP
  3. Faça um snapshot para descobrir elementos interativos
  4. Interaja usando referências de elementos
  5. Faça um novo snapshot após navegação ou mudanças de estado
# Inicie um aplicativo Electron com depuração remota
open -a "Slack" --args --remote-debugging-port=9222

# Conecte o agent-browser ao aplicativo
agent-browser connect 9222

# Fluxo de trabalho padrão a partir daqui
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.png

Iniciando Aplicativos Electron com CDP

Todo aplicativo Electron suporta a flag --remote-debugging-port, pois ela é integrada ao 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: Se o aplicativo já estiver em execução, feche-o primeiro e depois o inicie novamente com a flag. A flag --remote-debugging-port deve estar presente no momento da inicialização.

Conectando

# Conecte a uma porta específica
agent-browser connect 9222

# Ou use --cdp em cada comando
agent-browser --cdp 9222 snapshot -i

# Descubra automaticamente um aplicativo baseado em Chromium em execução
agent-browser --auto-connect snapshot -i

Após o connect, todos os comandos subsequentes terão como alvo o aplicativo conectado, sem necessidade de --cdp.

Gerenciamento de Abas

Os aplicativos Electron geralmente têm várias janelas ou webviews. Use comandos de aba para listar e alternar entre elas:

# Liste todos os alvos disponíveis (janelas, webviews, etc.)
agent-browser tab

# Alterne para uma aba específica pelo índice
agent-browser tab 2

# Alterne por padrão de URL
agent-browser tab --url "*settings*"

Suporte a Webview

Os elementos <webview> do Electron são descobertos automaticamente e podem ser controlados como páginas normais. Os webviews aparecem como alvos separados na lista de abas com type: "webview":

# Conecte-se ao aplicativo Electron em execução
agent-browser connect 9222

# Liste os alvos – webviews aparecem junto com as páginas
agent-browser tab
# Exemplo de saída:
#   0: [page]    Slack - Main Window     https://app.slack.com/
#   1: [webview] Conteúdo Incorporado    https://example.com/widget

# Alterne para um webview
agent-browser tab 1

# Interaja com o webview normalmente
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.png

Nota: O suporte a webview funciona por meio de conexão CDP bruta.

Padrões Comuns

Inspecionar e Navegar em um Aplicativo

open -a "Slack" --args --remote-debugging-port=9222
sleep 3  # Aguarde o aplicativo iniciar
agent-browser connect 9222
agent-browser snapshot -i
# Leia a saída do snapshot para identificar elementos da interface
agent-browser click @e10  # Navegue para uma seção
agent-browser snapshot -i  # Faça um novo snapshot após a navegação

Capturar Telas de Aplicativos Desktop

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

Extrair Dados de um Aplicativo Desktop

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

Preencher Formulários em Aplicativos Desktop

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

Executar Vários Aplicativos Simultaneamente

Use sessões nomeadas para controlar vários aplicativos Electron ao mesmo tempo:

# Conecte-se ao Slack
agent-browser --session slack connect 9222

# Conecte-se ao VS Code
agent-browser --session vscode connect 9223

# Interaja com cada um de forma independente
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -i

Esquema de Cores

O esquema de cores padrão ao conectar via CDP pode ser light. Para preservar o modo escuro:

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

Ou defina globalmente:

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

Solução de Problemas

"Conexão recusada" ou "Não é possível conectar"

  • Certifique-se de que o aplicativo foi iniciado com --remote-debugging-port=NNNN
  • Se o aplicativo já estava em execução, feche e reinicie com a flag
  • Verifique se a porta não está em uso por outro processo: lsof -i :9222

O aplicativo inicia, mas a conexão falha

  • Aguarde alguns segundos após a inicialização antes de conectar (sleep 3)
  • Alguns aplicativos levam tempo para inicializar o webview

Elementos não aparecem no snapshot

  • O aplicativo pode usar vários webviews. Use agent-browser tab para listar os alvos e alternar para o correto

Não é possível digitar em campos de entrada

  • Tente agent-browser keyboard type "texto" para digitar no foco atual sem um seletor
  • Alguns aplicativos Electron usam componentes de entrada personalizados; use agent-browser keyboard inserttext "texto" para ignorar eventos de tecla

Aplicativos Suportados

Qualquer aplicativo criado com Electron funciona, incluindo:

  • Comunicação: Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
  • Desenvolvimento: VS Code, GitHub Desktop, Postman, Insomnia
  • Design: Figma, Notion, Obsidian
  • Mídia: Spotify, Tidal
  • Produtividade: Todoist, Linear, 1Password

Se um aplicativo é construído com Electron, ele suporta --remote-debugging-port e pode ser automatizado com 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.

Habilidades Relacionadas

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