webmcp-commerce-tools
Implement commerce-specific WebMCP tools — product search, cart management, checkout, returns, subscriptions, and support. Use when building agentic shopping experiences on e-commerce websites.
Best use case
webmcp-commerce-tools is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Implement commerce-specific WebMCP tools — product search, cart management, checkout, returns, subscriptions, and support. Use when building agentic shopping experiences on e-commerce websites.
Teams using webmcp-commerce-tools should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/webmcp-commerce-tools/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How webmcp-commerce-tools Compares
| Feature / Agent | webmcp-commerce-tools | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Implement commerce-specific WebMCP tools — product search, cart management, checkout, returns, subscriptions, and support. Use when building agentic shopping experiences on e-commerce websites.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# WebMCP Commerce Tools ## Before writing code **Fetch live docs**: 1. Fetch `https://developer.chrome.com/blog/webmcp` for commerce-related examples and guidance 2. Web-search `webmcp agentic commerce e-commerce tools examples` for community implementations 3. Web-search `webmcp shopping agent checkout cart tools` for commerce workflow patterns 4. Web-search `site:github.com webmcp commerce` for open-source commerce tool implementations ## Conceptual Architecture ### Agentic Shopping Flow A typical agent-driven shopping session using WebMCP: ``` User: "Find me wireless headphones under $100" → Agent navigates to retailer site → Site registers tools: [searchProducts, viewDetails, addToCart, checkout] → Agent calls searchProducts(query="wireless headphones", maxPrice=100) → Site returns structured product list → Agent presents results to user → User: "Add the Sony ones to my cart" → Agent calls addToCart(productId="sony-wh-1000", quantity=1) → Agent: "Added! Proceed to checkout?" → User: "Yes, use my saved card" → Agent calls checkout(useSavedPayment=true) → Site: requestUserInteraction → User confirms → Order placed → Agent: "Order #1234 confirmed!" ``` ### Core Commerce Tool Set Every e-commerce site should consider these tool categories: #### 1. Product Discovery - `searchProducts(query, filters)` — Catalog search with optional filters - `getCategories()` — List product categories - `viewProductDetails(productId)` — Full product info, images, reviews - `compareProducts(productIds)` — Side-by-side comparison #### 2. Cart Management - `addToCart(productId, quantity, variant)` — Add item to cart - `removeFromCart(itemId)` — Remove item from cart - `updateCartQuantity(itemId, quantity)` — Change quantity - `getCartContents()` — View current cart - `applyCoupon(code)` — Apply a discount code #### 3. Checkout - `getShippingOptions(address)` — Available shipping methods and costs - `checkout(paymentMethod, shippingOption)` — Complete purchase - `getOrderSummary()` — Pre-checkout order review #### 4. Order Management - `getOrderHistory(filters)` — Past orders with optional date/status filters - `getOrderStatus(orderId)` — Track a specific order - `initiateReturn(orderId, items, reason)` — Start a return - `cancelOrder(orderId)` — Cancel a pending order #### 5. Account & Subscriptions - `manageSubscription(action, planId)` — Upgrade, downgrade, cancel subscriptions - `getSubscriptionDetails()` — Current subscription info - `updateShippingAddress(address)` — Update default address #### 6. Support - `createSupportTicket(type, description)` — Open a support case - `checkTicketStatus(ticketId)` — Check on existing ticket ### Tool Design Principles for Commerce 1. **Mirror existing APIs** — Tool execute callbacks should call your existing REST/GraphQL APIs 2. **Reuse session** — Tools run in the user's authenticated browser session; no extra auth needed 3. **Structured returns** — Return JSON with consistent structure (items array, totals, status) 4. **Progressive disclosure** — Start with search and browse tools; add checkout only for authenticated users 5. **Confirmation gates** — Require user interaction for anything involving money ### Multi-Site Agent Workflows Agents can navigate across multiple retailer sites: 1. Search on Site A using WebMCP → get results 2. Search on Site B using WebMCP → get results 3. Compare across sites at the agent level 4. Purchase from the best option using that site's checkout tool Each site maintains its own tools; the agent coordinates across them. ### Integration with Backend Protocols WebMCP tools can delegate to backend protocols: - **UCP endpoint** — `searchProducts` tool calls a UCP product discovery API - **Stripe Checkout** — `checkout` tool creates a Stripe session server-side - **Inventory service** — Tools check real-time stock via internal APIs ### Best Practices - Expose tools progressively: read-only tools for all visitors, transactional tools for logged-in users - Return pagination info for list results (total, page, hasMore) - Include product images/thumbnails in results as URLs (agents can display them) - Handle out-of-stock gracefully — return clear status, not errors - Test the full purchase flow with an AI agent end-to-end - Consider mobile/responsive — tools should work regardless of viewport Fetch the latest WebMCP examples and commerce community patterns before building your tool set.
Related Skills
webmcp-user-interaction
Implement human-in-the-loop flows with requestUserInteraction() — confirmation dialogs, approval workflows, and user prompts during tool execution. Use when building tools that require user consent before performing actions.
webmcp-tool-schemas
Design JSON Schemas for WebMCP tool inputs and outputs — proper types, constraints, nested objects, and agent-friendly documentation. Use when defining or refining tool schemas for agent consumption.
webmcp-tool-annotations
Implement WebMCP tool annotations — readOnlyHint, destructiveHint, idempotentHint safety hints that inform browser permission prompts and agent behavior. Use when marking tools with appropriate safety metadata.
webmcp-testing
Test WebMCP tools with AI agents — Chrome DevTools integration, agent testing workflows, tool discovery verification, and end-to-end commerce flow testing. Use when validating that tools work correctly with real AI agents.
webmcp-setup
Set up a WebMCP project — enable Chrome flags, install MCP-B polyfill, scaffold tool registration, and configure development environment. Use when starting a new WebMCP-enabled website from scratch.
webmcp-security
Implement WebMCP security best practices — permission model, data minimization, honest descriptions, input validation, fingerprinting prevention, and fraud mitigation. Use when auditing or hardening WebMCP tool implementations.
webmcp-register-tool
Implement the WebMCP Imperative API — register tools via navigator.modelContext.registerTool() with proper schemas, execute callbacks, and lifecycle management. Use when building dynamic tool registration in JavaScript.
webmcp-polyfill
Set up and use the MCP-B polyfill — vanilla JS and React packages that implement navigator.modelContext for browsers without native WebMCP. Use when developing for browsers that don't yet support WebMCP natively.
webmcp-mcp-bridge
Integrate WebMCP client-side tools with backend MCP servers and UCP endpoints — bridge browser-based agent interactions with server-to-server protocols. Use when connecting front-end WebMCP to existing backend API infrastructure.
webmcp-context-provider
Implement the WebMCP provideContext API — bulk tool registration, contextual metadata, page state sharing, and dynamic context updates. Use when providing rich context and multiple tools to agents simultaneously.
webmcp-authentication
Implement WebMCP authentication patterns — browser session inheritance, cookie-based auth, role-gated tool registration, and conditional tool exposure. Use when managing which tools are available based on user authentication state.
nlweb-tools-framework
Design and implement NLWeb tools — the per-Schema.org-type handlers that turn a query into a specialized response (search, item_details, compare_items, ensemble, recipe_substitution, accompaniment, conversation_search, etc.). Covers `tools.xml`, the ToolSelector router, builtin handlers in `methods/`, writing a custom tool with a `<returnStruc>` contract, and disabling tool selection for raw retrieval. Use when extending NLWeb beyond the default query → results flow.