WebMCP Protocol Reference

Declarative Tool Spec

This website exposes the extract-css tool using a semantic HTML schema declared on the main form. Agent plugins read these attributes to understand the parameters and invoke the extraction automatically.

<form id="extractor-form" 
  toolname="extract-css" 
  tooldescription="Extract CSS custom properties, color swatches, typography..." 
  toolautosubmit>

  <input type="url" 
    name="url" 
    toolparamdescription="The absolute HTTP or HTTPS URL of the webpage..." />

  <textarea name="css" 
    toolparamdescription="Optional. Raw CSS stylesheet rules to parse..."></textarea>
</form>

Agent Query Handling

When an AI agent submits this form, it fires a standard submit event with the property event.agentInvoked = true. The page intercepts this event, triggers the extraction api, and responds directly using event.respondWith():

extractorForm.addEventListener('submit', (event) => {
  if (event.agentInvoked) {
    event.preventDefault();
    const formData = new FormData(event.target);
    
    const promise = fetch('/api/extract', { ... })
      .then(res => res.json())
      .then(data => {
        // Return a markdown DESIGN.md design system outline directly
        return data.exports.markdown;
      });

    event.respondWith(promise);
  }
});

Benefits of WebMCP

• Zero API Keys: AI agents run queries in the user's browser session, bypassing auth/API key generation requirements.
• Natural Context: Results are returned to the agent in optimized markdown, allowing them to instantly digest color styles and typography.
• Interactive Sandbox: Users retain full visibility and control over what tools the agent is executing.