WebMCP Tool Generator
🔒 In your browserGenerate WebMCP tool definitions — declarative HTML & imperative JS — to make your site agent-ready.
How it works
Describe a tool once and get a ready-to-paste WebMCP definition in both forms — the declarative <form> attributes, and the imperative document.modelContext.registerTool() JavaScript (with a feature-detection shim). This is how you make a page's actions callable by in-browser AI agents. Generated entirely in your browser.
<form tool-name="search-products" tool-description="Search the product catalog by keyword."> <input name="query" type="text" tool-param-description="Search keywords" required /> <input name="limit" type="number" tool-param-description="Maximum number of results" /> <button type="submit">Run</button> </form>
Add these attributes to a real form on your page — the browser synthesizes a tool from it, and the form still works for humans.
WebMCP is a draft W3C standard (Chrome 146+ behind a flag; stable rollout expected later in 2026). Syntax may still change — verify against your target browser. The imperative entry point is document.modelContext (with navigator.modelContext as an older fallback).
About the WebMCP Tool Generator
WebMCP is an emerging W3C browser standard (from Google and Microsoft) that lets a website expose structured, callable tools to in-browser AI agents — so an agent can act on your page directly instead of guessing from the DOM. This free WebMCP tool generator turns a simple tool spec into ready-to-paste code in both of WebMCP's forms: the declarative HTML form attributes and the imperative JavaScript registration.
Everything is generated in your browser — nothing you type is uploaded.
The two ways to expose a WebMCP tool
- Declarative — add tool-name and tool-description attributes to a real <form>, and tool-param-description to its inputs. The browser synthesizes a tool from the form, which still works normally for humans.
- Imperative — call document.modelContext.registerTool({ name, description, inputSchema, execute }) in JavaScript, for anything a form can't express. The generator includes a document.modelContext || navigator.modelContext feature-detection shim.
How to use it
- Give the tool a kebab-case name and a clear description — agents read the description to decide when to call it.
- Add each parameter with a type and a description so the agent fills it correctly.
- Copy the declarative HTML onto an existing form, or drop the imperative JS into your page and implement the execute() body.
Why make your site agent-ready
As browsers ship WebMCP (Chrome began an early preview in 2026), AI assistants will increasingly act on sites through declared tools rather than by scraping the page — more reliable for them and more controllable for you, because tools run in the user's own session with their permissions. Exposing your key actions as tools is becoming part of being discoverable to agents, much as sitemaps and structured data are for search engines.
Frequently asked questions
What is WebMCP?
WebMCP (Web Model Context Protocol) is a draft W3C Community Group standard that lets a website register tools an in-browser AI agent can call, via a browser API (document.modelContext) or declarative HTML form attributes. It brings the Model Context Protocol to the web page itself.
Which format should I use — declarative or imperative?
Use the declarative form attributes when the action is already a form (search, login, subscribe) — it's the least code and keeps the form working for humans. Use the imperative registerTool() API when the tool needs custom logic a form can't express.
Is WebMCP stable yet?
Not fully. It shipped in Chrome 146 behind a flag in early 2026 with wider rollout expected later in the year, and the spec — especially the declarative attribute names — can still change. Treat generated code as a strong starting point and verify against your target browser.
Does execute() have a required return shape?
Yes. A tool's execute() should return an object like { content: [{ type: "text", text: "…" }] } — the same content-block shape MCP uses to send results back to the agent.
Is anything uploaded?
No. The code is generated entirely in your browser from what you type.
Related searches
Learn more
Related Developer tools
🔗 Embed this tool on your website — free
Copy this and paste it into your page's HTML. The tool runs in the visitor's browser, just like here. Change height to fit, or add the optional auto-resize snippet below. Add ?theme=dark to the URL for dark mode.
<iframe src="https://toolhq.dev/embed/webmcp-generator/" title="WebMCP Tool Generator — ToolsHub" width="100%" height="520" style="border:1px solid #e5e7eb;border-radius:12px;max-width:680px" loading="lazy"></iframe>Optional: auto-resize the iframe height
Add this once on the same page so the iframe grows to fit the tool:
<script>
addEventListener("message", function (e) {
if (e.data && e.data.type === "toolshub:resize") {
document.querySelectorAll('iframe[src*="/embed/"]').forEach(function (f) {
if (f.contentWindow === e.source) f.style.height = e.data.height + "px";
});
}
});
</script>