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.
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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/webmcp-tool-schemas/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How webmcp-tool-schemas Compares
| Feature / Agent | webmcp-tool-schemas | 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?
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
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
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
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.