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.

17 stars

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

$curl -o ~/.claude/skills/webmcp-commerce-tools/SKILL.md --create-dirs "https://raw.githubusercontent.com/OrcaQubits/agentic-commerce-skills-plugins/main/dist/antigravity/webmcp-browser-agents/.agent/skills/webmcp-commerce-tools/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/webmcp-commerce-tools/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How webmcp-commerce-tools Compares

Feature / Agentwebmcp-commerce-toolsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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

17
from OrcaQubits/agentic-commerce-skills-plugins

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.