WebMCP Portfolio Tools

WebMCP Portfolio Tools is a pilot implementation of the emerging W3C WebMCP specification, added directly to this portfolio site. It registers three read-only tools via the navigator.modelContext API, allowing any WebMCP-capable browser or AI agent to programmatically discover and query project data — listings, full details, and tech stacks — without scraping or custom integrations. The implementation is pure vanilla JavaScript, uses JSON Schema for input validation, and degrades gracefully in browsers that don't yet support the API. To try it yourself: install Chrome Canary (136+), enable the WebMCP flag, and open the site — the tools register automatically. You can also install Google's Model Context Tool Inspector extension to visualize the registered tools and their schemas directly in DevTools. For automated evaluation, clone the GoogleChromeLabs/webmcp-tools repo and use the evals-cli to verify that an LLM correctly calls the exposed tools given natural-language prompts.

AI agents currently interact with websites by scraping HTML or relying on bespoke APIs. This is fragile, slow, and requires per-site integration work. The W3C WebMCP proposal aims to standardize how web pages expose structured capabilities to AI agents, but real-world implementations are scarce and developers need practical examples to understand the pattern.

The implementation registers three tools imperatively using navigator.modelContext.registerTool(): listProjects returns a summary array of all portfolio projects, getProjectDetails returns the full detail object for a given project ID, and getTechStack returns the tech stack and tags for a project. Each tool declares a JSON Schema inputSchema and sets readOnlyHint: true in its annotations. Feature detection ensures the code is a no-op in browsers without WebMCP support. The tool handlers are also exported as named functions so they can be tested manually in DevTools regardless of browser support.