WebMcpShell

Client-side WebMCP (Web Model Context Protocol) integration that exposes browser-native tools to AI agents visiting the site.

Purpose

Registers structured tools via document.modelContext so browser agents can search content, fetch pages, navigate, and interact with Dex — without DOM scraping. All data tools proxy to the existing public REST API at /api/*.

When the native WebMCP API is missing, the site installs document.modelContext in two ways: an async /webmcp-polyfill.js in the root <head> (valid for React 19), and installWebMcpPolyfill() when tools register. Native Chrome 146+ modelContext is left untouched.

Components

Component	Role
`WebMcpShell`	Registers tools on mount, tracks count, renders demo indicator
`WebMcpDexBridge`	Syncs Dex drawer callbacks when concierge is enabled
`WebMcpIndicator`	Optional bottom-left pill showing active tool count

Registered Tools

Tool	Read-only	Description
`content_search`	Yes	Search blogs, guides, livestreams, kickstarts via `/api/content`
`content_get`	Yes	Fetch full content by URL path
`people_list`	Yes	List all people
`people_get_profile`	Yes	Get person profile and authored content
`search_typeahead`	Yes	Quick search suggestions
`get_site_info`	Yes	Discovery pointers (llms.txt, agents.md, OpenAPI, server MCP)
`get_current_page`	Yes	Current URL, path, and document title
`navigate_to`	No	Client-side navigation to an internal path
`open_dex`	No	Open Dex assistant drawer (concierge enabled only)
`ask_dex`	No	Open Dex and send a question (concierge enabled only)

Environment Variables

Variable	Default	Description
`NEXT_PUBLIC_WEBMCP_ENABLED`	`true`	Set to `false` to disable all WebMCP registration
`NEXT_PUBLIC_WEBMCP_DEMO_INDICATOR`	`true` in dev, `false` in prod	Show "WebMCP: N tools" indicator

Demo Instructions

Use Chrome 146+ Canary with chrome://flags/#enable-webmcp-testing enabled.
Visit the site over HTTPS (production or local with secure context).
In development, confirm the bottom-left indicator shows registered tools.
Browser agents discover tools via document.modelContext.
Try: content_search → content_get → ask_dex.
Compare with external server MCP at /api/mcp (same data, HTTP transport).

Usage

Mounted in app/layout.tsx:

<ConciergeProvider>
  <WebMcpDexBridge />
  ...
</ConciergeProvider>
<WebMcpShell />

<ConciergeProvider>
  <WebMcpDexBridge />
  ...
</ConciergeProvider>
<WebMcpShell />

Behavior Notes

Registration uses AbortSignal cleanup on unmount (per WebMCP best practices).
Dex tools register only when ConciergeProvider is active and the dex bridge is set.
Permissions-Policy: tools=(self) is set in next.config.ts.
Implementation lives in lib/webmcp/; this component is the client entry point.

Server MCP: /api/mcp (see AgentMetadata)
Platform overview: platform.md