WebMCP Starter webmcp-starter 정리: “Midnight Eats”로 보는 에이전트 친화적인 웹 주문 흐름

 

GitHub - Doriandarko/webmcp-starter: WebMCP starter demo — a DoorDash-style food delivery app with 9 AI agent tools (imperativ

 

요즘 “브라우저 에이전트” 데모를 보면, AI가 화면을 보고 버튼을 추측해서 클릭하고… 입력칸을 찾고… 운이 좋으면 성공하고, UI가 조금만 바뀌면 바로 깨지는 장면이 자주 나옵니다.
WebMCP는 이 문제를 정면으로 해결하려는 시도예요. 웹사이트(웹앱)가 “내가 할 수 있는 기능”을 도구(tool) 형태로 구조화해서 제공하면, 에이전트가 DOM을 더듬으며 추측하지 않아도 더 빠르고, 안정적으로, 정확하게 작업을 수행할 수 있다는 접근입니다. (Chrome for Developers)

그 관점을 아주 직관적으로 보여주는 예제가 바로 Doriandarko/webmcp-starter 레포입니다. (GitHub)

---

1) 이 레포는 뭐 하는 데모인가요?

webmcp-starter는 DoorDash 스타일의 음식 배달 주문 앱 흐름을, 단일 HTML 파일로 만들어 놓고(WebMCP 툴 포함), 브라우저 에이전트가 그 툴들을 호출해서 주문을 끝까지 진행하는 모습을 보여주는 “스타터 데모”입니다. 레포 이름은 WebMCP Starter — Midnight Eats로 되어 있어요. (GitHub)

핵심은 “UI 자동 클릭”이 아니라,

• 레스토랑 검색
• 메뉴 조회
• 장바구니 담기/삭제
• 쿠폰 적용
• 체크아웃(주소/팁/결제)
• 주문 상태 추적

같은 행동들을 WebMCP Tool API로 노출해두고, 에이전트가 그걸 호출하게 만든다는 점입니다. (GitHub)

---

2) WebMCP를 아주 쉽게 이해하면

WebMCP 스펙 설명을 한 문장으로 줄이면 이런 느낌입니다:

웹 개발자가 웹앱 기능을 “툴”로 정의해서, 브라우저 에이전트/AI 에이전트가 호출할 수 있게 만드는 제안 표준

스펙에서는 WebMCP를 “웹페이지가 클라이언트 사이드 스크립트로 MCP 서버처럼 동작(툴 제공)”하는 개념으로도 설명합니다. (GitHub)

그리고 Chrome 쪽 공식 소개 글에서는 WebMCP가 에이전트가 사이트와 상호작용할 때의 **모호함(추측)**을 줄이고, 더 견고한 에이전트 워크플로우를 만든다고 강조합니다. (Chrome for Developers)

---

3) “명령형(Imperative)” vs “선언형(Declarative)”가 왜 같이 나오나요?

이 데모가 흥미로운 포인트 중 하나가 두 가지 방식을 같이 보여준다는 점이에요.

Chrome 소개 글 기준으로 WebMCP는 크게 두 API 흐름을 제안합니다. (Chrome for Developers)

• Declarative API(선언형): HTML 폼(form) 으로 정의 가능한 표준 작업을 수행 (체크아웃 같은 “정형 입력”) (Chrome for Developers)
• Imperative API(명령형): JS 실행이 필요한 더 동적인/복잡한 상호작용 수행 (검색, 장바구니 조작 같은 “로직 중심”) (Chrome for Developers)

webmcp-starter의 9개 툴 중에서 checkout만 선언형, 나머지는 명령형으로 구성되어 있습니다. (GitHub)

---

4) 이 데모가 제공하는 9개 WebMCP 툴 정리

레포 README에 “DoorDash 스타일 주문 플로우를 커버하는 9개 툴”이 표로 정리돼 있습니다. (GitHub)

아래는 그걸 블로그용으로 보기 쉽게 다시 정리한 버전입니다.

Tool 이름타입하는 일(요약)

search_restaurants	Imperative	음식 종류/이름/식단 태그로 레스토랑 검색
get_menu	Imperative	특정 레스토랑의 전체 메뉴 조회
add_to_cart	Imperative	수량 + 요청사항 포함해서 장바구니 담기
remove_from_cart	Imperative	장바구니에서 항목 제거
get_cart	Imperative	장바구니 상태/합계 조회(읽기 전용)
clear_cart	Imperative	장바구니 비우기
apply_promo_code	Imperative	프로모 코드 적용(예: WELCOME20 등)
get_order_status	Imperative	주문 후 상태 추적
checkout	Declarative	주소/팁/결제 입력을 HTML 폼으로 처리

(프로모 코드 예시로 WELCOME20, FREEDELIVERY, SAVE5가 언급됩니다.) (GitHub)

---

5) 직접 돌려보는 방법(로컬 실행)

README 기준 “Chrome Canary + 플래그 + Inspector 확장” 조합으로 체험하는 방식입니다. (GitHub)

준비물

• Chrome Canary(146+)
• chrome://flags에서 WebMCP 관련 테스트 플래그 활성화
• Model Context Tool Inspector 확장 설치 (GitHub)

특히 확장 프로그램 설명에 다음이 명확히 적혀 있어요:

• Chrome 146.0.7672.0 이상
• chrome://flags에서 “WebMCP for testing” 플래그 활성화 (Chrome 웹 스토어)

실행 흐름

1. Chrome Canary 설치 (GitHub)
2. chrome://flags/#enable-webmcp-testing (또는 flags에서 “WebMCP for testing” 검색) 활성화 후 재시작 (GitHub)
3. Model Context Tool Inspector 확장 설치 (GitHub)
4. 레포의 food-app.html을 로컬에서 열기 (GitHub)
5. 확장을 열면, 페이지가 등록한 9개 툴을 목록으로 확인하고 수동 실행/에이전트 실행(설명상 Gemini 연동)까지 테스트할 수 있습니다. (GitHub)

참고: Chrome 측 공식 안내에서는 WebMCP가 “Early Preview”로 제공되며, 관련 문서/데모 접근을 위해 Early Preview Program 참여를 안내하고 있습니다. (Chrome for Developers)

---

6) (블로그용) 테스트 프롬프트 예시

README에는 “이탈리아 음식 주문 + 쿠폰 적용 + 주소/팁/카드로 체크아웃” 같은 시나리오를 예시로 들고 있어요. (GitHub)
그걸 한국어 프롬프트로 바꿔 쓰면 예를 들어:

“이탈리아 음식이 먹고 싶어. 이탈리아 레스토랑을 찾아서 마르게리타 피자 1개, 까르보나라 1개, 티라미수 1개를 장바구니에 담아줘. WELCOME20 쿠폰 적용하고, ‘742 Evergreen Terrace, Apt 3B’로 배송, 팁은 5달러, 결제는 Visa로 체크아웃해줘.”

(포인트는 “버튼 클릭”이 아니라, 에이전트가 페이지의 Tool을 호출하면서 플로우가 진행되는지 보는 겁니다.)

---

7) 이 데모가 주는 실전 인사이트

이 레포는 규모는 작지만 “에이전트 친화적 UI”를 만들 때의 핵심 감각을 잘 보여줍니다.

• 기능을 “도구 계약(contract)”로 드러내기
  툴 이름/설명/입출력 스키마를 제공하면, 에이전트가 UI를 추측해서 조작하는 방식보다 더 안정적인 자동화가 가능하다는 방향성 자체가 핵심입니다. (Chrome for Developers)
• 선언형/명령형의 역할 분리
  “체크아웃처럼 폼 중심”은 선언형, “검색/장바구니처럼 로직 중심”은 명령형으로 나누는 방식이 데모에서 그대로 드러납니다. (Chrome for Developers)
• MCP와의 연결고리 이해
  MCP는 원래 “AI 앱을 외부 시스템/도구/워크플로우에 연결하는 오픈 표준”이고, WebMCP는 그 사고방식을 “웹페이지 자체”로 끌어오려는 움직임으로 이해하면 맥락이 깔끔해집니다. (모델 컨텍스트 프로토콜)

---