WebMCP는 AI 에이전트가 웹 콘텐츠와 상호작용하는 방식을 혁신하기 위해 고안된 클라이언트 측 프레임워크입니다. 기존의 'Backend integration'(예: Model Context Protocol, OpenAPI)이 서버 대 서버 통신에 의존하여 UI와 상태 동기화의 어려움을 겪는 것과 달리, WebMCP는 브라우저 내에서 직접 웹 페이지의 기능과 DOM을 AI 에이전트에 노출합니다.

핵심 방법론 및 기술적 구조

1. Imperative Tool Registration (document.modelContext):

웹 개발자는 document.modelContext.registerTool() 메서드를 통해 클라이언트 측 JavaScript 함수를 'tool'로 등록합니다. 각 툴은 name, description, 그리고 JSON Schema 형식의 inputSchema를 포함합니다.

• 툴 호출 과정: Registration (페이지가 툴 등록) → Discovery (에이전트가 스키마 탐색) → Invocation (에이전트가 인자와 함께 툴 호출) → Execution (브라우저가 중재하여 JS 콜백 실행) → Response (결과를 에이전트로 반환).

2. Declarative API:

표준 HTML $<form>$ 요소를 기반으로 툴 정의를 자동 합성하는 방식입니다. 이는 복잡한 JS 작성 없이도 기존의 웹 폼을 AI가 직접 제어할 수 있게 합니다.

3. 권한 및 보안 모델:
   • Permissions Policy: $allow="tools"$ 속성을 통해 특정 iframe에 툴 노출 권한을 제어합니다.
   • exposedTo: 특정 오리진(origin)에만 툴을 공유할 수 있도록 설계되어, 신뢰할 수 있는 에이전트에게만 기능을 노출합니다.

4. 기존 자동화 기법과의 차이:

기존의 DOM scraping이나 브라우저 자동화 도구(Simulated user input)가 가진 느리고 불안정한 한계를 극복합니다. WebMCP는 웹 페이지가 직접 에이전트에게 구조화된 API를 제공함으로써 더 정교하고 직접적인 인터랙션을 가능하게 합니다.

기술적 특징

• JavaScript 재사용: 기존 클라이언트 측 비즈니스 로직을 그대로 재활용하여 에이전트 전용 툴로 변환할 수 있습니다.
• Human-in-the-loop: 사용자, 에이전트, 그리고 웹 UI가 공유된 컨텍스트 내에서 협력하여 작업을 수행합니다.
• Service Workers 연동 (예정): 현재 페이지가 열려 있지 않아도 백그라운드에서 툴을 발견하고 호출할 수 있는 메커니즘을 계획 중입니다.

이 기술은 웹 페이지를 일종의 'in-page MCP server'로 전환하여, 사용자가 AI 에이전트와 함께 웹 인터페이스상에서 생산적인 작업을 수행할 수 있도록 지원하는 것을 목표로 합니다.