We added WebMCP tools to our own website. Here is the code.

#webmcp #ai #javascript #webdev

Most AI agents still use websites the hard way. They look at the page, guess which button does what, and click. A pop-up or a theme update can break all of it.

WebMCP is a proposed web standard that gives agents a better way in. Your page registers named tools, and the agent calls them instead of guessing. It is early: as of October 2026 it is in Chrome as an origin trial and behind a flag, and Firefox and Safari have not announced support.

We build WebMCP integrations for clients, so we added it to our own service page first. Here is what we did and what we would tell you to watch for.

Three tools, and why these three

We kept it small:

get_webmcp_services: returns our packages and how to reach us. Read-only.
answer_webmcp_question: searches the FAQ on the page and returns up to 3 answers. Read-only.
prepare_audit_request: fills in our audit form for the visitor. It sends nothing. The visitor checks the form and presses the button.

Start with tools that only look things up. They are the safest and the most useful.

Step 1: Check for support first

The API moved in 2026, from navigator.modelContext to document.modelContext. So we check both, and browsers without WebMCP skip everything:

const mc = document.modelContext || navigator.modelContext;
if (!mc || typeof mc.registerTool !== 'function') return;

Step 2: Register a read-only tool

A tool has a name, a description, an input schema and a function. Write the description for the agent: say what the tool returns and any limits.

mc.registerTool({
  name: 'answer_webmcp_question',
  description: 'Search our published WebMCP answers. Returns up to 3 matching questions with answers.',
  inputSchema: {
    type: 'object',
    properties: {
      question: { type: 'string', description: 'The visitor question, in plain words' },
    },
    required: ['question'],
  },
  annotations: { readOnlyHint: true },
  execute: async ({ question } = {}) => {
    const words = String(question || '').toLowerCase()
      .split(/[^a-z0-9]+/).filter((w) => w.length > 2);
    const matches = faqs
      .map((f) => {
        const text = (f.question + ' ' + f.answer).toLowerCase();
        return { f, score: words.reduce((n, w) => n + (text.includes(w) ? 1 : 0), 0) };
      })
      .filter((x) => x.score > 0)
      .sort((a, b) => b.score - a.score)
      .slice(0, 3)
      .map((x) => x.f);
    return JSON.stringify(matches);
  },
});

Nothing clever here, and that is the point. It uses data the page already has.

Step 3: Never let a tool send on its own

For the audit form, the tool only fills the fields. We clip the inputs and fire an event that the React form listens for:

execute: async (input = {}) => {
  const detail = { name: clip(input.name), email: clip(input.email), website: clip(input.website) };
  window.dispatchEvent(new CustomEvent('uwm:prefill', { detail }));
  document.getElementById('uwm-audit-form')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  return 'The form is filled in. The visitor reviews it and presses the button.';
},

Sending a form, booking and changing a cart all need the visitor's approval. Your server still checks permissions as usual.

The shortest version: a plain form

You do not always need JavaScript. Two attributes turn an existing form into a tool:

<form toolname="search_products"
      tooldescription="Search the store catalog by keyword and maximum price."
      action="/shop">
  <label for="q">Search</label>
  <input id="q" name="q">
  <label for="max">Max price</label>
  <input id="max" name="max_price" type="number">
</form>

The browser fills in the form and shows it. By default the visitor still presses the button.

What we would tell you first

Do not expect search traffic from it. There is no evidence WebMCP affects rankings.
It is not the same as a remote MCP server. WebMCP runs in the page, in the visitor's session. An MCP server runs on your server, for AI apps.
Treat this as preparation. Very few agents use it today, and the API may still change.
Never expose admin functions or other customers' data through a tool.

Try it on your site

We built a free WebMCP checker. It reads a page and up to 8 of its scripts, then lists any tools it finds and checks the forms and data agents would need.

If you would rather have it done for you, see our WebMCP integration services. Guides for WordPress and WooCommerce, Shopify, Next.js and Laravel are on our blog.

Are you adding WebMCP to anything yet? I would like to hear what tools you chose first.

DEV Community