electron

Overview

What the electron skill does

A skill electron permite que um agente automatize aplicações desktop Electron existentes usando o agent-browser e o Chrome DevTools Protocol (CDP). Muitas ferramentas populares, como VS Code, Slack, Discord, Figma, Notion e Spotify, são construídas em Electron e rodam internamente em cima do Chromium. Ao expor uma porta de DevTools, elas podem ser controladas de forma muito semelhante a um site em um navegador.

Com essa skill, o agente pode:

• Iniciar um app Electron com depuração remota habilitada
• Conectar-se à porta CDP do app via agent-browser
• Tirar snapshots para entender a UI atual
• Interagir com elementos (clicar, digitar, navegar) usando referências de elementos estáveis
• Tirar novos snapshots após mudanças de estado para continuar fluxos de trabalho em várias etapas

Who this skill is for

Use a skill electron se você:

• Precisa automatizar fluxos de trabalho dentro de um app desktop Electron (por exemplo, enviar uma mensagem no Slack, navegar em um workspace do Notion, disparar um comando no VS Code)
• Quer incluir apps Electron em testes de ponta a ponta ou checagens de regressão
• Precisa de automação de fluxos entre apps, usando aplicações Electron junto com automação web
• Prefere automação via CLI baseada em CDP em vez de gravadores de interface gráfica ou APIs proprietárias

Ela é ideal para equipes e pessoas que já têm familiaridade com:

• Executar comandos de shell (macOS, Linux) via Bash
• Usar agent-browser ou ferramentas CDP similares
• Tratar apps Electron como “targets de navegador” em vez de fazer scripts diretamente sobre componentes nativos do sistema operacional

When electron is not a good fit

A skill electron não é a melhor opção se:

• O app que você quer controlar não é um app Electron e não expõe uma porta de DevTools
• Você precisa de interações profundas em nível de sistema operacional fora da janela do app (diálogos do sistema, seletores de arquivo que não são renderizados em Electron, etc.)
• Seu objetivo é desenvolver apps Electron (esta skill serve para automatizar apps existentes, não para criar novos)
• Você precisa de ferramentas de automação totalmente GUI, sem uso de terminal

Nesses casos, pode ser melhor usar outra solução de automação de desktop ou scripts nativos do sistema operacional.

How the automation model works

Por baixo dos panos, a skill electron usa o mesmo padrão de snapshot/interact que a automação web no agent-browser:

1. Inicie com --remote-debugging-port para que o app Electron exponha o CDP
2. Conecte-se a essa porta a partir do agent-browser
3. Tire um Snapshot para capturar o DOM atual / árvore de acessibilidade
4. Interaja com elementos da UI usando comandos do agent-browser e referências de elementos
5. Tire um novo snapshot após cada mudança importante de estado ou navegação

Como isso é baseado em CDP, o agente enxerga o app de forma semelhante a uma página de navegador, o que permite fluxos repetíveis e scriptáveis entre sessões.

How to Use

1. Install the electron skill

Para deixar a skill electron disponível no ambiente do seu agente, instale-a a partir do repositório vercel-labs/agent-browser:

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

Esse comando adiciona a definição da skill electron e permite que o agente use:

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

Você também deve ter o agent-browser instalado ou disponível via npx para que os comandos usados por esta skill possam ser executados.

2. Confirm prerequisites

Antes de rodar fluxos que dependem da skill electron, confirme:

• Você tem macOS ou Linux com um shell onde possa executar open, bash ou comandos equivalentes
• O aplicativo alvo é realmente baseado em Electron (Slack, VS Code, Discord, Figma, Notion, Spotify e muitos outros)
• Você consegue iniciar o app com a flag --remote-debugging-port (isso faz parte do Chromium/Electron)

Se você não conseguir iniciar o app com essa flag, o agente não conseguirá se conectar via CDP.

3. Launch an Electron app with CDP enabled

O requisito central é iniciar o app com uma porta de depuração remota:

# Exemplo: Slack no macOS
open -a "Slack" --args --remote-debugging-port=9222

Esse padrão se aplica a outros apps Electron também; ajuste o nome do app conforme necessário.

Depois de iniciado, o app expõe um endpoint CDP na porta especificada (neste exemplo, 9222).

4. Connect agent-browser to the running app

Com o app em execução com depuração remota habilitada, conecte-se usando o agent-browser:

agent-browser connect 9222

Após uma conexão bem-sucedida, você pode executar os comandos usuais de snapshot e interação contra a janela do app Electron.

5. Run the standard snapshot–interact workflow

Agora você pode tratar o app Electron quase como se fosse uma página no navegador:

# Descobrir elementos interativos
agent-browser snapshot -i

# Clicar em uma referência de elemento específica (exemplo: @e5)
agent-browser click @e5

# Capturar um screenshot da janela atual
agent-browser screenshot slack-desktop.png

Em um fluxo típico controlado por agente, ele irá:

• Chamar snapshot para entender o estado atual da UI
• Escolher elementos por suas referências (por exemplo, @e5, @e12) para clicar ou digitar
• Usar snapshot novamente após qualquer mudança importante (navegação, abertura/fechamento de modal, etc.)

6. Integrate into larger desktop and workflow automation

A skill electron é especialmente útil quando você precisa encadear vários apps. Por exemplo, um agente pode:

• Buscar dados em um app web no Chrome
• Abrir o Slack (Electron) e postar uma mensagem de status formatada
• Alternar para o VS Code (Electron) para disparar um build ou executar uma tarefa

Como tudo roda via CDP e agent-browser, você pode fazer o script disso pela CLI ou deixar que um agente baseado em LLM orquestre tudo automaticamente.

7. Adapting to your environment

Embora os exemplos do repositório foquem no padrão genérico de Electron, você deve adaptar a abordagem ao seu contexto específico de:

• Aplicações (Slack, Discord, Notion, ferramentas Electron internas da sua empresa)
• Portas (escolha uma porta livre; 9222 é comum, mas não obrigatória)
• Comandos de sistema operacional (use open no macOS e os comandos apropriados de inicialização no Linux)

Sempre que ajustar os comandos de inicialização, mantenha a flag --remote-debugging-port para que a skill electron continue conseguindo se conectar via agent-browser.

FAQ

Is the electron skill only for Slack and VS Code?

Não. A skill electron funciona com qualquer app Electron que possa ser iniciado com --remote-debugging-port. Slack e VS Code são exemplos comuns, mas o mesmo padrão se aplica a Discord, Figma, Notion, Spotify e muitas outras ferramentas baseadas em Electron.

How does electron know it is talking to an Electron app and not a website?

Do ponto de vista da automação, apps Electron expõem uma interface Chrome DevTools Protocol similar à de um navegador Chromium. Depois de conectado à porta especificada, o agent-browser interage com o target como se fosse uma página de navegador. A skill electron basicamente assume que aquela porta corresponde a uma instância Chromium baseada em Electron.

Do I need to modify the Electron app’s source code?

Não. Você não precisa alterar o código-fonte do app. Basta iniciar o app existente com a flag --remote-debugging-port para expor o CDP. Isso funciona para aplicações Electron empacotadas, prontas para uso, desde que o comando de inicialização do sistema operacional permita passar argumentos adicionais.

Can the electron skill automate system dialogs or non-Electron windows?

A skill electron é focada em janelas Electron que são baseadas em Chromium e acessíveis via CDP. Diálogos nativos do sistema operacional ou janelas fora do Electron geralmente não são visíveis por essa interface. Para esse tipo de automação, você precisaria de outra ferramenta de automação em nível de sistema operacional.

What commands does the skill rely on?

De acordo com os metadados da skill, electron pode usar:

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

Isso significa que o agente pode executar comandos agent-browser diretamente ou via npx, incluindo connect, snapshot, click, screenshot e outros subcomandos suportados.

How do I troubleshoot connection issues on the CDP port?

Se o agente não conseguir se conectar:

• Verifique se o app foi iniciado com --remote-debugging-port=<port>
• Confirme se o número da porta usado em agent-browser connect é o mesmo do comando de inicialização
• Certifique-se de que apenas uma instância do app esteja em execução; feche instâncias extras e reinicie com a flag de depuração

Se a porta estiver bloqueada ou já em uso, escolha outra porta disponível e atualize tanto o comando de inicialização quanto o de conexão.

When should I choose another skill instead of electron?

Escolha outra skill quando:

• O alvo for um site em um navegador comum (use em vez disso uma skill focada em automação de navegador)
• Você precisar de ações em nível de sistema operacional, como gerenciamento de arquivos, preferências do sistema ou apps que não sejam Electron
• Seu foco principal for criar apps Electron, não automatizá-los

A skill electron é mais eficaz quando você quer especificamente automação baseada em CDP de um app desktop Electron existente, como parte de uma automação maior de desktop ou de fluxos de trabalho.