WebMCP tools on this site

What an AI agent in your browser can do on Bryan Focht's interactive resume.

Your browser: checking… Checking

This check needs JavaScript. Without it, see the enable steps for each browser below.

What this is

WebMCP is a draft web standard (Web Machine Learning Community Group) that lets a page register tools for an agent running in the browser, using document.modelContext.registerTool(). Earlier previews used navigator.modelContext, and the resume registers through whichever is present. The tools run in your tab, read the same data you see on the page, and need no server or API key. Browsers without WebMCP support skip all of it and the page works as usual.

Enable WebMCP in your browser

WebMCP is a draft, so the steps differ by browser and will change. As of this page's last update:

Chrome 149 or later: open chrome://flags/#enable-webmcp-testing, set it to Enabled, and relaunch. Chrome also runs an origin trial for deployed sites.
Edge 150 or later: the origin trial is live. No flag is documented, so try edge://flags and search for "WebMCP".
Brave: Chromium-based. Try brave://flags and search for "WebMCP". Brave's own support is experimental and limited to its Leo assistant.
Firefox and Safari: no WebMCP support yet. Use Chrome or Edge.

Available tools

Tool	What it does	Input
`search_career_graph`	Keyword search across positions, skills, credentials and organizations. Returns up to 25 matches (id, type, name).	`query` (required), `type` (optional: `skill`, `credential`, `organization`, `position_or_section`)
`get_item`	Full detail for one item (dates, highlights, write-up, issuer and so on) plus the items it connects to.	`id` (an id from search or list, or the exact name)
`list_items`	Lists every item of one kind with its id and name.	`type` (required, same values as above)
`show_layer`	Opens the drawer for skills, credentials or organizations and switches that layer on in the graph. It changes what you see, not any data.	`layer`: `skills`, `credentials` or `organizations`

The first three are read-only and are marked readOnlyHint. Only show_layer touches the page, and only by opening the drawer.

Example calls

search_career_graph  {"query": "AWS"}
search_career_graph  {"query": "hiring", "type": "skill"}
get_item             {"id": "GoDaddy"}
list_items           {"type": "credential"}
show_layer           {"layer": "skills"}

Connect Claude Code or Codex

WebMCP tools live in the page, not behind a URL, so there is no server to point an agent at. The agent needs a browser it can drive that has WebMCP turned on, and the command below adds one as an MCP server. After that you ask the agent to open the site and use the tools.

Claude Code

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Or, with Playwright:

claude mcp add playwright -- npx @playwright/mcp@latest

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Or, with Playwright:

codex mcp add playwright -- npx @playwright/mcp@latest

Then ask

Open https://bfocht.github.io/ and use the page's WebMCP tools
(search_career_graph, get_item, list_items, show_layer) to summarize
Bryan Focht's engineering leadership experience.

WebMCP is still a draft, so support depends on your browser version and may sit behind a flag. If the agent reports that the page has no tools, check that the browser it launched has WebMCP enabled. If your agent cannot reach the tools, the same information is on the plain resume, and you can ask questions directly in the chat box on the graph.

Source

The tools are registered in section 10 of src/resume-knowledge-graph.html in bfocht/bfocht.github.io.