WebMCP Playground

Validate WebMCP tool definitions or a webmcp.json manifest against lint rules, test them with a form built from the schema and preview discovery.

Definition editor

Validation

✓ Valid

✓ All checks passed — definition is valid.

0 errors · 0 warnings · 0 info

Mock execution

query*string

limitnumber

categorystring

Agent sends:

{
  "name": "searchProducts",
  "arguments": {
    "query": "wireless headphones",
    "limit": 5,
    "category": "electronics"
  }
}

Tool returns:

{
  "content": [
    {
      "type": "text",
      "text": "Mock response for tool 'searchProducts' with inputs: {\"query\":\"wireless headphones\",\"limit\":5,\"category\":\"electronics\"}"
    }
  ]
}

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"
    ]
  }
});

Need to build tool schemas visually?AI Tool Schema Builder →

Browse MCP servers for AI tool integration?MCP Server Directory →

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

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.

Questions and answers

What is WebMCP?

WebMCP (Web Model Context Protocol) is a proposed web standard, incubated at the W3C, that lets a page expose structured tools to AI agents through the browser's navigator.modelContext API. This playground checks a tool definition or manifest against a set of lint rules, builds a test form from its inputSchema and mocks the call.

What does the WebMCP Playground validate?

It checks JSON syntax, required fields (name, description, inputSchema), JSON Schema compliance, naming conventions, description length, property types, enum consistency, and required array validity — 14 rules derived from the W3C spec.

Is this tool free and does it store my data?

Yes. Free to use. All validation and simulation runs in your browser. Your tool definitions are not sent to external servers.

Can I validate a full .well-known/webmcp.json manifest?

Yes, toggle to Manifest Mode to validate an array of tool definitions at once, including cross-checks for duplicate tool names.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

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.

WebMCP Playground