Web MCP Bridge를 사용한 웹 브라우저에서의 MCP 활용 방법 (ChatGPT, Claude, DeepSeek 및 Gemini)

Anthropic의 Model Context Protocol (MCP)은 LLM이 로컬 환경, 데이터베이스, 사용자 지정 개발자 도구와 상호 작용하는 방식을 혁신했습니다. 하지만 주요한 한계가 있었습니다. 즉, 네이티브 MCP 기능이 Claude Desktop이나 Cursor 같은 데스크톱 앱에 주로 묶여 있었다는 점입니다.

만약 사용자가 ChatGPT, Claude.ai, Google Gemini 또는 DeepSeek의 무료 웹 인터페이스에 주로 의존한다면, 로컬 컴퓨터의 컨텍스트에 접근하는 것이 어려웠습니다.

이러한 격차를 해소하기 위해, 저는 Web MCP Bridge를 구축했습니다. 이는 오픈 소스 Chrome 확장 프로그램이자 Python WebSocket 브리지로, 실제 로컬 MCP 실행을 웹 기반 AI 채팅 인터페이스에 직접 가져옵니다.

🛠️ 아키텍처: 작동 방식
Web MCP Bridge는 사용자의 웹 브라우저와 로컬 OS 환경 사이에 실시간의 저지연 링크를 구축합니다:

[ 웹 브라우저 (ChatGPT / Claude / Gemini) ]
│
▼ (확장 프로그램 인젝터)
[ 로컬 WebSocket 브리지 (Python / Node) ]
│
▼ (표준 입력/출력 / MCP 프로토콜)
[ 로컬 MCP 서버 (파일 시스템, 터미널, 데이터베이스, 3D 렌더러) ]

• Chrome 확장 프로그램: 프롬프트 컨텍스트를 모니터링하고 도구 실행 페이로드 블록을 처리합니다.
• 로컬 WebSocket 서버: 사용자의 장치에서 가벼운 백그라운드 프로세스를 실행합니다.
• MCP 서버: 로컬 스크립트를 실행하거나, 파일을 검사하거나, 데이터베이스 트랜잭션을 안전하게 관리합니다.

⚡ 무엇을 할 수 있나요?
로컬 기기 접근성을 웹 AI에 확장함으로써 다음과 같은 개발자 워크플로우를 실행할 수 있습니다:

• 💻 웹 프롬프트에서 로컬 CLI 및 PowerShell 명령어를 직접 실행합니다.
• 📁 프로젝트 파일 구조를 검사하고 코드 컨텍스트를 웹 LLM과 동기화합니다.
• 🗄️ 로컬 데이터베이스(SQLite, MySQL, PostgreSQL)에 안전하게 쿼리합니다.
• 🎨 3D 에셋 및 스크립트(예: OpenSCAD)를 실시간으로 렌더링합니다.
• 🤖 브라우저 인터페이스를 벗어나지 않고 로컬 OS 작업을 자동화합니다.

🚀 빠른 설정 가이드
준비하는 데 1분도 걸리지 않습니다:

1. 저장소 복제
   Bash를 사용하여 다음 명령어로 저장소를 복제합니다.
   git clone https://github.com/AstraxOf/web-mcp-bridge.git
   cd web-mcp-bridge
2. Chrome 확장 프로그램 설치
   브라우저를 열고 chrome://extensions/로 이동합니다.

• 개발자 모드(Developer mode) 활성화 (우측 상단 토글)
• '압축 해제된 확장 프로그램 로드(Load unpacked)'를 클릭하고 복제한 저장소의 확장 프로그램 디렉터리를 선택합니다.

1. 로컬 브릿지 시작하기
   Windows 사용자의 경우, server/ 디렉토리 내부에서 install.cmd를 실행하거나 (Linux/macOS의 경우 터미널을 통해 실행):

Bash
cd server
python bridge.py
연결이 완료되면 웹 채팅 인터페이스가 등록된 로컬 MCP 도구를 즉시 인식하게 됩니다.

📽️ 데모 및 사용 과정 (Demo & Walkthrough)
단계별 비디오 설정 및 라이브 시연을 확인해 보세요:

▶️ YouTube에서 데모 비디오 보기

🤝 오픈 소스 및 기여 (Open Source & Contributions)
Web MCP Bridge는 완전히 무료이며 오픈 소스입니다. 추가적인 웹 AI 제공업체 지원을 추가하거나, 사용자 지정 로컬 MCP 모듈을 구축하거나, WebSocket 브릿지를 최적화하든 관계없이 모든 기여를 환영합니다!

⭐️ GitHub 저장소: AstraxOf/web-mcp-bridge

아래 댓글로 알려주세요: 웹 AI 채팅에 연결하고 싶은 로컬 도구나 워크플로우는 무엇인가요?