{"slug": "webmcp-gen-generate-chrome-webmcp-tool-definitions-from-typescript", "title": "webmcp-gen: Generate Chrome WebMCP Tool Definitions from TypeScript", "summary": "A developer released webmcp-gen, a build-time code generation tool that creates WebMCP tool definitions and handler stubs from TypeScript interfaces. The tool complements existing runtime and crawling approaches by enabling static generation for typed APIs, with baked-in security best practices. Version 1.2.0 includes fixes from a 4-agent security audit and Chrome 150 compatibility updates.", "body_md": "Chrome 149 shipped WebMCP — a browser-native API that lets web pages expose structured tools to AI agents via `navigator.modelContext`\n\n. The ecosystem is forming fast: [webmcp-core](https://github.com/keak-ai/webmcp-core) crawls live sites to auto-generate tool definitions, and [@webmcp-registry/kit](https://github.com/WebMCP-Registry/kit) provides a runtime SDK with Zod-based `defineTool()`\n\n.\n\nWhat's missing is **build-time codegen from your existing TypeScript**. If you already have typed interfaces for your API, you shouldn't have to rewrite them as Zod schemas or wait for a crawler to discover them.\n\n**webmcp-gen** fills that gap. Write your API as TypeScript interfaces, run one command, get spec-compliant WebMCP tool definitions + handler stubs with security best practices baked in.\n\n| Tool | Approach | When to use |\n|---|---|---|\nwebmcp-core |\nCrawl a live URL | You have a site, want tools auto-discovered |\n@webmcp-registry/kit |\nZod schemas at runtime | You want runtime registration + React hooks |\nwebmcp-gen |\nTypeScript interfaces at build time | You have typed TS, want static JSON + stubs |\n\nThey're complementary — different layers for different workflows.\n\n```\n// api.ts\n\n/** Search products by keyword. */\ninterface SearchProducts {\n  query: string;\n  category?: \"electronics\" | \"clothing\" | \"home\";\n  limit?: number;\n}\nnpx webmcp-gen --api api.ts\n```\n\nOutput: a `.webmcp.json`\n\ndefinition + a `.handler.ts`\n\nstub with `navigator.modelContext.registerTool()`\n\nwired up and ready to implement.\n\n`requestUserInteraction()`\n\nreminders for mutating tools`readOnlyHint`\n\nannotations for query-only toolsWebMCP allows AI agents to execute tools that affect live web applications. Google advises using human-in-the-loop hooks and protecting against indirect prompt injection. webmcp-gen bakes this into every generated handler stub — mutating tools get `requestUserInteraction()`\n\nreminders, freeform inputs get sanitisation warnings. Safe defaults, not afterthoughts.\n\n```\nnpm install -g webmcp-gen\n```\n\nIncludes 4 starter templates (CRUD, search, form handler, data transformer) to get you going:\n\n```\nwebmcp-gen --template crud-api\nwebmcp-gen --api crud-api.ts\n```\n\nMIT licensed. Contributions welcome.\n\nThe current npm version (v1.2.0) has been through a 4-agent security audit covering line-by-line diff scanning, cross-file tracing, removed-behavior analysis, and dedicated security review. 10 findings were fixed before public announcement, including injection hardening in generated code, path traversal protection, and Chrome 150 compatibility (the origin trial API moved from `navigator.modelContext`\n\nto `document.modelContext`\n\n). Full changelog in the [README](https://github.com/oliuntangled/webmcp-gen#changelog).\n\n**GitHub:** [oliuntangled/webmcp-gen](https://github.com/oliuntangled/webmcp-gen)\n\n**npm:** [webmcp-gen](https://www.npmjs.com/package/webmcp-gen)\n\n*Not affiliated with or endorsed by Google or the W3C. Built with AI assistance.*", "url": "https://wpnews.pro/news/webmcp-gen-generate-chrome-webmcp-tool-definitions-from-typescript", "canonical_source": "https://dev.to/oliuntangled/webmcp-gen-generate-chrome-webmcp-tool-definitions-from-typescript-17ag", "published_at": "2026-06-28 08:52:48+00:00", "updated_at": "2026-06-28 09:03:34.096928+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "large-language-models"], "entities": ["webmcp-gen", "WebMCP", "TypeScript", "Google", "W3C", "oliuntangled", "npm"], "alternates": {"html": "https://wpnews.pro/news/webmcp-gen-generate-chrome-webmcp-tool-definitions-from-typescript", "markdown": "https://wpnews.pro/news/webmcp-gen-generate-chrome-webmcp-tool-definitions-from-typescript.md", "text": "https://wpnews.pro/news/webmcp-gen-generate-chrome-webmcp-tool-definitions-from-typescript.txt", "jsonld": "https://wpnews.pro/news/webmcp-gen-generate-chrome-webmcp-tool-definitions-from-typescript.jsonld"}}