WebMCP Demo Store

io.github.kamatanuj由 GitHub 帳號 kamatanuj 發布v1.0.0更新於 Nov 1, 2026

WebMCP demo store: same catalog via MCP tool calls vs DOM scraping. -79% bytes, -42% tokens.

發布方自己的服務：demo.st

已驗證Streamable HTTP可網頁執行網頁搜尋與抓取商業與電商

概覽

AI 產生的概覽

以 MCP 工具形式提供的示範網路商店，讓助理不必抓取 HTML 就能搜尋商品目錄、管理購物車並下單。

可以做什麼
  • 依分類、最高價格、最低評分或品牌子字串搜尋商品目錄
  • 依商品 id 查看單一商品的完整詳情
  • 將商品加入購物車，並查看目前購物車內容與總金額
  • 為目前購物車下單並取得訂單編號
適用情境
適合試用或示範透過 MCP 進行的代理式購物流程，或在同一目錄上比較工具呼叫與 DOM 抓取的效果。它是示範商店，並非真實商家。
執行需求
需要遠端 streamable HTTP 端點；未宣告驗證、環境變數或標頭。README 另說明可在本機以一般模式或 MCP 模式執行內附的 Python 伺服器，僅需 Python 標準函式庫。
安裝前請注意
結帳會實際送出訂單並回傳訂單編號，因此示範伺服器上的購物車與訂單狀態會改變，應將訂單視為測試資料。README 提到此示範已產生真實訂單編號，且目錄為固定的示範商品集，並非即時庫存。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 WebMCP Demo Store，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.github.kamatanuj%2Fwebmcp-store/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "webmcp-demo-store": {
      "type": "http",
      "url": "https://demowithmcp.converso.work/mcp"
    }
  }
}

README

WebMCP Demo Store — one-file server, two modes, one benchmark

[Listed on mcpservers.org]

Same store, same tools, two delivery modes:

  • WebMCP mode — the page exposes its catalog through MCP tool calls (MCP-over-HTTP /mcp, plus Chrome-native document.modelContext), so an agent reads only what the task needs.
  • Plain mode — the same store as an ordinary website; the agent parses full HTML pages, as every agent must today.

Benchmark (150-product catalog, identical tasks): 79% less action bytes, 42% fewer input tokens, 8/8 tasks correct in both modes. DOM mode wins on small catalogs then collapses; WebMCP wins with age. Crossover report: report.html → WebMCP_Comparison_Report.pdf.

Run it

bash
python3 server.py                    # plain mode      → http://localhost:9501MCP=1 PORT=9502 python3 server.py    # WebMCP mode     → http://localhost:9502 + /mcp

stdlib-only (http.server, json, uuid, threading) — no pip install, no dependencies.

Live demos

Chrome-native WebMCP test (13 Oct 2026)

Chrome 154 + --enable-features=WebMCP exposes document.modelContext on HTTPS origins (about:blank excluded).

  • Registered the 5-tool store contract via the IMPERATIVE API (registerTool): search_products, add_to_cart, get_cart, checkout (server-backed; all fetches in-page).
  • Standard client flow verified: getTools() discovery → executeTool() calls → orders 1017/1018 placed, T2/T4/T8 picks correct (HP Pavilion 14, Razer DeathAdder, OnePlus 12R).
  • 154 build quirks found & worked around:
    1. executeTool(tool, args) requires args as a JSON string (object form throws "Failed to parse input arguments"); return values are JSON strings too — JSON.parse both sides.
    2. Tools can't be re-registered under the same name (InvalidStateError) — reload the page to reset.
    3. Flag/feature name: --enable-features=WebMCP works headless; docs' chrome://flags/#enable-webmcp-testing is the manual path. Note: API is document.modelContext (moved from navigator since July 2026 build).
  • Takeaway: the demo's tool contract is compatible with Chrome's native WebMCP, not just our JSON-RPC shim. When Chrome ships the client agent (Gemini-in-Chrome), the store is already agent-ready.

Repo layout

pathwhat
server.pythe whole thing: store + cart + orders + MCP transport (MCP=1) + static/report serving
catalog.json / catalog_10.json150-product / 10-product demo catalogs
compare.py, compare_llm.py, browser_llm.pybenchmark harnesses (DOM-mode agent, LLM-token accounting, browser-native flow)
make_report.pyregenerates the HTML/PDF reports from results.json / agg_150_vs_30.json
whitepaper.html, report*.html, *.pdf, chart_*.pngstrategy + evidence artifacts (launch deck included)
weekly_recap.pycounters + live-URL digest (used by the ops cron)

License

MIT.

來源：README.md，提交 15e17a4

工具

5

search_products

Search product catalog. Filter by category (mice|laptops|phones), max_price (INR), min_rating, brand substring.

輸入參數brandquerycategorymax_pricemin_rating

get_product_details

Full details of one product by id.

輸入參數id必填

add_to_cart

Add product to cart (qty default 1).

輸入參數id必填qty

get_cart

Current cart contents and total.

無需輸入參數。

checkout

Place order for current cart. Returns order id.

無需輸入參數。

版本歷史

1
  1. v1.0.0最新Oct 18, 2026

評分

已滿足適用檢查項的 100%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

其他 Demo 整合

demo.st

st.demo官方發布者

demo.st 的遠端 MCP 伺服器，讓助理預留子網域、發布打包的靜態網站，並管理該網站的小型文件儲存。

Streamable HTTP可網頁執行驗證方式
雲端與基礎設施13 個工具Oct 25, 2026

Proofmark Demo Server

由 GitHub 帳號 SamuelDharshi 發布

一個小型本機檔案系統 MCP 伺服器，以 npm 套件形式發佈，用來示範 Proofmark 證明機制。

STDIO僅桌面
檔案與儲存尚未驗證Nov 7, 2026

PlanPro demo (unofficial, AetherStack)

由 GitHub 帳號 piksliviksi 發布

非官方示範型 MCP 端點，以合成資料提供 PlanPro 風格的工作計畫、KPI 與風險資訊，並透過 OAuth 登入。

Streamable HTTP可網頁執行
效率與工作流尚未收錄Oct 27, 2026

Everyday Software Voice Demo

由 GitHub 帳號 PpiNeaPpLe 發布

一個遠端 MCP 伺服器，依公開的企業網站產生預填連結，用於在瀏覽器中試用 AI 接待員示範。

Streamable HTTP可網頁執行
效率與工作流1 個工具Oct 25, 2026

Mcp Ticket Demo

由 GitHub 帳號 markusvankempen 發布

用來學習與示範 MCP 的參考工單伺服器，內含 19 個工具、資源、提示詞、驗證模式、PII 遮蔽與流量限制。

STDIO僅桌面
效率與工作流尚未驗證Oct 27, 2026