5분 만에 Claude Code에 원격 브라우저 연결하기

Claude Code는 실제 브라우저를 구동할 수 있지만, 노트북의 브라우저는 공유하거나 보거나 정리하기 어렵습니다. neu-browser-mcp는 Claude Code에게 생성하고, CDP(Chrome DevTools Protocol)를 통해 구동하며, 삭제할 수 있는 원격 브라우저를 제공합니다. 또한, 관찰하거나 제어할 수 있는 라이브 뷰도 함께 제공됩니다.

이 튜토리얼은 API 키만 필요한 Kernel 백엔드를 사용합니다. 이를 통해 라이브 뷰, 파일 목록 확인, 파일 읽기 기능을 사용할 수 있습니다. 다운로드 링크는 Kernel에서 제공되지 않습니다.

1. 요구 사항

• Node.js 22 이상
• Claude Code
• Kernel API 키 (KERNEL_API_KEY)
• 브라우저 제어 단계용 agent-browser (설치는 README를 참조하세요)

2. 서버에 Claude Code 추가하기

claude mcp add browser \
  --env NEU_BROWSER_BACKEND=kernel \
  --env KERNEL_API_KEY=<your-key> \
...

이 키는 서버 환경에 유지되며, 에이전트는 이 키를 볼 수 없습니다.

3. 브라우저 요청하기

Claude Code를 시작하고 다음과 같이 요청합니다:

agent-browser를 사용하여 브라우저를 만들고 https://example.com을 열어주고, 페이지 제목을 알려줘.

Claude Code는 create_browser를 호출하여 browser_id, connect_command, 그리고 live_view_url을 반환합니다. 이후 connect_command를 실행하고 페이지 내용을 읽습니다.

4. 관찰하거나 제어하기

자신의 브라우저에서 live_view_url을 열어봅니다. 에이전트가 보는 것을 볼 수 있습니다. 페이지 내부를 클릭하여 제어권을 가져온 후, Claude Code에게 계속하라고 알려주면 제어권을 돌려줄 수 있습니다.

5. 다운로드된 내용 읽기

페이지에서 파일이 생성되면 다음과 같이 요청합니다:

브라우저의 파일을 나열하고 첫 번째 파일을 읽어줘.

list_browser_files와 read_browser_file 기능으로 이를 처리할 수 있습니다. 읽기 용량은 256 KB로 제한됩니다.

6. 정리하기

브라우저를 삭제해줘.

delete_browser가 이를 중지시킵니다. 유휴 상태의 브라우저는 백엔드의 시간 초과(Kernel에서는 기본적으로 한 시간)에 따라 종료됩니다.

이 기능이 수행하지 않는 것

• 클릭하거나, 타이핑하거나, 탐색하는 것은 아닙니다. 에이전트는 agent-browser, Playwright 또는 모든 CDP 클라이언트를 사용하여 브라우저를 구동합니다.
• 다른 백엔드(nap, browser-use, hyperbrowser)는 다른 기능을 가지고 있습니다. README의 표에 기능이 나열되어 있습니다.

저장소(Repository): https://github.com/neutree-ai/neu-browser-mcp