[Cursor] 웹 개발에 유용한 MCP 적용 방법 (Browser tools)

Cursor 이용 중 MCP(Model Context Protocol)라는 것에 대해 알게 되었고, 적용하고자 어떤 MCP가 있는지 알아보던 중 유용한 MCP를 찾아 포스팅하게 되었다. MCP는 Cursor에 붙여 쓰는 라이브러리 정도로 받아들이면 된다.

 

Browser tools란?

Browser tools는 Cursor와 웹 브라우저를 연결하여 자동화를 가능하게 하는 MCP로, AI Agent가 브라우저 작업을 제어할 수 있게 해 준다. 스크린샷 촬영, 페이지 탐색, 양식 작성, 데이터 스크래핑 등이 가능하여 반복적인 브라우저 작업을 자동화하거나 실시간 웹 데이터를 가져와 코딩을 해 프론트엔드 개발에 유용하다고 한다.

 

Browser tools를 사용하기 위한 환경 설정

1. Node.js 16버전 이상이 설치되어 있어야 한다. (터미널에서 node --version으로 확인)
2. Google Chrome과 같이 Chromium 기반 브라우저가 있어야 한다.
3. Cursor IDE가 필요하다.
4. CPU 4코어 이상, RAM 16GB 이상, 하드 10GB 이상인 경우 원활히 동작한다.

 

Browser tools 사용 방법

1) Brower tools mcp의 홈 베이스 디렉토리를 생성한다.

현재는 윈도우 환경에서 작업 중이라, D:\01._ Dev\MCP\browser-tools-mcp 경로에 폴더를 생성하였다.

$ mkdir browser-tools-mcp
$ cd browser-tools-mcp

 

2) 크롬 확장 프로그램을 다운로드한다.

$ git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

 

3) 크롬 계열 브라우저의 확장앱 설정 창으로 들어간다. (주소창에 chrome://extensions/ 입력)

 

4) 개발자 모드를 활성화 한 뒤, "압축해제 된 확장앱 설치" 버튼을 클릭한다.

Whale 브라우저는 하단에 이렇게 표기되어 있다.

 

5) 2에서 다운로드 한 폴더를 선택한 뒤, 확장앱 목록에 BrowserTools MCP가 정상적으로 보이는지 확인한다.

 

6) Cursor 설정 창으로 이동하여 다음 내용을 입력하고 MCP Server를 생성한다. (3025 포트 사용)

{
  "mcpServers": {
    "browser-tools-mcp": {
      "command": "npx",
      "args": [
        "-y", "@agentdeskai/browser-tools-mcp@1.2.0"
      ]
    }
  }
}

설정 - MCP 탭에 생성된 모습

 

 

7) 다음 명령을 실행하여 BrowserToolsMCP 서버를 실행한다.

$ npx @agentdeskai/browser-tools-server@latest

npx @agentdeskai/browser-tools-server@latest 실행 화면

 

Browser tools 기능

먼저, 확장앱이 실행된 경우 다음과 같은 알림이 브라우저 상단에 뜰 것이며

 

개발자 도구의 BrowserToolsMCP 탭을 이용할 수 있다. 페이지를 새로고침하거나 MCP 서버가 다시 시작될 때 로그는 지워진다.

스크린샷 캡처, 스크린샷 저장 경로 설정, 저장된 로그 지우기, 로깅 제한 및 잘라내기 설정 조정

 

Cursor 내에서는 다음과 같이 이용할 수 있다.

• 현재 페이지의 콘솔 로그 확인(캡처)
• 특정 URL의 스크린샷 캡처 등