브라우저툴즈 MCP

AI 도구의 인식 능력을 10배 더 높이고 브라우저와 상호 작용할 수 있도록 하세요.

이 애플리케이션은 Anthropic의 Model Context Protocol(MCP)을 통해 AI 기반 애플리케이션이 Chrome 확장 프로그램을 통해 브라우저 데이터를 캡처하고 분석할 수 있도록 하는 강력한 브라우저 모니터링 및 상호작용 도구입니다.

전체 설치, 빠른 시작 및 기여 가이드는 문서를 읽어보세요.

로드맵

여기에서 프로젝트 로드맵을 확인하세요: Github 로드맵/프로젝트 보드

업데이트

v1.2.0이 출시되었습니다! 업데이트 내용을 간략하게 살펴보겠습니다.

• 이제 DevTools 패널에서 "커서에 자동 붙여넣기 허용"을 활성화할 수 있습니다. 스크린샷이 커서에 자동으로 붙여넣어집니다. (커서의 에이전트 입력 필드에 포커스를 맞추거나 클릭해야 합니다. 그렇지 않으면 작동하지 않습니다!)
• Lighthouse를 통해 SEO, 성능, 접근성 및 모범 사례 분석 도구 모음을 통합했습니다.
• NextJS 애플리케이션의 SEO를 개선하는 데 사용되는 NextJS 특정 프롬프트를 구현했습니다.
• 추론을 개선하기 위한 프롬프트와 함께 특정 순서로 모든 디버깅 도구를 실행하는 도구로 디버거 모드가 추가되었습니다.
• 특정 순서로 모든 감사 도구를 실행하기 위한 도구로 감사 모드가 추가되었습니다.
• 해결된 Windows 연결 문제
• 호스트/포트 자동 검색, 자동 재연결 및 정상적인 종료 메커니즘을 통해 BrowserTools 서버, 확장 및 MCP 서버 간의 네트워킹이 개선되었습니다.
• Ctrl+C를 사용하여 브라우저 도구 서버를 더 쉽게 종료할 수 있는 기능이 추가되었습니다.

빠른 시작 가이드

이 MCP 도구를 실행하려면 세 가지 구성 요소가 필요합니다.

1. 여기에서 크롬 확장 프로그램을 설치하세요: v1.2.0 BrowserToolsMCP 크롬 확장 프로그램
2. IDE 내에서 다음 명령을 사용하여 MCP 서버를 설치하세요: npx @agentdeskai/browser-tools-mcp@latest
3. 새 터미널을 열고 다음 명령을 실행하세요: npx @agentdeskai/browser-tools-server@latest

• IDE마다 구성이 다르지만 이 명령은 일반적으로 좋은 시작점입니다. 적절한 구성 설정에 대해서는 IDE 문서를 참조하세요.

중요 팁 - 설치해야 할 서버가 두 개 있습니다.

• 브라우저 도구 서버(로그를 수집하기 위한 미들웨어인 로컬 Node.js 서버) 및
• browser-tools-mcp(IDE에 설치하여 확장 프로그램과 통신하는 MCP 서버 + browser-tools-server)

npx @agentdeskai/browser-tools-mcp@latest IDE에 입력한 내용이고 npx @agentdeskai/browser-tools-server@latest 새 터미널 창에서 실행하는 내용입니다.

세 단계를 거친 후 Chrome 개발자 도구를 열고 BrowserToolsMCP 패널을 엽니다.

여전히 문제가 있는 경우 다음 단계를 시도해 보세요.

• 브라우저를 종료하세요. 창뿐만 아니라 Chrome 자체도 모두 종료하세요.
• 로컬 노드 서버(browser-tools-server)를 다시 시작합니다.
• Chrome 개발자 도구 패널이 하나만 열려 있는지 확인하세요.

그 후에는 작동해야 하지만, 작동하지 않을 경우 알려주시면 문제에 대한 로그/정보를 수집하기 위한 몇 가지 추가 단계를 공유해 드리겠습니다!

질문이나 문제가 있으시면 언제든지 이슈 티켓을 열어주세요! 개선 아이디어가 있으시면 언제든지 연락 주시거나, 개선 태그를 붙여 이슈 티켓을 열어주시거나, x에서 @tedx_ai 로 연락 주세요.

전체 업데이트 참고 사항:

Cursor와 같은 코딩 에이전트는 현재 페이지에 대해 이러한 감사를 원활하게 실행할 수 있습니다. BrowserTools MCP는 Puppeteer와 Lighthouse npm 라이브러리를 활용하여 다음과 같은 작업을 수행할 수 있습니다.

• WCAG 규정 준수를 위한 페이지 평가
• 성능 병목 현상 식별
• 온페이지 SEO 문제 신고
• 웹 개발 모범 사례 준수 확인
• SEO와 관련된 NextJS 특정 문제 검토

...IDE를 벗어나지 않고도 모두 가능합니다 🎉

🔑 주요 추가 사항

🛠️ 감사 도구 사용

✅ 시작하기 전에

다음 사항을 확인하세요.

• 브라우저의 활성 탭
• BrowserTools 확장 기능이 활성화되었습니다.

▶️ 감사 실행

헤드리스 브라우저 자동화 :
Puppeteer는 헤드리스 Chrome 인스턴스를 자동화하여 페이지를 로드하고 감사 데이터를 수집하여 JavaScript를 통해 로드된 SPA 또는 콘텐츠에 대해서도 정확한 결과를 보장합니다.

헤드리스 브라우저 인스턴스는 연속된 감사 요청을 효율적으로 처리하기 위해 마지막 감사 호출 후 60초 동안 활성 상태를 유지합니다.

구조화된 결과 :
각 감사는 전체 점수와 세부적인 문제 목록을 포함하는 구조화된 JSON 형식으로 결과를 반환합니다. 이를 통해 MCP 호환 클라이언트는 결과를 쉽게 해석하고 실행 가능한 인사이트를 제시할 수 있습니다.

MCP 서버는 현재 페이지에서 감사를 실행할 수 있는 도구를 제공합니다. 다음은 감사를 트리거하는 데 사용할 수 있는 쿼리 예시입니다.

접근성 감사( runAccessibilityAudit )

WCAG와 같은 접근성 표준을 페이지가 충족하는지 확인합니다.

예시 쿼리:

• "이 페이지에 접근성 문제가 있나요?"
• "접근성 감사를 실행하세요."
• "이 페이지가 WCAG 표준을 충족하는지 확인하세요."

성과 감사( runPerformanceAudit )

성능 병목 현상과 로딩 문제를 식별합니다.

예시 쿼리:

• "이 페이지가 왜 이렇게 느리게 로딩되나요?"
• "이 페이지의 성능을 확인하세요."
• "성과 감사를 실시합니다."

SEO 감사( runSEOAudit )

페이지가 검색 엔진에 얼마나 최적화되어 있는지 평가합니다.

예시 쿼리:

• "이 페이지의 SEO를 어떻게 개선할 수 있나요?"
• "SEO 감사를 실행하세요."
• "이 페이지의 SEO를 확인하세요."

모범 사례 감사( runBestPracticesAudit )

웹 개발의 일반적인 모범 사례를 확인합니다.

예시 쿼리:

• "모범 사례 감사를 실행하세요."
• "이 페이지에서 모범 사례를 확인하세요."
• "이 페이지에 모범 사례와 관련된 문제가 있나요?"

감사 모드( runAuditMode )

모든 감사를 특정 순서대로 실행합니다. 프레임워크가 감지되면 NextJS 감사를 실행합니다.

예시 쿼리:

• "감사 모드를 실행합니다."
• "감사 모드로 들어가세요."

NextJS 감사( runNextJSAudit )

NextJS 애플리케이션에 대한 모범 사례 및 SEO 개선 사항 확인

예시 쿼리:

• "NextJS 감사를 실행합니다."
• "NextJS 감사를 실행하세요. 앱 라우터를 사용하고 있습니다."
• "NextJS 감사를 실행하세요. 페이지 라우터를 사용하고 있습니다."

디버거 모드( runDebuggerMode )

특정 순서로 모든 디버깅 도구를 실행합니다.

예시 쿼리:

• "디버거 모드로 들어가세요."

건축학

브라우저 데이터를 캡처하고 분석하는 데 사용되는 핵심 구성 요소는 세 가지입니다.

1. Chrome 확장 프로그램 : 스크린샷, 콘솔 로그, 네트워크 활동 및 DOM 요소를 캡처하는 브라우저 확장 프로그램입니다.
2. 노드 서버 : Chrome 확장 프로그램과 MCP 서버의 모든 인스턴스 간 통신을 원활하게 해주는 중개 서버입니다.
3. MCP 서버 : AI 클라이언트가 브라우저와 상호 작용할 수 있는 표준화된 도구를 제공하는 모델 컨텍스트 프로토콜 서버입니다.

지엑스피1

모델 컨텍스트 프로토콜(MCP)은 Anthropic AI 모델에서 지원하는 기능으로, 호환되는 모든 클라이언트에 대한 사용자 지정 도구를 만들 수 있도록 합니다. Claude Desktop, Cursor, Cline, Zed와 같은 MCP 클라이언트는 MCP 서버를 실행하여 클라이언트에게 사용 가능한 새 도구에 대해 "교육"할 수 있습니다.

이러한 도구는 외부 API를 호출할 수 있지만, 저희의 경우 모든 로그는 사용자 컴퓨터에 로컬로 저장되며 타사 서비스나 API로 전송되지 않습니다. BrowserTools MCP는 BrowserTools Chrome 확장 프로그램과 통신하는 NodeJS API 서버의 로컬 인스턴스를 실행합니다.

BrowserTools MCP 서버 인터페이스의 모든 소비자는 동일한 NodeJS API와 Chrome 확장 프로그램을 사용합니다.

크롬 확장 프로그램

• XHR 요청/응답 및 콘솔 로그를 모니터링합니다.
• 선택된 DOM 요소를 추적합니다
• 모든 로그와 현재 요소를 BrowserTools 커넥터로 보냅니다.
• 스크린샷을 캡처/전송하기 위해 Websocket 서버에 연결합니다.
• 사용자가 토큰/잘림 제한 + 스크린샷 폴더 경로를 구성할 수 있습니다.

노드 서버

• Chrome 확장 프로그램과 MCP 서버 사이의 미들웨어 역할을 합니다.
• Chrome 확장 프로그램에서 로그와 현재 선택된 요소를 수신합니다.
• 로그, 스크린샷 또는 현재 요소를 캡처하기 위해 MCP 서버에서 요청을 처리합니다.
• Chrome 확장 프로그램에 Websocket 명령을 전송하여 스크린샷을 캡처합니다.
• 토큰 제한을 피하기 위해 로그에서 문자열과 중복 객체 수를 지능적으로 잘라냅니다.
• MCP 클라이언트의 LLM으로 전송되는 것을 방지하기 위해 쿠키와 중요한 헤더를 제거합니다.

MCP 서버

• 모델 컨텍스트 프로토콜을 구현합니다
• AI 클라이언트를 위한 표준화된 도구 제공
• 다양한 MCP 클라이언트(Cursor, Cline, Zed, Claude Desktop 등)와 호환됩니다.

설치

설치 단계는 다음 문서에서 확인할 수 있습니다.

• BrowserTools MCP 문서

용법

시스템을 설치하고 구성하면 호환되는 모든 MCP 클라이언트에서 다음을 수행할 수 있습니다.

• 브라우저 콘솔 출력 모니터링
• 네트워크 트래픽 캡처
• 스크린샷 찍기
• 선택된 요소 분석
• MCP 서버에 저장된 로그를 삭제합니다.
• 접근성, 성능, SEO 및 모범 사례 감사를 실행합니다.

호환성

• 모든 MCP 호환 클라이언트와 함께 작동합니다.
• 주로 Cursor IDE 통합을 위해 설계되었습니다.
• 다른 AI 편집기 및 MCP 클라이언트를 지원합니다.