WebMCP Playground
Definition Editor
Validation
✓ Valid✓ All checks passed — definition is valid.
Mock Execution
Fill required fields before execution: query
Integration Guidance
Use this definition directly in browser integrations. For production discovery, publish a manifest at /.well-known/webmcp.json.
navigator.modelContext?.registerTool?.({
"name": "searchProducts",
"description": "Search the product catalog by keyword, category, and result limit.",
"inputSchema": {
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Search query string"
},
"limit": {
"type": "number",
"description": "Maximum number of results to return"
},
"category": {
"type": "string",
"description": "Product category filter",
"enum": [
"electronics",
"books",
"clothing",
"home"
]
}
},
"required": [
"query"
]
}
});What This Tool Does
WebMCP Playground is built for deterministic developer and agent workflows.
Design, validate, and test WebMCP tool definitions with live schema feedback, mock execution, discovery previews, and integration-ready register snippets for agent workflows.
Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.
Last updated:
This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.
Agent Invocation
Best Path For Builders
Browser workflow
Runs instantly in the browser with private local processing and copy/export-ready output.
Browser Workflow
This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.
/webmcp-playground/
For automation planning, fetch the canonical contract at /api/tool/webmcp-playground.json.
How to Use WebMCP Playground
- 1
Paste your tool definition
Copy the JavaScript object you pass to navigator.modelContext.registerTool() and paste it into the Definition Editor. The playground accepts the standard format: { name, description, inputSchema }.
- 2
Review validation results
The Validation Panel instantly checks your definition against the W3C WebMCP spec. Fix any red errors (missing fields, invalid schema) and review yellow warnings (long descriptions, missing required array).
- 3
Test with mock inputs
The Mock Execution Panel auto-generates a form from your inputSchema. Fill in sample values and click Execute to see the exact request/response envelope an AI agent would produce.
- 4
Preview agent discovery
Expand the Discovery Preview to see how your tool appears when an agent enumerates navigator.modelContext.tools — the name, description, and parameter summary visible during tool discovery.
- 5
Validate your manifest
Toggle to Manifest Mode, paste your .well-known/webmcp.json file, and validate all tool definitions at once with duplicate name detection.
- 6
Copy or download
Copy the validated definition to clipboard or download as JSON for integration into your web application.