Help us improve
Share bugs, ideas, or general feedback.
Implements WebMCP provideContext API for bulk tool registration, page state metadata sharing, and dynamic context updates to AI agents. Use for e-commerce pages like product or cart views.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin webmcp-browser-agentsHow this skill is triggered — by the user, by Claude, or both
Slash command
/webmcp-browser-agents:webmcp-context-providerThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Fetch live docs**:
Implements WebMCP Imperative API to register browser tools via navigator.modelContext.registerTool() with JSON schemas, execute callbacks, annotations, and lifecycle management in JavaScript.
Implements and debugs browser WebMCP integrations in JavaScript/TypeScript web apps for exposing imperative or declarative tools via modelContext.
Guides adding WebMCP to web applications for AI accessibility, LLM UI tools, and MCP browser automation. Covers design principles, tool architecture, and testing workflows.
Share bugs, ideas, or general feedback.
Fetch live docs:
https://webmachinelearning.github.io/webmcp/ for the provideContext method specificationwebmcp provideContext specification for the API shape and optionswebmcp context metadata agent for contextual data patternssite:developer.chrome.com webmcp context for Chrome-specific context featuresnavigator.modelContext.provideContext(options) is a method for bulk registration of multiple tools and providing additional contextual metadata to agents. While registerTool adds one tool at a time, provideContext can set up an entire tool surface in a single call.
Note: This API is still being specified and may change. Always fetch the latest spec before implementing.
Agents make better decisions when they understand the current page state:
| Aspect | registerTool | provideContext |
|---|---|---|
| Granularity | One tool at a time | Multiple tools + metadata |
| Metadata | Tool-level only | Page-level context included |
| Use case | Dynamic, individual tools | Page initialization, bulk setup |
| Lifecycle | Register/unregister individually | Set/clear entire context |
Provide agents with situational awareness:
Product page context:
navigator.modelContext.provideContext({
tools: [viewDetails, addToCart, compareProducts],
metadata: {
pageType: "product-detail",
productId: "sku-12345",
productName: "Wireless Headphones",
price: 79.99,
inStock: true,
userAuthenticated: true
}
});
Cart page context:
navigator.modelContext.provideContext({
tools: [updateQuantity, removeItem, applyCoupon, checkout],
metadata: {
pageType: "shopping-cart",
itemCount: 3,
subtotal: 247.50,
currency: "USD",
hasShippingAddress: true,
hasSavedPayment: true
}
});
Update context as the page state changes:
// Initial page load — browse tools
navigator.modelContext.provideContext({
tools: [searchProducts, viewDetails],
metadata: { pageType: "catalog", authenticated: false }
});
// User logs in — expand tools
navigator.modelContext.clearContext();
navigator.modelContext.provideContext({
tools: [searchProducts, viewDetails, addToCart, getCartContents, checkout],
metadata: { pageType: "catalog", authenticated: true, userName: "Alice" }
});
// Navigate to cart — switch tools
navigator.modelContext.clearContext();
navigator.modelContext.provideContext({
tools: [updateQuantity, removeItem, applyCoupon, checkout],
metadata: { pageType: "cart", itemCount: 3 }
});
In single-page applications, update context on route changes:
router.on("routeChange", (route) => {
navigator.modelContext.clearContext();
switch (route.name) {
case "catalog":
provideCatalogContext();
break;
case "product":
provideProductContext(route.params.id);
break;
case "cart":
provideCartContext();
break;
case "checkout":
provideCheckoutContext();
break;
}
});
provideContext for initial page setup; use registerTool / unregisterTool for incremental changesFetch the specification for the exact provideContext options shape, metadata fields, and any new features before implementing.