feat: WebMCP tools via @profullstack/webmcp (bridges /api/mcp, search + form tools)

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

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…"

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>

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>

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}

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>

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"