01 — Overview & Problem
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 document.modelContext API (falling back to the deprecated navigator.modelContext in older browsers), 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.
02 — The Approach
The implementation registers three tools imperatively using document.modelContext.registerTool() (with a navigator.modelContext fallback for pre-Chrome-150 browsers): 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.
System Architecture Diagrams
Scored by webmcpscan.com — 100/100 Excellent (AI Native)
03 — Tech Stack Spec
WebMCP
W3C Model Context Protocol
Vanilla JS
Zero-Dependency Implementation
JSON Schema
Tool Input Validation
Vite 7
Build & Dev Server