What problem does it solve? Connecting AI agents to a live browser session requires safely exposing DOM state, application context, and client-side actions without leaking credentials or allowing unauthorized operations. This Skill provides the rules and process to integrate WebMCP into a frontend application with security boundaries built in. ## Core Features & Use Cases - Context Exposure: Mount a WebMCP provider in the root layout and map sanitized application state (Redux/Zustand stores, routes, active entities) to the agent context with sensitive fields stripped. - Action Allowlisting: Register browser actions (navigation, form fills, clicks) behind an explicit default-deny allowlist with strict input schemas and structured JSON error responses. - Security & HITL Gates: Enforce session isolation, keep HttpOnly cookies out of the JS runtime, and require user confirmation for non-idempotent or financial actions, with Service Worker support for asynchronous approvals. - Use Case: You are building an e-commerce storefront where an AI assistant should read the current cart state and apply filters on behalf of the user. Use this Skill to expose sanitized cart state, register allowlisted filter actions, and gate checkout behind a confirmation modal. ## Quick Start Use the implement-webmcp skill to add a WebMCP provider to my app's root layout and expose the current route and cart state to AI agents.
