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.

17 stars

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

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

Manual Installation

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

How webmcp-tool-annotations Compares

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

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-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-commerce-tools

17
from OrcaQubits/agentic-commerce-skills-plugins

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

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.