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.

17 stars

Best use case

webmcp-tool-schemas is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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.

Teams using webmcp-tool-schemas 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-schemas/SKILL.md --create-dirs "https://raw.githubusercontent.com/OrcaQubits/agentic-commerce-skills-plugins/main/dist/antigravity/webmcp-browser-agents/.agent/skills/webmcp-tool-schemas/SKILL.md"

Manual Installation

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

How webmcp-tool-schemas Compares

Feature / Agentwebmcp-tool-schemasStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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.

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 Schema Design

## Before writing code

**Fetch live docs**:
1. Fetch `https://webmachinelearning.github.io/webmcp/` for the `inputSchema` specification and any constraints
2. Web-search `webmcp inputSchema JSON Schema requirements` for schema format details
3. Web-search `JSON Schema draft specification` for the JSON Schema version used by WebMCP
4. Web-search `webmcp tool schema best practices` for community guidance

## Conceptual Architecture

### Role of Schemas in WebMCP

The `inputSchema` in a tool definition serves two purposes:
1. **Agent guidance** — The agent reads the schema to understand what parameters to provide
2. **Input validation** — The browser validates agent-provided input against the schema before calling `execute`

### Schema Structure

WebMCP uses standard JSON Schema. Each tool's `inputSchema` is a JSON Schema object:

```js
inputSchema: {
  type: "object",
  properties: {
    paramName: { type: "string", description: "What this parameter is" },
    // ...more properties
  },
  required: ["paramName"]
}
```

### Property Types

| JSON Schema Type | Use For | Example |
|-----------------|---------|---------|
| `string` | Text, IDs, codes | Product ID, search query, coupon code |
| `number` | Decimal values | Price, weight, rating |
| `integer` | Whole numbers | Quantity, page number |
| `boolean` | True/false flags | In-stock filter, gift wrap option |
| `array` | Lists | Product IDs, selected categories |
| `object` | Nested structures | Address, payment details |

### Description Annotations

Always add `description` to properties — agents use these to decide what values to provide:

```js
properties: {
  query: {
    type: "string",
    description: "Search keywords for product catalog"
  },
  maxPrice: {
    type: "number",
    description: "Maximum price in USD. Omit to search all prices."
  }
}
```

### Constraints

Use JSON Schema constraints to guide agent input:
- `minLength` / `maxLength` for strings
- `minimum` / `maximum` for numbers
- `enum` for fixed value sets
- `pattern` for regex validation
- `minItems` / `maxItems` for arrays
- `default` for optional parameters with defaults

### Commerce Schema Patterns

**Product search:**
```js
{
  type: "object",
  properties: {
    query: { type: "string", description: "Search keywords" },
    category: { type: "string", enum: ["electronics", "clothing", "home"] },
    maxPrice: { type: "number", minimum: 0 },
    sortBy: { type: "string", enum: ["relevance", "price_asc", "price_desc", "rating"] }
  },
  required: ["query"]
}
```

**Add to cart:**
```js
{
  type: "object",
  properties: {
    productId: { type: "string", description: "Product identifier" },
    quantity: { type: "integer", minimum: 1, maximum: 99, default: 1 },
    variant: { type: "string", description: "Size, color, or variant ID" }
  },
  required: ["productId"]
}
```

**Shipping address:**
```js
{
  type: "object",
  properties: {
    street: { type: "string" },
    city: { type: "string" },
    state: { type: "string" },
    zipCode: { type: "string", pattern: "^[0-9]{5}(-[0-9]{4})?$" },
    country: { type: "string", enum: ["US", "CA", "UK"] }
  },
  required: ["street", "city", "state", "zipCode", "country"]
}
```

### Output Conventions

While WebMCP doesn't formally specify an output schema, tools should return predictable JSON:
- Always include a `status` or `success` field
- Return structured data, not HTML or plain text
- Include pagination info for list results (`total`, `page`, `pageSize`)
- Return error objects with `code` and `message` for failures

### Schema Design Principles

1. **Minimal surface** — Only require parameters the tool actually needs
2. **Descriptive** — Every property should have a `description`
3. **Constrained** — Use `enum`, `minimum`, `maximum` to prevent invalid inputs
4. **Flat when possible** — Avoid deep nesting; agents handle flat schemas better
5. **Consistent** — Use the same naming conventions across all tools (camelCase)
6. **No sensitive data** — Never ask for passwords, SSNs, or full card numbers in schemas

Fetch the WebMCP spec for the exact JSON Schema version supported and any WebMCP-specific constraints before designing schemas.

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-annotations

17
from OrcaQubits/agentic-commerce-skills-plugins

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.

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.