From ea34cbf0c49813bcc929a5f36682b1f38cdd8fe0 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Wed, 11 Nov 2026 08:25:07 +0000
Subject: [PATCH] feat(web): WebMCP tools via @profullstack/webmcp (search API
 + search form)

Adds the @profullstack/webmcp embed so an AI agent in the visitor's browser (WebMCP) can use this site's tools.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/lib/security-headers.js |  2 +-
 apps/web/src/views/Layout.jsx        | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/lib/security-headers.js b/apps/web/src/lib/security-headers.js
index 97f6716..3cc1d82 100644
--- a/apps/web/src/lib/security-headers.js
+++ b/apps/web/src/lib/security-headers.js
@@ -36,7 +36,7 @@ export const buildPolicy = ({ styleNonce } = {}) =>
      * styleNonce for its first use): @profullstack/footer 0.4.0 puts it on the
      * inline script that posts the newsletter form and reports the result inline.
      */
-    `script-src 'self' https://crawlproof.com${styleNonce ? ` 'nonce-${styleNonce}'` : ''}`,
+    `script-src 'self' https://crawlproof.com https://cdn.jsdelivr.net${styleNonce ? ` 'nonce-${styleNonce}'` : ''}`,
     /*
      * The inline <style>s are @profullstack/footer's and the pit.world network
      * footer's, allowed by a per-request nonce rather than 'unsafe-inline' or a
diff --git a/apps/web/src/views/Layout.jsx b/apps/web/src/views/Layout.jsx
index 12b82f9..475f07c 100644
--- a/apps/web/src/views/Layout.jsx
+++ b/apps/web/src/views/Layout.jsx
@@ -205,6 +205,16 @@ export const Layout = (props) => {
             async
           />
         ) : null}
+        {/* WebMCP (@profullstack/webmcp): site_info, open_page, search_site (public JSON search) and the
+            search form for the AI agent in the visitor's browser. */}
+        <script
+          type="module"
+          data-webmcp=""
+          src="https://cdn.jsdelivr.net/npm/@profullstack/webmcp@0/src/embed.js"
+          data-search-api="/api/v1/search?q={query}&limit={limit}"
+          data-search="/search?q={query}"
+          data-pages={JSON.stringify({ live: '/live', results: '/results', watch: '/watch', multiview: '/multiview', radio: '/radio', following: '/following', premium: '/premium', about: '/about' })}
+        />
       </head>
       {/* Carries the zone the server has on file, so app.js can report a correction
         from any page rather than only from settings -- someone who never opens
@@ -249,7 +259,7 @@ export const Layout = (props) => {
           refining a search means editing what you typed rather than retyping it.
         */}
           <search class="topsearch">
-            <form class="topsearch-form" method="get" action="/search">
+            <form class="topsearch-form" method="get" action="/search" toolname="search_form" tooldescription="Search teams, games, leagues and channels and show the results page" toolautosubmit="">
               <label class="sr-only" for="topsearch-q">
                 Search
               </label>