WebMCP: 웹사이트가 AI 에이전트에게 직접 도구를 선언하는 방법

TL;DR Highlight

사이트가 도구를 직접 선언하게 하면 에이전트가 DOM 추측 없이 호출한다

Who Should Read

AI 에이전트가 자사 웹앱의 버튼·폼을 긁다가 자꾸 깨져서 고민인 프론트엔드·풀스택 개발자

Core Mechanics

화면 긁기 대신 도구 선언
- 지금 에이전트는 HTML을 읽고 버튼을 추측해 클릭하고, 레이아웃이 바뀌면 깨진다.
- WebMCP는 사이트가 book_table 같은 도구를 이름·입력 스키마와 함께 직접 등록하는 방식이다.
- 디자인이 바뀌어도 도구 이름과 스키마가 같으면 계속 동작한다.
Chrome·Edge가 밀고 있는 초안 표준
W3C Web Machine Learning Community Group의 초안이며 정식 표준은 아니다.
- Chrome 149부터 origin trial로 제공되고 chrome://flags/#enable-webmcp-testing으로 로컬에서 켤 수 있다.
- Chrome 문서도 "변경될 수 있다"고 밝힌다.
도구 등록은 함수 하나
document.modelContext.registerTool에 name, description, inputSchema(JSON Schema), execute를 넘기면 된다.
- execute 안에서는 사이트에 이미 있는 함수(예: addTodoToPage)를 그대로 부른다.
- HTML 폼에 주석을 다는 선언형 방식도 있다.
실행은 로그인된 탭 안에서
execute는 사용자가 열어 둔 페이지의 JS와 세션으로 눈에 보이게 돌아간다.
- 헤드리스 백그라운드 실행은 없다.

Community Reactions

일반 API나 서버 MCP로 충분하지 않냐는 의견
- 새로 만드는 서비스라면 서버 측 MCP가 더 견고하다는 의견이 있다.
- WebMCP는 여러 사이트를 오가는 작업이나 이미 클라이언트에 있는 데이터 필터링 같은 UI 작업에 쓸모 있다는 의견이다.
- 레거시 Web UI가 큰 SaaS가 UI 위에 얹어 쓰기 좋다는 의견도 있다.
브라우저에 묶인 것이 약점이라는 의견
도구를 나열·호출하려면 JS 실행 환경이 필요해 브라우저 내 에이전트로 한정된다는 의견이다.
- .well-known에 옵션과 인자 목록을 두는 방식이 더 범용적이라는 의견도 있다.
사람용과 에이전트용이 어긋난다는 우려
사람용·에이전트용 정보를 따로 유지하면 시간이 지나 달라질 거라는 의견이다.
- 웹 역사상 새 기능은 0.1%만 제대로 채택한다는 회의적인 의견도 있다.
단순한 대안을 쓴 경험
HTMX 컴포넌트마다 AI용 요약과 가능한 동작을 노출하고 단기 토큰이 든 프롬프트를 복사하게 했더니 작은 모델도 잘 탐색했다는 경험이 있다.
- 접근성 엔지니어가 WebMCP를 AI로 위장한 접근성 기술이라고 했다는 의견도 있다.

How to Apply

내 사이트 액션 후보 3개 뽑기
- 30분 안에 사이트에서 에이전트가 하길 원하는 동작(검색, 필터, 티켓 생성 등)을 3개 적어라.
- 각각을 읽기·되돌릴 수 있는 변경·위험 행동으로 분류하라.
- 이미 있는 JS 함수가 있는지 확인하라.
Chrome 플래그 켜고 도구 1개 등록하기
chrome://flags/#enable-webmcp-testing을 켜라.
- 읽기 전용 도구 하나를 registerTool로 등록하라.
- DevTools의 Application → WebMCP 패널에서 도구가 보이는지 확인하라.
위험 행동 앞에 사람 승인 단계 두기
결제·제출처럼 되돌릴 수 없는 도구는 확인 창을 거치게 만들어라.
- 읽기 전용 도구에는 readOnlyHint를 달아라.
- 외부 콘텐츠를 돌려주는 도구에는 untrustedContentHint를 달아라.
API 이름 변경 대비 shim 넣기
document.modelContext와 navigator.modelContext를 둘 다 지원하도록 한 줄 shim을 넣어라.
- 프로덕션 배포는 하지 말고 실험 브랜치에서만 써라.

Try It

복사해서 바로 해보기

// Chrome 149+에서 chrome://flags/#enable-webmcp-testing 켠 뒤, 내 페이지 콘솔이나 스크립트에 붙여넣기

const mc = document.modelContext || navigator.modelContext;

await mc.registerTool({
  name: 'add_todo',
  description: 'Add an item to the to-do list',
  inputSchema: {
    type: 'object',
    properties: { text: { type: 'string' } },
    required: ['text']
  },
  execute: async ({ text }) => {
    addTodoToPage(text); // {{내 사이트에 이미 있는 함수로 교체}}
    return `Added to-do: ${text}`;
  }
});

// 이어서 해 볼 것: DevTools → Application → WebMCP 패널에서 도구가 보이는지 확인하고, 읽기 전용 도구를 하나 더 등록해 보기

Terminology

WebMCP웹페이지가 자기 기능을 AI 에이전트용 도구로 등록하게 하는 제안 표준이다. 사이트에 에이전트용 메뉴판을 붙이는 것과 비슷하다.

origin trialChrome이 아직 정식이 아닌 기능을 특정 사이트에서 미리 써 보게 하는 시험 제도다.

JSON Schema입력 데이터의 필드와 타입을 적어 두는 명세다. 에이전트가 무엇을 넘겨야 할지 알려 주는 주문서 양식 같은 것이다.

Permissions Policy페이지나 iframe이 쓸 수 있는 브라우저 기능을 제한하는 설정이다. 여기서는 다른 출처가 마음대로 도구를 등록하지 못하게 막는다.

readOnlyHint도구가 데이터를 바꾸지 않고 읽기만 한다는 표시다. 에이전트와 브라우저가 자유롭게 호출해도 되는 도구를 구분하는 데 쓴다.