\n\n```\n\n### npm\n\n```bash\nnpm install monster-webmcp\n```\n\n```typescript\nimport { monstermcp } from 'monster-webmcp';\n\nconst mcp = new monstermcp();\n\nmcp.registertool({\n name: 'search',\n description: 'search the product catalog',\n inputschema: {\n type: 'object',\n properties: {\n query: { type: 'string', description: 'search keyword' }\n },\n required: ['query']\n },\n execute: async (args) => {\n const results = await fetch(`/api/search?q=${args.query}`);\n const data = await results.json();\n return { content: [{ type: 'text', text: json.stringify(data) }] };\n }\n});\n```\n\n## api\n\n### `new monstermcp(options?)`\n\n| option | type | default | description |\n|--------|------|---------|-------------|\n| `webmcp` | `boolean` | `true` | use native `document.modelcontext` |\n| `polyfill` | `boolean` | `true` | fall back to polyfill |\n| `traditionalmcp` | `boolean` | `false` | enable http/sse mcp transport |\n| `mcptransport` | `mcptransportconfig` | \u2014 | http/sse transport config |\n| `declarative` | `boolean` | `true` | process html form attributes |\n| `allowedorigins` | `string[]` | `[]` | globally allowed origins |\n| `ratelimits` | `record` | `{}` | per-tool rate limits |\n| `defaultratelimit` | `ratelimitconfig` | `{maxrequests:100,windowms:60000}` | default rate limit |\n| `debug` | `boolean` | `false` | enable debug logging |\n\n### `registertool(tool, options?)`\n\nregister a tool with the runtime.\n\n```typescript\nmcp.registertool({\n name: 'my_tool', // 1-128 chars, alphanumeric/_/-/.\n title: 'my tool', // human-readable title\n description: 'what it does', // required\n inputschema: { // json schema\n type: 'object',\n properties: { /* ... */ },\n required: ['param1']\n },\n outputschema: { /* ... */ }, // optional\n annotations: { // optional safety hints\n readonlyhint: true,\n idempotenthint: true,\n },\n execute: async (args, signal) => {\n return {\n content: [{ type: 'text', text: 'result' }],\n iserror: false\n };\n }\n}, {\n signal: abortcontroller.signal, // abortsignal for lifecycle\n exposedto: ['https://agent.example.com'], // cross-origin opt-in\n ratelimit: { maxrequests: 50, windowms: 60000 }, // per-tool limit\n});\n```\n\n### `unregistertool(name)`\n\nremove a tool by name.\n\n### `gettools()`\n\nreturns an array of all registered tool info objects.\n\n### `executetool(name, args?)`\n\nexecute a tool by name with the given arguments.\n\n```typescript\nconst result = await mcp.executetool('greet', { name: 'world' });\n// result.content[0].text === \"hello, world!\"\n```\n\n### `ontoolchange(callback)`\n\nsubscribe to tool change events. returns an unsubscribe function.\n\n```typescript\nconst unsub = mcp.ontoolchange((event) => {\n console.log(event.type, event.toolname);\n // event.type: 'registered' | 'unregistered' | 'updated'\n});\n// later: unsub();\n```\n\n### `destroy()`\n\nclean up all resources, abort pending operations, and unregister all tools.\n\n## declarative html forms\n\nmonsterwebmcp automatically processes `

` elements with the `toolname` attribute:\n\n```html\n\n \n \n

\n```\n\n### supported attributes\n\n| attribute | element | description |\n|-----------|---------|-------------|\n| `toolname` | `

` | registers the form as a tool with this name |\n| `tooldescription` | `` | tool description |\n| `toolautosubmit` | `` | auto-submit form when tool is called |\n| `toolparamdescription` | ``, ``, `` | parameter description in json schema |\n\n### handling form submissions\n\n```javascript\ndocument.queryselector('form[toolname=\"checkout\"]')\n .addeventlistener('submit', (e) => {\n e.preventdefault();\n // process checkout...\n e.respondwith({\n content: [{ type: 'text', text: 'order placed!' }]\n });\n });\n```\n\n## transport layer\n\nmonsterwebmcp auto-detects the best available transport:\n\n1. **native** (`document.modelcontext`) \u2014 chrome 146+ with webmcp flag\n2. **polyfill** \u2014 spec-compliant in-browser implementation\n3. **in-memory** \u2014 fallback for ssr/test environments\n4. **http/sse** \u2014 opt-in transport for traditional mcp clients\n\n```typescript\n// check transport status\nmcp.gettransporttype(); // 'native' | 'polyfill' | 'memory' | 'http'\nmcp.isnativeavailable(); // true if document.modelcontext exists\n```\n\n## security\n\n- **same-origin by default** \u2014 only the page's origin can execute tools\n- **cross-origin opt-in** \u2014 use `exposedto` to allow specific origins\n- **tool name validation** \u2014 1-128 characters, alphanumeric/underscore/hyphen/period only\n- **input schema validation** \u2014 all arguments validated against json schema\n- **per-tool rate limiting** \u2014 token bucket with configurable limits\n- **tool annotations** \u2014 safety hints for ai agents (readonly, destructive, etc.)\n\n## server components\n\n### local relay (websocket)\n\nbridges browser tools to desktop mcp clients (claude desktop, cursor, etc.):\n\n```typescript\nimport { localrelay } from 'monster-webmcp/server';\n\nconst relay = new localrelay({ port: 12306 });\nawait relay.start();\nrelay.registertool(mytooldefinition);\nrelay.settoolexecutor(async (name, args) => {\n return await browsersideexecute(name, args);\n});\n```\n\n### http mcp server\n\nhttp endpoint for cloud-based mcp clients:\n\n```typescript\nimport { httpmcpserver } from 'monster-webmcp/server';\n\nconst server = new httpmcpserver({\n port: 3001,\n authtoken: 'my-secret-token',\n cors: true,\n});\nawait server.start();\nserver.registertool(mytooldefinition);\n```\n\n## build\n\n```bash\n# browser bundle\nbun run build\n\n# esm bundle\nbun run build:esm\n\n# node.js server components\nbun run build:node\n\n# all\nbun run build:all\n```\n\n## browser compatibility\n\n| browser | transport | notes |\n|---------|-----------|-------|\n| chrome 146+ | native | enable webmcp flag |\n| chrome 90+ | polyfill | full support |\n| firefox 90+ | polyfill | full support |\n| safari 15+ | polyfill | full support |\n| edge 90+ | polyfill | full support |\n| node.js/bun | in-memory | server components |\n\n## license\n\n*copyright (c) 2026 vlabs, llc. all rights reserved.* <br>\n*[vril labs open source license v1.0](https://github.com/vril-labs/vril-zip/blob/main/license) \u2014 https://vril.li/license*.", "installation_instructions": null, "categories": [ "Everything" ], "owners": [], "owner": null, "code_snippets": {}, "evaluation_results": [], "found_via_ownership_request": false, "hosting_eligible": false, "knative_enabled": false, "security_scans": [ { "repo_url": "https://github.com/VrilLabs/monster-webmcp-server", "repo_name": "monster-webmcp-server", "score": 100, "risk_level": "low", "score_explanation": "Score starts at 100, deducts points for security issues, and adds points for security best practices", "scan_id": "f47dbe08-fa47-468f-bc53-10c01bc2258f", "mcp_app_id": "3f6a8de9-9bb7-4193-9eb8-6aa917200a06", "scan_time": "2026-06-11T10:15:49.971486+00:00", "created_at": "2026-06-11T10:15:49.977958+00:00", "updated_at": "2026-06-11T10:15:49.977958+00:00", "findings": [], "vulnerabilities": [] } ] } } </script> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=%VITE_GOOGLE_TAG_MANAGER_ID%" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- End Google Tag Manager (noscript) --> <div id="root"> <div id="ssr-fallback" class="app-loading" style="display: none; padding: 2rem; font-family: Inter, sans-serif;"> <h1>Monster Web</h1> <p>👾 MonsterWebMCP server bridges the W3C WebMCP standard (document.modelContext) with the existing MCP ecosystem, enabling any website to expose structured, callable tools to AI agents — natively through the browser’s WebMCP API when available, with seamless fallback to a polyfill-powered transport layer when not.</p> <div style="margin-top: 1rem;"> <span>Rating: 4.3/5</span> | <span>⭐ 1 stars</span> </div> <div style="margin-top: 1rem;"> <span>Categories: Everything</span> </div> </div> </div> </body> </html>