Turn Your Website into an MCP Server with WebMCP

Traditional AI agents “see” the web by scraping HTML, a brittle, token-expensive process. WebMCP flips this. Instead of the agent guessing what a button does, your website explicitly tells the agent: “I have a tool called generate_report; here is the JSON schema to call it.”

Setting Up the Bridge

To begin, include the WebMCP script on your page. This initializes the connection widget and the underlying protocol handler.

<script src="https://unpkg.com/@jason.today/webmcp@latest/dist/webmcp.js"></script>

<script>
  // Initialize with optional custom configuration
  const mcp = new WebMCP({
    color: '#4CAF50', // Custom widget color
    position: 'bottom-right'
  });
</script>

Registering Functional Tools

Tools are the “hands” of your agent. When you register a tool, you define the parameters the LLM must provide to trigger a specific action on your site.

Example: Triggering an Internal Search or UI Action

mcp.registerTool(
  'search_site',
  'Search the website for specific products or documentation',
  {
    query: { type: "string", description: "The search term" }
  },
  function(args) {
    // Execute your existing site logic
    const results = performSearch(args.query);

    return {
      content: [{ type: "text", text: `Found ${results.length} results for ${args.query}` }]
    };
  }
);

Exposing Live Resources

Resources allow the agent to “read” specific parts of your app state. This is more efficient than sending the entire document.body.

Example: Exposing a User’s Current Selection

mcp.registerResource(
  'page-content',
  'Current page content and metadata',
  { uri: 'page://current', mimeType: 'text/html' },
  function(uri) {
    return {
      contents: [
        {
          uri: uri,
          mimeType: 'text/html',
          text: document.body.innerHTML
        }
      ]
    };
  }
);

HTML-Based Tools

If you have existing forms, you don’t need complex JS. Use data attributes to make them agent-accessible instantly.

<form
  toolname="submit_feedback"
  tooldescription="Submit user feedback or bug reports directly to the team"
>
  <input type="text" name="subject" toolparamdescription="The topic of the feedback" />
  <textarea name="message" toolparamdescription="The detailed feedback message"></textarea>
  <button type="submit">Send Feedback</button>
</form>

Real-Time Sampling

Agentic workflows often require human-in-the-loop validation. WebMCP’s Sampling feature allows the server to request a completion or clarification from the user through a modal dialog. This ensures that the agent doesn’t perform sensitive actions without explicit oversight.

Why This Matters for the Future of Web

WebMCP moves us closer to a “Headless UI” world where websites aren’t just for humans to click, they are APIs for agents to navigate. By making your site “Agent-Ready,” you ensure your platform remains accessible and functional as AI-first browsing becomes the standard.