브라우저 제어를 위한 AnythingLLM MCP 에이전트 설정 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
DevOps
대상자
- 중급 이상 개발자/DevOps 엔지니어
- LLM(대규모 언어 모델)과 브라우저 자동화 도구 통합에 관심 있는 사용자
- MCP(Model Context Protocol) 기반 시스템 개발자
핵심 요약
- MCP 프로토콜을 통해 AnythingLLM이 Chrome을 제어하는 방식
@agent명령어를 사용해 자연어로 브라우저 작업을 지시할 수 있음- Chrome 디버깅 모드 활성화 및 MCP 서버 연결 절차
--remote-debugging-port=9222와--user-data-dir옵션 사용bun install및bun start로 MCP 서버 실행- AnythingLLM 설정 파일 수정 방법
anythingllm_mcp_servers.json에"type": "chrome-control"추가
섹션별 세부 요약
1. Chrome 디버깅 모드 설정
- Chrome 실행 시 디버깅 포트와 사용자 데이터 경로 지정 필요
- 명령어:
```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp
```
- 포트 9222에서 디버깅 서버가 실행됨
127.0.0.1:9222주소로 접근 가능
2. Chrome MCP 서버 설치 및 실행
- GitHub에서 chrome-mcp 레포 클론 후 의존성 설치
- 명령어:
```bash
git clone https://github.com/alekseysmolenchuk/chrome-mcp.git
cd chrome-mcp
npm install -g bun
bun install
bun start
```
- MCP 서버가 포트 3000에서 Chrome 디버깅 서버와 연결
- 로그 확인:
Connected to Chrome remote debugger on port 9222
3. AnythingLLM MCP 서버 설정
- 설정 파일 경로:
~/Library/Application Support/anythingllm-desktop/storage/plugins/anythingllm_mcp_servers.json - JSON 파일에 Chrome MCP 서버 정보 추가
- 예시 구조:
```json
{
"mcpServers": {
"chrome-control": {
"url": "http://localhost:3000"
}
}
}
```
4. AnythingLLM에서 MCP 에이전트 사용
- 설정 > Agent Skills에서 "chrome-control" 서버가 활성화됨
- 채팅 시
@agent명령어 사용 예시 - 요청:
```plaintext
@agent I want to create a new blog post on dev.to. Can you take me there in a new chrome tab?
```
- 결과: 새로운 Chrome 탭에서 dev.to 블로그 작성 페이지로 이동
결론
- MCP 프로토콜을 활용해 LLM과 브라우저 간 직접 연동 가능
@agent명령어로 간단한 자연어 지시 가능- DevOps 환경에서 브라우저 자동화 도구 개발 시 MCP 서버 사용 권장
anythingllm_mcp_servers.json파일 수정을 통해 빠른 설정 가능