Implements human-in-the-loop flows in WebMCP tools using requestUserInteraction() for user confirmations before destructive actions like placing orders or deleting data.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin webmcp-browser-agentsThis skill is limited to using the following tools:
**Fetch live docs**:
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
Fetch live docs:
https://webmachinelearning.github.io/webmcp/ for the ModelContextClient and requestUserInteraction specificationwebmcp requestUserInteraction ModelContextClient specification for the callback APIsite:developer.chrome.com webmcp user interaction confirmation for Chrome implementation guidancewebmcp human-in-the-loop agent confirmation for community patternsclient.requestUserInteraction(callback) is a method on the ModelContextClient object passed to every tool's execute callback. It pauses tool execution, hands control to the user (via a site-provided UI), and resumes when the user responds.
This is the primary mechanism for human-in-the-loop approval in WebMCP.
AI agents can make mistakes — hallucinate, misinterpret instructions, or select the wrong option. For irreversible actions (purchases, account changes, data deletion), requiring user confirmation prevents costly errors. WebMCP's design explicitly accommodates shared-context interactions where the user and agent collaborate.
Agent calls tool → execute(input, client) starts
→ Tool calls client.requestUserInteraction(callback)
→ Browser pauses tool execution
→ Site shows UI to the user (modal, banner, etc.)
→ User approves or rejects
→ callback resolves with user's response
→ Tool resumes with user's answer
→ Tool returns result to agent
| Action | User Interaction? | Rationale |
|---|---|---|
| Search products | No | Read-only, no side effects |
| View product details | No | Read-only |
| Add to cart | Maybe | Low risk, but could confirm for expensive items |
| Apply coupon | No | Easily reversible |
| Place order / checkout | Yes | Irreversible, involves payment |
| Delete account | Yes | Destructive, irreversible |
| Change subscription plan | Yes | Financial commitment |
| Initiate return | Yes | Starts a process that may be hard to undo |
| Update shipping address | Maybe | Depends on timing relative to order |
navigator.modelContext.registerTool({
name: "placeOrder",
description: "Complete the purchase with the items in the cart",
inputSchema: { type: "object", properties: {} },
annotations: { destructiveHint: true },
async execute(input, client) {
// 1. Gather order summary
const summary = await fetch("/api/cart/summary").then(r => r.json());
// 2. Ask user to confirm
const approved = await client.requestUserInteraction((resolve) => {
// Show a confirmation UI — this is your site's custom modal/dialog
showOrderConfirmation(summary, (userApproved) => {
resolve(userApproved);
});
});
// 3. Proceed or cancel based on user response
if (!approved) {
return { status: "canceled", message: "User declined the order" };
}
// 4. Execute the order
const result = await fetch("/api/orders", { method: "POST" });
return await result.json();
}
});
The site controls how the confirmation UI looks. Common patterns:
A tool can call requestUserInteraction multiple times:
Fetch the specification for exact requestUserInteraction callback signature, return types, and browser behavior before implementing.