Supports browser automation in Firefox, allowing for navigation, DOM manipulation, form filling, and JavaScript execution through Playwright.
Demonstrated capability to navigate to Google, perform searches, and interact with search results through browser automation.
Enables execution of arbitrary JavaScript code in browser context, with the ability to capture console logs and return results.
비디오의 해당 섹션으로 이동하려면 타임스탬프를 클릭하세요.
00:00 - MCP에 대한 Google 검색
Google 홈페이지로 이동하여 "Model Context Protocol"을 검색합니다. MCP 통합을 사용하여 Claude Desktop에서 기본 웹 검색을 수행하고 결과를 처리하는 방법을 보여줍니다.
00:33 - 스크린샷 캡처
사용자 지정 파일 이름으로 검색 결과의 스크린샷을 찍어 Finder에 표시하는 방법입니다. Claude가 브라우저 자동화 중에 웹 페이지의 시각적 콘텐츠를 캡처하고 저장하는 방법을 보여줍니다.
01:00 - 위키피디아 검색
Wikipedia.org로 이동하여 "모델 컨텍스트 프로토콜"을 검색합니다. MCP 통합을 통해 Claude가 다양한 웹사이트 및 검색 기능과 상호 작용하는 능력을 보여줍니다.
01:38 - 드롭다운 메뉴 상호작용 I
테스트 웹사이트(the-internet.herokuapp.com/dropdown)로 이동하여 드롭다운 메뉴에서 "옵션 1"을 선택합니다. Claude가 양식 요소와 상호 작용하고 항목을 선택하는 능력을 보여줍니다.
01:56 - 드롭다운 메뉴 상호작용 II
같은 드롭다운 메뉴에서 선택 항목을 "옵션 2"로 변경합니다. 클로드가 같은 양식 요소를 여러 번 조작하고 다른 선택을 할 수 있는 능력을 보여줍니다.
02:09 - 로그인 양식 완료
로그인 페이지(the-internet.herokuapp.com/login)로 이동하여 사용자 이름 필드에 "tomsmith"를, 비밀번호 필드에 "SuperSecretPassword!"를 입력합니다. 양식 작성 자동화를 보여줍니다.
02:28 - 로그인 제출
로그인 자격 증명을 제출하고 인증 절차를 완료합니다. Claude가 양식 제출을 트리거하고 여러 단계의 절차를 탐색하는 능력을 보여줍니다.
02:36 - API 요청 실행
JSONPlaceholder API 엔드포인트에 GET 요청을 수행합니다. Claude가 직접 API 호출을 수행하고 MCP 통합을 통해 반환된 데이터를 처리하는 능력을 보여줍니다.
지엑스피1
이 패키지에는 Playwright와 브라우저 자동화 실행에 필요한 종속성이 포함되어 있습니다. npm install 실행하면 필요한 Playwright 종속성이 설치됩니다. 이 패키지는 다음 브라우저를 지원합니다.
브라우저 유형을 처음 사용하면 Playwright가 필요에 따라 해당 브라우저 드라이버를 자동으로 설치합니다. 다음 명령을 사용하여 수동으로 설치할 수도 있습니다.
Safari 관련 참고 사항 : Playwright는 Safari 브라우저를 직접 지원하지 않습니다. 대신 Safari를 구동하는 브라우저 엔진인 WebKit을 사용합니다.
Edge 관련 참고 사항 : 브라우저 유형으로 Edge를 선택하면 에이전트가 실제로 Microsoft Edge(Chromium이 아님)를 실행합니다. 기술적으로 Playwright에서 Edge는 Chromium 기반 브라우저 인스턴스에 'msedge' 채널 매개변수를 사용하여 실행됩니다.
MCP 서버를 실행하는 방법은 두 가지가 있습니다.
Claude Desktop을 사용하는 동안 이 터미널 창을 열어 두세요. 터미널을 닫을 때까지 서버가 실행됩니다.
Claude Desktop은 필요 시 MCP 서버를 자동으로 시작할 수 있습니다. 설정 방법은 다음과 같습니다.
Claude Desktop 구성 파일은 다음 위치에 있습니다.
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json~/.config/Claude/claude_desktop_config.json이 파일을 편집하여 브라우저 에이전트 MCP 구성을 추가하세요. 파일이 없으면 새로 만드세요.
중요 : ABSOLUTE_PATH_TO_DIRECTORY MCP를 설치한 전체 절대 경로 로 바꾸세요.
/Users/username/mcp-browser-agentC:\\Users\\username\\mcp-browser-agent이미 다른 MCP를 구성했다면 "mcpServers" 객체 안에 "browserAgent" 섹션을 추가하기만 하면 됩니다. 다음은 여러 MCP를 사용한 구성의 예입니다.
MCP 브라우저 에이전트는 여러 브라우저 유형을 지원합니다. 기본적으로 Chrome을 사용하지만, 여러 가지 방법으로 다른 브라우저를 지정할 수 있습니다.
홈 디렉토리에서 .mcp_browser_agent_config.json 파일을 만들거나 편집합니다.
browserType 에 지원되는 값은 다음과 같습니다.
chrome - 설치된 Chrome을 사용합니다(기본값)firefox - Firefox 'Nightly' 브라우저를 사용합니다webkit - WebKit 엔진을 사용합니다(참고: 이것은 Safari 자체가 아니라 Safari를 구동하는 WebKit 렌더링 엔진입니다)edge - Microsoft Edge를 사용합니다Safari 관련 참고 사항 : Playwright는 Safari 브라우저를 직접 지원하지 않습니다. 대신 Safari를 구동하는 브라우저 엔진인 WebKit을 사용합니다. Playwright의 WebKit 구현은 유사한 기능을 제공하지만 Safari 브라우저 환경과 동일하지는 않습니다.
MCP 서버를 수동으로 시작할 때 브라우저 유형을 지정할 수 있습니다.
MCP_BROWSER_TYPE 환경 변수를 설정합니다.
Claude Desktop의 claude_desktop_config.json 에서 MCP를 구성할 때 브라우저 유형을 지정할 수 있습니다.
MCP 브라우저 에이전트는 모델 컨텍스트 프로토콜(Model Context Protocol)을 기반으로 구축되어 Claude가 Playwright를 통해 헤드풀 브라우저와 상호 작용할 수 있도록 합니다. 구현은 네 가지 주요 구성 요소로 구성됩니다.
기본 통합과 달리 MCP Browser Agent는 다음과 같은 기능을 통해 진정한 AI 에이전트로 기능합니다.
| 도구 이름 | 설명 | 매개변수 |
|---|---|---|
browser_navigate | URL로 이동 | url (필수), timeout , waitUntil |
browser_screenshot | 스크린샷 캡처 | name (필수), selector , fullPage , mask , savePath |
browser_click | 클릭 요소 | selector (필수) |
browser_fill | 양식 입력 | selector (필수), value (필수) |
browser_select | 드롭다운 옵션을 선택하세요 | selector (필수), value (필수) |
browser_hover | 요소 위에 마우스를 올려 놓으세요 | selector (필수) |
browser_evaluate | JavaScript 실행 | script (필수) |
| 도구 이름 | 설명 | 매개변수 |
|---|---|---|
api_get | GET 요청 | url (필수), headers |
api_post | POST 요청 | url (필수), data (필수), headers |
api_put | PUT 요청 | url (필수), data (필수), headers |
api_patch | 패치 요청 | url (필수), data (필수), headers |
api_delete | 삭제 요청 | url (필수), headers |
MCP 브라우저 에이전트는 다음 리소스를 제공합니다.
browser://logs - 브라우저 콘솔 로그에 액세스합니다.screenshot://[name] - 이름으로 스크린샷에 접근합니다.다음은 Claude와 함께 MCP 브라우저 에이전트를 사용하는 방법에 대한 몇 가지 현실적인 예입니다.
이러한 예는 MCP 브라우저 에이전트의 실제 기능을 나타내며 현재 상태에서 무엇을 달성할 수 있는지에 대해 보다 현실적인 정보를 제공합니다.
Claude Desktop에서 "MCP 브라우저 에이전트: 서버 연결 끊김" 오류가 표시되는 경우:
node dist/index.js 수동으로 실행합니다.claude_desktop_config.json 의 절대 경로가 시스템에 맞는지 확인하세요.\\ )를 사용했는지 다시 한 번 확인하세요.브라우저가 실행되지 않거나 보이지 않는 경우:
Chromium 및 Chrome 브라우저에는 사용 후 프로세스가 제대로 종료되지 않는 알려진 문제가 있습니다. 이 문제가 발생하는 경우:
ps aux | grep chrome 또는 ps aux | grep chromium 실행하여 프로세스를 찾은 다음 kill <PID> 실행하여 프로세스를 종료합니다.[!주의] 이 MCP 통합은 Playwright를 기반으로 구축되었으며, Playwright의 작동에 영향을 미칠 수 있는 알려진 문제와 버그가 있습니다. 브라우저 자동화 관련 문제가 발생하면 Playwright의 GitHub 문제 게시판에 보고해 주세요. Playwright 팀은 이러한 문제를 해결하기 위해 끊임없이 노력하고 있지만, 이 에이전트는 이러한 제한에도 불구하고 Claude Desktop에서 브라우저 자동화 기능을 위한 기반을 제공합니다.
src/index.ts : 메인 진입점 및 MCP 서버 초기화src/tools.ts : 도구 스키마 및 등록src/handlers.ts : 도구 및 리소스에 대한 MCP 요청 핸들러src/executor.ts : Playwright를 이용한 도구 구현 로직이 프로젝트에는 핵심 기능과 브라우저 처리를 검증하는 테스트가 포함되어 있습니다.
테스트는 구성 무결성, 브라우저 자동화 기능, 오류 처리 및 프로세스 정리를 검증합니다. 테스트 모음은 특히 Chrome/Chromium 종료와 관련된 알려진 문제로 인해 발생하는 브라우저 프로세스의 적절한 처리에 중점을 둡니다.
[!주의] 이 MCP 통합은 Claude에게 자율적인 브라우저 제어 기능을 제공합니다. 금지된 사용, 보안 관련 영향 및 모범 사례에 대한 중요 정보는 보안 정책을 검토하십시오.
MCP 브라우저 에이전트는 합법적인 자동화 작업을 위해 설계되었지만, 잠재적으로 오용될 수 있습니다. 사용자는 모든 관련 법률, 서비스 약관 및 윤리 지침을 준수하여 사용할 책임이 있습니다. 자세한 내용은 자세한 보안 정책을 참조하십시오.
MCP 브라우저 에이전트에 대한 기여를 환영합니다! 다음은 여러분이 도움을 줄 수 있는 몇 가지 분야입니다.
이 프로젝트는 Mozilla Public License 2.0에 따라 라이선스가 부여되었습니다. 자세한 내용은 LICENSE 파일을 참조하세요.
This server cannot be installed
local-only server
The server can only run on the client's local machine because it depends on local resources.
Claude Desktop에 자율적인 브라우저 자동화 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 통합입니다. 이 에이전트를 통해 Claude는 웹 콘텐츠와 상호 작용하고, DOM 요소를 조작하고, JavaScript를 실행하고, API 요청을 수행할 수 있습니다.