WebMCP

Making this portfolio AI-agent queryable via the W3C WebMCP standard. 8 structured tools registered on navigator.modelContext — no DOM scraping needed.

TypeScriptNext.jsWebMCP APIChrome 146JSON Schema
Build
Server
Client
Register
Query

Why WebMCP

before.js
// DOM scraping — brittle, slow
agent.click("#search-btn");
agent.waitFor(".results");
agent.scrape(".result-card");
// ❌ Breaks on redesign
// ❌ Requires screenshots
// ❌ Layout-dependent
after.js — WebMCP
// Structured tools — fast, stable
const results = await agent.call(
  "search_projects",
  { tech: "Python" }
);
// ✅ Layout-agnostic
// ✅ JSON in, JSON out
// ✅ 89% fewer tokens

API

8 Registered Tools

Click any tool to see its call signature and example response.

Architecture

How It Works

1
Build

Next.js loads MDX projects, resume, lab data via fs

2
Server

WebMCPLoader serializes SiteData to client

3
Client

WebMCPProvider detects navigator.modelContext

4
Register

8 tools + 1 context registered with JSON Schema

5
Query

AI agents call tools, get structured JSON responses

Try It

Test in Your Browser

Chrome DevTools Console
// 1. Chrome 146 Canary + enable 'Experimental Web Platform Features' flag
// 2. Visit jayhemnani.me
// 3. Open DevTools Console and run:

navigator.modelContext
// → ModelContext { registerTool, unregisterTool, ... }

// Tools are registered automatically on page load.
// AI agents can now query your portfolio as structured data.
8
Tools
25+
Projects
~280
LOC
W3C WebMCP Spec