WebMCP 제안서

Source: Hacker News

소개 {#intro}

WebMCP API는 웹 개발자가 웹‑애플리케이션 기능을 도구로 노출할 수 있게 하는 새로운 JavaScript 인터페이스입니다—자연어 설명과 구조화된 스키마를 가진 JavaScript 함수이며, 다음에 의해 호출될 수 있습니다:

• 에이전트 [#agent]
• 브라우저 에이전트 [#browsers-agent]
• 보조 기술 (WAI‑ARIA)

WebMCP를 사용하는 웹 페이지는 Model Context Protocol (MCP) 서버 [#biblio-mcp]로 생각할 수 있으며, 백엔드가 아니라 클라이언트 측 스크립트에서 도구를 구현합니다. WebMCP는 사용자와 에이전트가 동일한 웹 인터페이스 내에서 함께 작업하는 협업 워크플로를 가능하게 하며, 기존 애플리케이션 로직을 활용하면서 공유된 컨텍스트와 사용자 제어를 유지합니다.

용어 {#terminology}

• Agent – 사용자의 목표를 이해하고 사용자를 대신해 그 목표를 달성하기 위해 행동을 취할 수 있는 자율적인 도우미. 오늘날 에이전트는 일반적으로 대규모 언어 모델(LLM) 기반 AI 플랫폼에 의해 구현되며, 텍스트 기반 채팅 인터페이스를 통해 사용자와 상호작용한다.
• Browser’s agent – 브라우저가 제공하거나 브라우저를 통해 제공되는 에이전트. 브라우저에 직접 내장되었거나(예: 확장 프로그램이나 플러그인 형태로) 브라우저가 호스팅할 수 있다.
• AI platform – OpenAI의 ChatGPT, Anthropic의 Claude, Google의 Gemini와 같이 에이전트형 도우미를 제공하는 플랫폼.

보안 및 개인정보 고려 사항

내용을 추가 예정.

접근성 고려 사항 {#accessibility}

추가될 내용.

API

Navigator 인터페이스에 대한 확장

Navigator 인터페이스가 확장되어 ModelContext에 접근할 수 있게 됩니다.

partial interface Navigator {
  [SecureContext, SameObject] readonly attribute ModelContext modelContext;
};

---

ModelContext 인터페이스

ModelContext 인터페이스는 웹 애플리케이션이 에이전트에 의해 호출될 수 있는 도구들을 등록하고 관리할 수 있는 메서드를 제공합니다.

[Exposed=Window, SecureContext]
interface ModelContext {
  undefined provideContext(optional ModelContextOptions options = {});
  undefined clearContext();
  undefined registerTool(ModelContextTool tool);
  undefined unregisterTool(DOMString name);
};

메서드

알고리즘 단계 (플레이스‑홀더)

provideContext(options)

TODO: fill this out.

clearContext()

TODO: fill this out.

registerTool(tool)

TODO: fill this out.

unregisterTool(name)

TODO: fill this out.

---

ModelContextOptions 딕셔너리

dictionary ModelContextOptions {
  sequence tools = [];
};

• options["tools"] – 브라우저에 등록할 도구들의 목록입니다. 목록에 있는 각 도구 이름은 고유해야 합니다.

---

ModelContextTool 딕셔너리

ModelContextTool 딕셔너리는 에이전트가 호출할 수 있는 도구를 설명합니다.

dictionary ModelContextTool {
  required DOMString name;
  required DOMString description;
  object inputSchema;
  required ToolExecuteCallback execute;
  ToolAnnotations annotations;
};

dictionary ToolAnnotations {
  boolean readOnlyHint;
};

callback ToolExecuteCallback = Promise(object input, ModelContextClient client);

• tool["name"] – 도구의 고유 식별자입니다. 에이전트는 도구 호출 시 이 이름을 사용해 도구를 참조합니다.
• tool["description"] – 도구 기능에 대한 자연어 설명입니다. 에이전트가 언제, 어떻게 도구를 사용할지 이해하는 데 도움이 됩니다.
• tool["inputSchema"] – 도구가 기대하는 입력 매개변수를 설명하는 JSON Schema 객체입니다.
• tool["execute"] – 에이전트가 도구를 호출할 때 실행되는 콜백 함수입니다. 이 함수는 입력 매개변수와 ModelContextClient 객체를 받습니다. 함수는 비동기일 수 있으며 프라미스를 반환합니다; 에이전트는 프라미스가 해결될 때 결과를 받습니다.
• tool["annotations"] – 도구 동작에 대한 추가 메타데이터를 제공하는 선택적 주석입니다.

ToolAnnotations 딕셔너리 (메타데이터)

• annotations["readOnlyHint"] – true인 경우, 해당 도구가 상태를 변경하지 않고 데이터를 읽기만 함을 나타냅니다. 이 힌트는 에이전트가 도구를 안전하게 호출할 수 있는 시점을 판단하는 데 도움이 됩니다.

ModelContextClient 인터페이스 {#model-context-client}

ModelContextClient 인터페이스는 ModelContext API를 통해 사이트가 제공한 도구를 실행하는 에이전트(#agent)를 나타냅니다.

Exposed: Window
SecureContext

interface ModelContextClient {
  Promise requestUserInteraction(
    UserInteractionCallback callback
  );
};

콜백 정의

callback UserInteractionCallback = Promise ();

사용 예

client.requestUserInteraction(callback);

도구 실행 중에 비동기적으로 사용자 입력을 요청합니다.

• callback 함수는 사용자 상호작용을 수행하기 위해 호출됩니다 (예: 확인 대화 상자를 표시).
• 반환된 Promise는 콜백의 결과로 해결됩니다.

메서드 단계

TODO: 내용을 채워 주세요.

감사의 글 {#acknowledgements}

다음 분들의 초기 설명, 제안 및 토론 덕분에 이 사양의 기반이 마련되었습니다:

• Brandon Walderman
• Leo Lee
• Andrew Nolan
• David Bokan
• Khushal Sagar
• Hannah Van Opstal
• Sushanth Rajasankar

Alex Nahas와 Jason McGhee가 초기 구현 경험을 공유해 주신 것에 특별히 감사드립니다.

마지막으로, Web Machine Learning Community Group 참가자들의 피드백과 제안에 감사드립니다.