YetiBrowser MCP

공식

YetiBrowser MCP는 AI 어시스턴트가 기존 브라우저와 쉽게 상호작용할 수 있도록 하는 완전한 오픈소스 솔루션입니다.

GitHub
11

Yeti Browser MCP(으)로 무엇을 할 수 있나요?

  • 페이지 스냅샷 탐색 및 캡처 — browser_navigate를 사용하여 URL을 로드하고 결과 페이지의 접근성 스냅샷을 반환하도록 어시스턴트에 요청합니다.
  • 웹 양식 작성 및 제출 — browser_fill_form 또는 browser_type을 사용하여 여러 필드를 채우고 선택적으로 양식을 제출합니다.
  • 콘솔 출력 및 페이지 상태 검사 — browser_get_console_logs 및 browser_page_state를 통해 오류, 로그, 양식 데이터, 쿠키 및 스토리지 키를 검색합니다.
  • 페이지에서 사용자 정의 JavaScript 실행 — browser_evaluate로 임의의 스크립트를 실행하고 디버깅 또는 데이터 추출을 위해 JSON 직렬화 가능한 결과를 반환받습니다.
  • 스크린샷 캡처 — browser_screenshot을 사용하여 뷰포트 또는 전체 페이지 스크린샷을 캡처하여 시각적 확인 또는 QA 워크플로에 활용합니다.

문서

[!IMPORTANT] 이 프로젝트는 보관되었습니다. Claude 및 Codex와 같은 AI 에이전트의 브라우저 제어 부족 문제를 해결하기 위해 구축되었지만, 이제 에이전트들은 전용 MCP 기반 솔루션 없이도 이러한 기능을 내장하고 있습니다.

YetiBrowser MCP

YetiBrowser MCP는 Browser MCP 워크플로우의 완전한 오픈소스 구현체입니다. Node 기반 MCP 서버를 Chrome/Firefox 확장 프로그램과 연결하여 Codex/Claude Code, Cursor, Windsurf, MCP Inspector 또는 자체 도구와 같은 모델 컨텍스트 프로토콜 클라이언트가 실제 브라우저 탭을 자동화할 수 있도록 하며, 모든 데이터를 사용자의 기기에 보관하고 감사할 수 있게 합니다.

YetiBrowser MCP를 선택해야 하는 이유

  • 투명하고 해킹 가능 – 블롭 다운로드가 없습니다. 모든 구성 요소를 검사하고, 포크하고, 확장할 수 있습니다.
  • 로컬 우선 – 확장 프로그램은 로컬호스트 MCP 서버하고만 통신하며, 브라우징 데이터는 절대 기기를 떠나지 않습니다.
  • 크로스 브라우저 – 공유 로직이 Chrome 및 Firefox 패키지 모두를 지원합니다(Firefox 빌드는 더 나은 Manifest V3 지원을 기다리는 중이므로, Mozilla가 전체 MV3 API를 제공할 때까지 연결 UX가 제한될 수 있습니다).
  • 개발자 중심 도구 – 디버깅 및 QA를 위해 구축된 더 풍부한 콘솔 캡처, DOM 차이 비교, 페이지 상태 덤프 및 전체 페이지 스크린샷.
  • 프로덕션 친화적 – 패키징, 게시 및 IDE 워크플로우와의 통합을 위한 스크립트 및 문서.

저장소 레이아웃

  • packages/shared – 메시지 및 도구 스키마를 위한 공유 TypeScript 정의.
  • packages/server – MCP 클라이언트를 실행 중인 브라우저 탭에 연결하는 MCP 서버.
  • extensions/shared – 공유 확장 프로그램 소스(백그라운드/팝업) 및 애셋.
  • extensions/chrome / extensions/firefox – 브라우저별 패키징 레이어.
  • docs/ – 작업 공간 명령, 게시 체크리스트 및 기능 노트.
  • scripts/ – 릴리스 zip용 package-extensions.sh과 같은 도우미 유틸리티.

사용 가능한 MCP 도구

  • browser_snapshot – 현재 페이지의 접근성 중심 스냅샷 캡처
  • browser_snapshot_diff – 가장 최근의 두 스냅샷을 비교하여 DOM/ARIA 변경 사항 강조 표시
  • browser_navigate – 연결된 탭에서 새 URL을 로드하고 업데이트된 스냅샷 반환
  • browser_go_back / browser_go_forward – MCP를 동기화 상태로 유지하면서 기록 탐색
  • browser_wait – 설정된 시간(초) 동안 자동화 일시 중지
  • browser_wait_for – 진행하기 전에 선택자가 나타날 때까지(선택적으로 표시될 때까지) 차단
  • browser_press_key – 포커스된 요소에 키보드 키 누르기 시뮬레이션
  • browser_click – CSS 선택자로 식별된 요소 클릭
  • browser_hover – 대상 요소 위에 포인터 호버
  • browser_drag – 정렬 가능/드래그 앤 드롭 UI를 위해 요소를 드롭 대상으로 드래그
  • browser_type – 편집 가능한 요소에 텍스트 입력(선택적으로 Enter로 제출)
  • browser_fill_form – 단일 호출로 여러 입력/선택/체크박스/라디오 채우기
  • browser_select_option – <select> 요소에서 하나 이상의 옵션 선택
  • browser_screenshot – DevTools 프로토콜을 통해 뷰포트 또는 전체 페이지 스크린샷 캡처
  • browser_get_console_logs – 스택 추적이 포함된 오류를 포함한 최근 콘솔 출력 반환
  • browser_page_state – 연결된 페이지의 양식, 저장소 키 및 쿠키 덤프
  • browser_connection_info – 브리지 WebSocket 포트, 연결 상태 및 확장 프로그램 버전 보고
  • browser_evaluate – 페이지 내에서 사용자 정의 JavaScript를 실행하고 JSON 직렬화 가능한 결과 반환
  • browser_handle_dialog – 선택적 프롬프트 텍스트로 alert/confirm/prompt 대화 상자 수락 또는 해제

MCP 브라우저 확장 프로그램 설치

Chrome 브라우저

Firefox 브라우저 (현재 사용 불가)

  • Firefox 안정 릴리스의 Manifest v3 기능 제한으로 인해, Firefox 확장 프로그램은 일반적으로 사용 가능해질 때까지(Nightly 빌드 외) 보류 중입니다.

MCP 서버 설치

Codex CLI

  • ~/.codex/config.toml을 편집하고 MCP 항목을 추가하세요: 
    [mcp_servers.yetibrowser-mcp]
command = "npx"
args = ["-y", "@yetidevworks/server"]
  • codex CLI 명령을 다시 시작하세요. /mcp 도구 아래에 yetibrowser-mcp 목록이 표시되어야 합니다.
  • 특정 포트를 제공하려면 args 항목에 다음 형식을 사용하세요: args = ["-y", "@yetidevworks/server", "--ws-port", "9010"]

Claude Code

  • 확장 프로그램이 설치되어 있고 탭에 연결되어 있는지 확인한 다음, npx -y @yetidevworks/server로 MCP 서버를 시작하세요(또는 로컬에서 빌드된 CLI를 실행하세요).
  • ~/Library/Application Support/Claude/claude_desktop_config.json에 서버 항목을 추가하세요(docs/publishing.md의 예제 참조).
  • claude를 다시 시작하여 새 MCP 서버를 선택하도록 합니다. 확장 프로그램이 연결되면 /mcp 도구 메뉴 아래에 yetibrowser-mcp이 나열되어야 합니다.

기타 MCP 인식 클라이언트

  • 모든 MCP 클라이언트는 CLI(npx -y @yetidevworks/server)를 생성하여 연결하거나 선택적으로 특정 포트를 제공할 수 있습니다(예: npx -y @yetidevworks/server --ws-port 9010).
  • 서버는 stdio를 통해 표준 MCP 전송을 노출하므로, 탭이 연결될 때 위 명령을 실행하기 위해 클라이언트가 지원하는 구성 메커니즘을 사용하십시오.

MCP Inspector

  • 코딩 에이전트 외부에서 테스트 및 디버깅용.
  • npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010하여 YetiBrowser MCP 브라우저 확장 프로그램과 함께 MCP 서버를 실행하고 검사합니다.

문제 해결

  • CLI는 사용 가능한 포트를 찾을 때까지 9010-9020 포트를 순회하며, 진행 시 switched to를 기록합니다. 특정 포트를 고정하려면 --ws-port <port>를 전달하십시오.
  • 브라우저 확장 프로그램 팝업은 이 동작을 반영합니다. CLI의 포트를 추적하려면 "자동"으로 두거나, "수동"을 선택하고 browser_connection_info / CLI 로그에서 보고된 포트를 입력하여 재정의하십시오.
  • AI 도구에 연결 포트에 대해 문의하기만 하면 됩니다. 예: what is the yetibrowser mcp connction info?, 그런 다음 보고된 포트로 수동 포트를 설정하십시오.

문서 및 빌드 스크립트

  • 작업 공간 명령은 docs/workspace-commands.md에 있습니다.
  • 게시 단계(npm + 확장 프로그램 스토어)는 docs/publishing.md에 있습니다.
  • 스크린샷 동작은 docs/screenshot.md에 문서화되어 있습니다.
  • ./scripts/package-extensions.sh를 사용하여 배포 가능한 Chrome/Firefox zip을 생성합니다(artifacts/로 출력).
  • 저장소 수준의 개인정보 보호정책은 PRIVACY.md에서 확인할 수 있습니다.