electron

Overview

What the electron skill does

electron 스킬은 agent-browser와 Chrome DevTools Protocol(CDP) 을 사용해 기존 Electron 데스크톱 애플리케이션을 에이전트가 자동화할 수 있게 해줍니다. VS Code, Slack, Discord, Figma, Notion, Spotify 같은 많은 인기 도구들은 Electron 기반으로 만들어져 있으며 내부적으로 Chromium 위에서 동작합니다. 이 앱들이 DevTools 포트를 노출하면, 브라우저에서 웹사이트를 제어하듯 유사한 방식으로 제어할 수 있습니다.

이 스킬을 사용하면 에이전트는 다음을 수행할 수 있습니다:

• 원격 디버깅이 활성화된 상태로 Electron 앱 실행
• agent-browser 를 통해 앱의 CDP 포트에 연결
• 현재 UI 상태를 파악하기 위한 스냅샷 촬영
• 안정적인 엘리먼트 참조를 이용해 요소를 클릭, 입력, 탐색 등으로 상호작용
• 상태 변경 후 다시 스냅샷을 찍어 여러 단계의 워크플로를 이어서 진행

Who this skill is for

다음과 같은 경우 electron 스킬 사용을 고려하세요:

• Electron 데스크톱 앱 내부에서 워크플로를 자동화해야 할 때 (예: Slack 메시지 전송, Notion 워크스페이스 탐색, VS Code 명령 실행)
• Electron 앱을 엔드 투 엔드 테스트나 회귀 테스트(regression check)에 포함하고 싶을 때
• 웹 자동화와 함께 Electron 앱까지 포함한 크로스 앱 워크플로 자동화가 필요할 때
• GUI 레코더나 독점 API 대신, CDP 기반의 CLI 중심 자동화를 선호할 때

이 스킬은 다음에 익숙한 팀이나 개인에게 특히 잘 맞습니다:

• macOS, Linux 환경에서 Bash 를 사용해 셸 명령을 실행하는 데 익숙한 경우
• agent-browser 또는 유사한 CDP 도구를 이미 사용 중인 경우
• Electron 앱을 OS 네이티브 위젯을 직접 스크립팅하기보다는 "브라우저 타깃"으로 다루는 접근 방식을 선호하는 경우

When electron is not a good fit

electron 스킬이 적합하지 않은 경우는 다음과 같습니다:

• 제어하려는 앱이 Electron 앱이 아니거나, DevTools 포트를 노출하지 않는 경우
• 앱 창 밖의 OS 레벨에서 깊은 상호작용이 필요한 경우 (시스템 대화상자, Electron이 렌더링하지 않는 파일 선택 창 등)
• Electron 앱을 개발하려는 목적일 때 (이 스킬은 새로운 앱 개발이 아니라 기존 앱 자동화 용도입니다)
• 터미널을 전혀 쓰지 않는 완전한 GUI 기반 자동화 도구가 필요할 때

이런 경우에는 다른 데스크톱 자동화 도구나 OS 네이티브 스크립팅 솔루션을 사용하는 편이 더 적합할 수 있습니다.

How the automation model works

내부적으로 electron 스킬은 agent-browser의 웹 자동화와 동일한 스냅샷/인터랙트 패턴을 사용합니다:

1. Electron 앱이 CDP를 노출하도록 --remote-debugging-port 옵션으로 실행
2. agent-browser 에서 해당 포트로 Connect
3. 현재 DOM / 접근성 트리를 캡처하기 위해 Snapshot 실행
4. agent-browser의 명령과 엘리먼트 참조를 사용해 UI 요소와 Interact
5. 주요 상태 변화나 내비게이션 이후에는 다시 Re-snapshot

CDP 기반이기 때문에, 에이전트는 앱을 브라우저 페이지와 유사하게 인식하며, 세션을 넘어 반복 가능하고 스크립트화된 플로우를 구성할 수 있습니다.

How to Use

1. Install the electron skill

에이전트 환경에서 electron 스킬을 사용하려면 vercel-labs/agent-browser 레포지토리에서 설치하세요:

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

이 명령은 electron 스킬 정의를 가져오며, 에이전트가 다음을 사용할 수 있게 합니다:

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

또한 이 스킬에서 사용하는 명령을 실행하려면 agent-browser 가 설치되어 있거나 npx 로 사용할 수 있어야 합니다.

2. Confirm prerequisites

electron 스킬에 의존하는 플로우를 실행하기 전에 다음을 확인하세요:

• macOS 또는 Linux 에서 open, bash 또는 이와 동등한 명령을 실행할 수 있는 셸 환경이 있는지
• 대상 애플리케이션이 실제로 Electron 기반인지 (Slack, VS Code, Discord, Figma, Notion, Spotify 등)
• 앱을 시작할 때 --remote-debugging-port 플래그를 사용할 수 있는지 (Chromium/Electron 에 기본 포함되어 있음)

이 플래그로 앱을 시작할 수 없다면, 에이전트는 CDP로 연결할 수 없습니다.

3. Launch an Electron app with CDP enabled

핵심은 앱을 remote debugging port 를 활성화한 상태로 띄우는 것입니다:

# 예: macOS에서 Slack 실행
open -a "Slack" --args --remote-debugging-port=9222

이 패턴은 다른 Electron 앱에도 동일하게 적용되며, 필요한 경우 앱 이름만 바꾸면 됩니다.

앱이 실행되면 지정한 포트(여기서는 9222)에서 CDP 엔드포인트를 노출합니다.

4. Connect agent-browser to the running app

원격 디버깅 모드로 앱이 실행 중이라면, 이제 agent-browser로 연결합니다:

agent-browser connect 9222

성공적으로 연결되면, 일반적인 스냅샷 및 인터랙션 명령을 Electron 앱 창에 대해 그대로 사용할 수 있습니다.

5. Run the standard snapshot–interact workflow

이제 Electron 앱을 브라우저 페이지처럼 다룰 수 있습니다:

# 상호작용 가능한 요소 탐색
agent-browser snapshot -i

# 특정 엘리먼트 참조 클릭 (예: @e5)
agent-browser click @e5

# 현재 창의 스크린샷 캡처
agent-browser screenshot slack-desktop.png

일반적인 에이전트 실행 워크플로에서 에이전트는 다음과 같이 동작합니다:

• 현재 UI 상태를 파악하기 위해 snapshot 호출
• @e5, @e12 와 같은 참조로 클릭하거나 입력할 요소 선택
• 내비게이션, 모달 열기/닫기 등 큰 변화가 있을 때마다 다시 snapshot 실행

6. Integrate into larger desktop and workflow automation

electron 스킬은 여러 앱을 연속적으로 연결해야 할 때 특히 유용합니다. 예를 들어 에이전트는 다음과 같은 흐름을 만들 수 있습니다:

• Chrome의 웹 앱에서 데이터를 가져온 뒤
• Slack(Electron) 을 열어 서식이 지정된 상태 메시지를 전송하고
• VS Code(Electron) 로 전환해 빌드를 실행하거나 태스크를 수행

모든 동작이 CDP와 agent-browser 를 통해 이루어지므로, CLI에서 직접 스크립트로 구성할 수도 있고 LLM 기반 에이전트가 이를 자동으로 오케스트레이션하도록 맡길 수도 있습니다.

7. Adapting to your environment

레포지토리 예제는 일반적인 Electron 패턴에 초점을 맞추고 있지만, 실제 환경에 맞게 다음을 조정해 사용하는 것이 좋습니다:

• 애플리케이션: Slack, Discord, Notion, 사내에서 사용하는 커스텀 Electron 도구 등
• 포트 번호: 사용 가능한 포트를 선택 (보통 9222 를 많이 쓰지만 필수는 아님)
• OS 명령: macOS에서는 open, Linux에서는 환경에 맞는 실행 명령 사용

실행 명령을 변경하더라도, --remote-debugging-port 플래그는 반드시 유지해야 electron 스킬이 agent-browser를 통해 계속 연결할 수 있습니다.

FAQ

Is the electron skill only for Slack and VS Code?

아니요. electron 스킬은 --remote-debugging-port 로 실행할 수 있는 모든 Electron 앱에서 동작합니다. Slack과 VS Code가 대표적인 예일 뿐이며, 동일한 패턴은 Discord, Figma, Notion, Spotify 등 다른 많은 Electron 기반 도구에도 그대로 적용됩니다.

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

자동화 관점에서 보면, Electron 앱은 Chromium 브라우저와 유사한 Chrome DevTools Protocol 인터페이스를 노출합니다. 지정한 포트로 연결이 이루어지면, agent-browser 는 타깃을 브라우저 페이지를 다루듯 상호작용합니다. electron 스킬은 해당 포트가 Electron 기반의 Chromium 인스턴스에 연결되어 있다고 가정하고 동작합니다.

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

아니요. 앱의 소스 코드를 수정할 필요가 없습니다. 단지 기존 앱을 --remote-debugging-port 플래그와 함께 실행해 CDP를 노출하면 됩니다. 운영체제의 실행 명령이 추가 인자를 허용하는 한, 패키징된 상용 Electron 애플리케이션에도 이 방식이 그대로 적용됩니다.

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

electron 스킬은 Chromium 기반이고 CDP로 접근 가능한 Electron 창에 초점을 맞추고 있습니다. OS 네이티브 대화상자나 Electron 외부의 창은 일반적으로 이 인터페이스를 통해 보이지 않습니다. 이런 영역까지 자동화하려면 별도의 OS 레벨 자동화 도구가 필요합니다.

What commands does the skill rely on?

스킬 메타데이터에 따르면, electron 스킬은 다음 명령을 사용할 수 있습니다:

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

즉, 에이전트는 connect, snapshot, click, screenshot 등 지원되는 agent-browser 서브커맨드를 직접 또는 npx 를 통해 실행할 수 있습니다.

How do I troubleshoot connection issues on the CDP port?

에이전트가 연결하지 못할 경우 다음을 확인하세요:

• 앱을 시작할 때 --remote-debugging-port=<port> 옵션을 사용했는지
• agent-browser connect 에서 사용한 포트 번호가 실행 명령의 포트와 일치하는지
• 앱 인스턴스가 하나만 실행 중인지 확인하고, 여러 개가 떠 있다면 종료 후 디버깅 플래그를 붙여 다시 실행했는지

해당 포트가 이미 사용 중이거나 차단된 상태라면, 사용 가능한 다른 포트를 선택해 실행 명령과 connect 명령 양쪽에 모두 반영하세요.

When should I choose another skill instead of electron?

다음과 같은 경우에는 electron 대신 다른 스킬을 사용하는 것이 좋습니다:

• 타깃이 일반적인 브라우저 내 웹사이트인 경우 (브라우저 중심 자동화 스킬 사용 권장)
• 파일 관리, 시스템 환경설정, 비‑Electron 앱 등 OS 레벨 작업이 주인 경우
• Electron 애플리케이션을 자동화하기보다 주로 빌드/개발하는 것이 목적일 때

전자 스킬은 기존 Electron 데스크톱 앱을 CDP 기반으로 자동화하여 더 큰 데스크톱/워크플로 자동화의 일부로 통합할 때 가장 효과적입니다.