From 1b0f80701a58cd0df7322dc625516116e6314301 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Wed, 11 Nov 2026 08:02:39 +0000
Subject: [PATCH] feat: WebMCP tools via @profullstack/webmcp (bridges
 /api/mcp, search + form tools)

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>
---
 src/app/layout.tsx            | 12 ++++++++++++
 src/app/page.tsx              |  2 +-
 src/app/podcasts/page.tsx     |  2 +-
 src/app/radio/page.tsx        |  2 +-
 src/app/search/page.tsx       |  2 +-
 src/app/tv/page.tsx           |  2 +-
 src/components/SubmitForm.tsx |  2 +-
 7 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1182edb..259e69c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -129,6 +129,18 @@ const siteJsonLd = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        {/* WebMCP: site tools + the /api/mcp server for the AI agent in the visitor's browser (@profullstack/webmcp). */}
+        <script
+          type="module"
+          data-webmcp=""
+          src="https://cdn.jsdelivr.net/npm/@profullstack/webmcp@0/src/embed.js"
+          data-mcp="/api/mcp"
+          data-search-api="/api/search?q={query}&limit={limit}"
+          data-search="/search?q={query}"
+          data-pages={JSON.stringify({ podcasts: "/podcasts", radio: "/radio", tv: "/tv", browse: "/browse", networks: "/networks", add_a_show: "/submit", about: "/about" })}
+        />
+      </head>
       {/*
         Every internal link is a next/link on purpose. The player lives in the
         layout and keeps playing across route changes — but only while the
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0c9f740..d60a820 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -51,7 +51,7 @@ export default async function Home() {
             <Link href="/self-hosted">Self-hosted</Link>. Missing one?{" "}
             <Link href="/submit">Add it</Link>.
           </p>
-          <form className="searchbar" action="/search">
+          <form className="searchbar" action="/search" {...{ toolname: "search_podcasts", tooldescription: "Search the podcast directory and show the results page", toolautosubmit: "" }}>
             <input
               name="q"
               placeholder="Search podcasts…"
diff --git a/src/app/podcasts/page.tsx b/src/app/podcasts/page.tsx
index b12b024..0d7f4ff 100644
--- a/src/app/podcasts/page.tsx
+++ b/src/app/podcasts/page.tsx
@@ -67,7 +67,7 @@ export default async function Podcasts() {
           themselves. Prefer something live? <Link href="/radio">Radio</Link> and{" "}
           <Link href="/tv">TV</Link> play here too.
         </p>
-        <form className="searchbar" action="/search">
+        <form className="searchbar" action="/search" {...{ toolname: "search_podcasts", tooldescription: "Search the podcast directory and show the results page", toolautosubmit: "" }}>
           <input name="q" placeholder="Search podcasts…" aria-label="Search podcasts" />
           <button type="submit">Search</button>
         </form>
diff --git a/src/app/radio/page.tsx b/src/app/radio/page.tsx
index 05e5e0d..8d94d1a 100644
--- a/src/app/radio/page.tsx
+++ b/src/app/radio/page.tsx
@@ -147,7 +147,7 @@ export default async function Radio({ searchParams }: { searchParams: Promise<Pa
           that plays on this page are shown.
         </p>
 
-        <form className="live-filter" action="/radio">
+        <form className="live-filter" action="/radio" {...{ toolname: "filter_radio", tooldescription: "Filter live radio stations by name and country", toolautosubmit: "" }}>
           <input name="q" defaultValue={q} placeholder="Search stations…" aria-label="Search stations" />
           <select name="country" defaultValue={country?.toLowerCase() || ""} aria-label="Country">
             <option value="">Any country</option>
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index aff082d..f4d15b9 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -45,7 +45,7 @@ export default async function Search({
         <h1 style={{ fontSize: 30, margin: "0 0 18px", letterSpacing: "-0.02em" }}>
           Search
         </h1>
-        <form className="searchbar" action="/search" style={{ maxWidth: 560 }}>
+        <form className="searchbar" action="/search" style={{ maxWidth: 560 }} {...{ toolname: "search_podcasts", tooldescription: "Search the podcast directory and show the results page", toolautosubmit: "" }}>
           <input
             name="q"
             defaultValue={query}
diff --git a/src/app/tv/page.tsx b/src/app/tv/page.tsx
index 8643f0f..d7dad5e 100644
--- a/src/app/tv/page.tsx
+++ b/src/app/tv/page.tsx
@@ -125,7 +125,7 @@ export default async function Tv({ searchParams }: { searchParams: Promise<Param
           play it on a secure page.
         </p>
 
-        <form className="live-filter" action="/tv">
+        <form className="live-filter" action="/tv" {...{ toolname: "filter_tv", tooldescription: "Filter live TV channels by name and country", toolautosubmit: "" }}>
           <input name="q" defaultValue={q} placeholder="Search channels…" aria-label="Search channels" />
           <select name="country" defaultValue={country?.toLowerCase() || ""} aria-label="Country">
             <option value="">Any country</option>
diff --git a/src/components/SubmitForm.tsx b/src/components/SubmitForm.tsx
index 3b233a7..046e239 100644
--- a/src/components/SubmitForm.tsx
+++ b/src/components/SubmitForm.tsx
@@ -73,7 +73,7 @@ export default function SubmitForm({ initial, error, errorUrl }: { initial: stri
         account needed.
       </p>
 
-      <form onSubmit={submit} method="post" action="/api/submit" encType="multipart/form-data">
+      <form onSubmit={submit} method="post" action="/api/submit" encType="multipart/form-data" {...{ toolname: "submit_show_form", tooldescription: "Fill in the add-a-show form with site or feed URLs (one per line); the person reviews and submits" }}>
         <label htmlFor="input">Site or feed URL, one per line</label>
         <textarea
           id="input"