WebMCP: 웹사이트에 MCP 지원을 가능하게 하여 AI 어시스턴트와 웹 앱이 상호작용하도록 191

WebMCP는 브라우저 기반 MCP 구현方案으로, AI 어시스턴트가 표준화된 도구를 통해 웹 애플리케이션과 상호작용할 수 있도록 합니다. MCP 서버를 웹 페이지에 내장하여 웹 애플리케이션과 직접 통합되며, API 키나 OAuth 구성이 필요 없고, 브라우저로 직접 접속하여 실시간으로 동기화되며, 웹 애플리케이션 상태와 직접 통합되어 여러 웹 애플리케이션 간의 워크플로우를 지원합니다. 이를 통해 AI 어시스턴트가 여러 다른 웹 애플리케이션에서 자동으로 작업을 수행할 수 있게 해주며, 기존 MCP方案이 브라우저를 우회하는 문제를 해결하고 동시에 브라우저의 인증 및 보안 모델을 활용합니다.

주요 기능：

✅ 브라우저 세션과 Cookie를 사용한 인증.

✅ JSON-RPC 인터페이스를 통한 작업으로 DOM 조작 회피.

✅ 웹 애플리케이션 상태와 실시간 동기화.

✅ 모든 JavaScript 프레임워크 또는 순수 JavaScript에 적용 가능.

✅ 구현 코드가 일반적으로 50줄 미만.

✅ 브라우저의 동일 출처 정책 및 권한 준수.

프로젝트 특징：

✅ 브라우저 인증 메커니즘을 활용하여 복잡한 구성 및 API 키 관리 불필요.

✅ AI 어시스턴트가 구조화된 데이터에 직접 접근하여 상호작용 효율성 향상.

✅ 크로스 애플리케이션 워크플로우 지원, 각 애플리케이션은 독립적인 인증 및 접근 제어 유지.

✅ 브라우저 보안 모델 내에서 실행되어 데이터 보안 보장.

프로젝트 아키텍처：

• Tab MCP Servers：웹 페이지 내에서 실행되어 인증 API와 상호작용.

• MCP-B Extension：탭 서버와 AI 어시스턴트를 연결하고 도구를 집계하여 요청 라우팅.

• Transport Layers：브라우저 메시지 전달 API를 통한 안전한 통신 구현.

기술 스택：

• 프론트엔드：React + TanStack Query + Shadcn UI.

• 백엔드：Cloudflare Workers + Hono.js + PostgreSQL + Drizzle ORM.

• 데이터 동기화：ElectricSQL을 통한 실시간 동기화.

사용 방법：

✅ 고급 사용자：

• 의존성 설치：pnpm install

• 개발 서버 시작：pnpm dev

• 프로젝트 빌드：pnpm build

✅ 일반 사용자：

Chrome Web Store에서 브라우저 플러그인 확장을 설치하면, API 키 구성이 필요 없이 AI 어시스턴트가 기존 세션을 통해 웹사이트와 상호작용할 수 있습니다.

프로젝트 주소：https://github.com/MiguelsPizza/WebMCP

공식 사이트 주소：https://mcp-b.ai/