Claude Desktop을 위한 AI 기반 브라우저 자동화 서버
요약
이 기술 기사는 Claude Desktop 환경에서 자연어 명령어를 사용하여 브라우저 자동화 작업을 수행할 수 있도록 돕는 'Browser AI MCP 서버' 구축 방법을 설명합니다. 이 서버는 사용자의 일반적인 영어 명령어(예: '로그인 버튼 클릭')를 받아, 내부적으로 Playwright 도구 호출 시퀀스로 지능적으로 변환하고 실행하여 복잡한 웹 상호작용을 자동화합니다. OAuth 또는 환경 변수를 통해 Anthropic API 키로 인증하며, Claude의 강력한 AI 능력을 활용해 브라우저 제어의 접근성을 혁신합니다.
핵심 포인트
- 자연어 명령어를 Playwright 도구 호출 시퀀스로 자동 변환하여 브라우저를 제어할 수 있습니다.
- Claude Desktop 환경에 MCP 서버로 통합되어 사용되며, OAuth 또는 API 키 방식으로 인증됩니다.
- 단순한 명령어(예: '로그인 버튼 클릭')부터 복잡한 작업(예: 폼 작성 및 제출)까지 처리 가능합니다.
- 설치 및 설정은 `npx` 명령어를 통해 이루어지며, Playwright MCP 서버와 Claude Code 구독이 필수적입니다.
자연어 브라우저 제어: 평범한 영어 명령어로 브라우저 자동화 작업을 실행합니다
Claude 통합: OAuth (Claude Code 구독 사용) 를 통해 Claude 의 AI 능력을 활용합니다
지능형 도구 매핑: AI 가 명령어를 적절한 Playwright 도구 호출로 자동으로 번역합니다
세션 관리: 여러 브라우저 자동화 명령어 간의 컨텍스트를 유지합니다
오류 복구: 유용한 피드백을 제공하는 스마트 오류 처리
Smithery 를 통해 Browser AI 를 Claude Desktop 에 자동으로 설치하려면:
npx -y @smithery/cli install @qckfx/browser-ai --client claude
또는 다음 명령어로 직접 npx 를 사용하세요:
npx @qckfx/browser-ai
Browser AI MCP 서버는 Anthropic API 액세스가 필요합니다. 인증 옵션은 두 가지입니다:
Claude 구독이 있는 경우, Claude 계정을 사용하여 구독 크레딧을 사용하도록 인증합니다:
npx @qckfx/browser-ai --auth
이는 OAuth 인증을 위한 브라우저 창을 열게 됩니다. 승인 후 토큰이 안전하게 저장되며 API 사용은 Claude 구독에 부과됩니다.
또는 환경 변수를 설정하여 Anthropic API 키를 사용할 수 있습니다:
export ANTHROPIC_API_KEY="your-api-key-here"
인증 후 Claude Code 에 서버를 추가합니다:
claude mcp add browser-ai -- npx --yes @qckfx/browser-ai@latest
API 키 인증을 사용하는 경우, 환경 변수로 전달할 수 있습니다:
claude mcp add browser-ai --env ANTHROPIC_API_KEY="your-api-key-here" -- npx --yes @qckfx/browser-ai@latest
Claude Desktop 을 사용하는 경우, 다음을 Claude Desktop 구성 파일 (claude_desktop_config.json) 에 추가합니다:
{
"mcpServers": {
"browser-ai": {
...
구성이 완료되면 Claude 에서 브라우저 자동화를 제어하기 위해 자연어 명령어를 사용할 수 있습니다:
네비게이션: "example.com 으로 이동하고 페이지가 로드될 때까지 기다리세요"
클릭: "로그인 버튼을 클릭하세요"
폼 작성: "username 필드에 'john.doe@example.com'을 입력하세요"
스크린샷: "현재 페이지의 스크린샷을 찍으세요"
복잡한 작업: "테스트 데이터로 등록 폼을 작성하고 제출하세요"
- Claude 에 자연어 명령어를 제공합니다
- AI 가 의도를 해석하고 Playwright 도구 호출로 분해합니다
- 서버는 Playwright MCP 서버를通过这些 실행합니다
- 결과는 사용자 친화적인 형식으로 반환됩니다
browser-ai/
├── src/
│ ├── auth/ # OAuth 인증
...
git clone <repository>
cd browser-ai
npm install
...
통합 테스트를 실행합니다:
npm test
디버그 로깅을 활성화합니다:
npx browser-ai --debug
사용자 명령어 → Claude → Browser AI MCP → AI 에이전트 → Playwright MCP → 브라우저
↓
Claude (OAuth 를 통해)
서버는 자연어 명령어를 받는 단일 browser_ai 도구를 노출합니다. 그런 다음:
- Claude 를 사용하여 명령어를 해석합니다
- Playwright 도구 호출 시퀀스를 생성합니다
- Playwright MCP 클라이언트를通过这些 실행합니다
- 인간 친화적인 요약본을 반환합니다
인증 오류를 마주하는 경우:
npx browser-ai --auth를 실행하여 재인증하세요 - 활성 Claude Code 구독이 있는지 확인하세요- 토큰이 만료되지 않았는지 확인하세요
Playwright MCP 서버에 연결 실패 시:
-
Playwright MCP 가 설치되었는지 확인:
npm install -g @playwright/mcp -
환경 변수
PLAYWRIGHT_MCP_PATH를 확인하고 디버그 모드를 활성화하여 상세 로그를 확인하세요.
명령어가 실행에 실패할 경우:
- 브라우저가 예상 상태인지 확인하세요.
- 복잡한 명령어를 단순한 단계로 나누어 시도하세요.
- 구체적인 오류 메시지를 확인하기 위해 디버그 로그를 확인하세요.
필수 조건:
- Node.js 18 이상
- 활성 Claude Code 구독
- Playwright MCP 서버
MIT 라이선스
기여는 환영합니다! PR 을 제출하기 전에 기여 가이드라인을 읽어주세요.
문제 보고 및 기능 요청은 GitHub 이슈 트래커를 사용하세요.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub Claude Ecosystem의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기