Back to the work
Web standards · Builder

WebMCP Portfolio Integration.

This portfolio registers structured tools through the WebMCP browser API, so an AI agent can query it directly, search projects, read the resume, even change the page, instead of scraping the DOM.

Role
Builder
When
2026
Stack
TypeScript, Next.js, WebMCP API, Chrome 146
Scale
8 tools registered
GitHub ↗
WebMCP Portfolio Integration previewnavigator.modelContext
8 toolsregistered
JSON Schematyped inputs
Chrome 146+behind a flag
1 moduleregistration layer

The problem

AI agents that use a website have to scrape its DOM and click buttons, which is brittle, slow, and breaks the moment a layout changes. The emerging WebMCP browser API takes a different route: a site registers structured tools that an agent calls directly, with JSON Schema inputs and typed JSON results. This project works out what it takes to expose a real, content-heavy site through that API.

What it does

  1. Registers 8 structured tools on this site through the WebMCP browser API (navigator.modelContext): project search, single-project lookup, resume, skills, contact, lab experiments, and two that change the page (theme and presentation mode).
  2. Each tool ships a JSON Schema for its inputs and returns typed JSON with canonical jayhemnani.me URLs, so an agent gets structured data instead of parsing rendered HTML.
  3. Progressive enhancement: the site works normally everywhere, and the tools register only when the browser exposes the API (Chrome 146+ with the WebMCP flag), then unregister on cleanup.
  4. Site data is gathered server-side (projects, resume, socials, lab) into one typed object and handed to a client component that registers the tools in the browser on mount.

Impact

  • Turns the portfolio into a queryable surface: an agent can search every project, pull the full resume, list skills, and read what Jay is currently building, all as structured JSON.
  • Two of the tools carry real side effects (theme toggle and presentation-mode switch), so WebMCP acts as a control surface, not just a read API.
  • Doubles as a working reference for an early-stage browser standard, with the whole registration layer in one typed module.