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.
Best use case
webmcp-tool-annotations is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using webmcp-tool-annotations 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-tool-annotations/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How webmcp-tool-annotations Compares
| Feature / Agent | webmcp-tool-annotations | 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 WebMCP tool annotations — readOnlyHint, destructiveHint, idempotentHint safety hints that inform browser permission prompts and agent behavior. Use when marking tools with appropriate safety metadata.
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 Tool Annotations
## Before writing code
**Fetch live docs**:
1. Fetch `https://webmachinelearning.github.io/webmcp/` for the annotations specification
2. Web-search `webmcp tool annotations readOnlyHint destructiveHint idempotentHint` for annotation field details
3. Web-search `site:developer.chrome.com webmcp annotations permissions` for how Chrome uses annotations
4. Web-search `site:github.com mcp-b annotations` for polyfill support for annotations
## Conceptual Architecture
### What Annotations Are
Tool annotations are optional metadata attached to a tool definition that inform the browser and agent about the tool's behavior and safety characteristics. The browser uses annotations to decide whether to prompt the user for confirmation before allowing agent invocation.
### Available Annotations
| Annotation | Type | Default | Meaning |
|------------|------|---------|---------|
| `readOnlyHint` | boolean | `false` | Tool only reads data, does not modify any state |
| `destructiveHint` | boolean | `false` | Tool performs irreversible or significant actions |
| `idempotentHint` | boolean | `false` | Multiple calls with the same input produce the same effect as one call |
### How the Browser Uses Annotations
- **readOnlyHint: true** — Browser may allow agent to invoke without user confirmation
- **destructiveHint: true** — Browser should require explicit user consent before invocation
- **idempotentHint: true** — Browser may allow retries without additional confirmation
- No annotations — Browser applies its default permission policy
### Annotation Combinations
| readOnly | destructive | idempotent | Example | Browser Behavior |
|:--------:|:-----------:|:----------:|---------|-----------------|
| true | false | true | `searchProducts` | Likely auto-approved |
| false | false | true | `addToCart` | May auto-approve or prompt once |
| false | false | false | `updateProfile` | Likely prompts user |
| false | true | false | `placeOrder` | Always prompts user |
| false | true | true | `cancelSubscription` | Always prompts user (destructive overrides) |
### Commerce Tool Annotation Guide
| Tool | readOnly | destructive | idempotent |
|------|:--------:|:-----------:|:----------:|
| `searchProducts` | true | false | true |
| `viewProductDetails` | true | false | true |
| `getCartContents` | true | false | true |
| `addToCart` | false | false | true |
| `removeFromCart` | false | false | true |
| `updateCartQuantity` | false | false | true |
| `applyCoupon` | false | false | true |
| `checkout` | false | **true** | false |
| `placeOrder` | false | **true** | false |
| `initiateReturn` | false | **true** | false |
| `cancelOrder` | false | **true** | false |
| `deleteAccount` | false | **true** | false |
| `updateShippingAddress` | false | false | true |
| `getOrderHistory` | true | false | true |
### Implementation
```js
navigator.modelContext.registerTool({
name: "searchProducts",
description: "Search the product catalog",
inputSchema: { /* ... */ },
annotations: {
readOnlyHint: true,
idempotentHint: true
},
async execute(input) { /* ... */ }
});
navigator.modelContext.registerTool({
name: "placeOrder",
description: "Complete the purchase and charge the payment method",
inputSchema: { /* ... */ },
annotations: {
destructiveHint: true
},
async execute(input, client) { /* ... with requestUserInteraction */ }
});
```
### Annotation Accuracy Matters
Incorrect annotations are a security risk:
- Marking a purchase tool as `readOnlyHint: true` could let agents bypass user confirmation
- Marking a search tool as `destructiveHint: true` creates unnecessary friction
- Annotations are **hints**, not guarantees — the tool must still implement proper checks
### Best Practices
- Annotate every tool — even if using defaults, explicit annotations make intent clear
- Combine `destructiveHint` with `requestUserInteraction()` for defense-in-depth
- Review annotations in code review as carefully as you review access control
- Test annotation behavior with real agents to verify browser permission prompts appear when expected
- Document the annotation rationale for each tool
Fetch the specification for any new annotation types, exact field names, and browser interpretation rules before implementing.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-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-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.
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.