From 6da217f4c4622f775a3edc48b3e5e39b1b11addd Mon Sep 17 00:00:00 2001
From: teahubxyz <boring+teahub@agentmail.to>
Date: Thu, 22 Oct 2026 19:13:41 +0000
Subject: [PATCH] =?UTF-8?q?mcp:=20spike=20=E2=80=94=20gandora=20MCP=20App?=
 =?UTF-8?q?=20audio=20probe=20(ui://gandora/probe=20+=20get=5Ftrack)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mcp/README.md |  21 +++++++
 mcp/worker.js | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 169 insertions(+)
 create mode 100644 mcp/README.md
 create mode 100644 mcp/worker.js

diff --git a/mcp/README.md b/mcp/README.md
new file mode 100644
index 0000000..0c8abd3
--- /dev/null
+++ b/mcp/README.md
@@ -0,0 +1,21 @@
+# gandora MCP spike
+
+A throwaway experiment, not part of the page. Question: can a gandora player run as an MCP App inside claude.ai and
+play audio, and by which path?
+
+The chat Visualizer sandbox (Oct 22 2026) played Web Audio but refused `<audio>` from dev.gandora.lol and teahub.xyz
+(MediaError code 4: CSP). An MCP App's UI resource can declare its own domains, and can call its server's tools
+through the host, so this probe tests three paths:
+
+1. **synth**: Web Audio, no network (control)
+2. **remote**: `<audio>` from dev.gandora.lol, declared in the resource's `_meta.ui.csp.resourceDomains`
+3. **blob**: the UI calls `get_track` through the host bridge, gets base64 mp3, plays it from a `blob:` URL
+
+`worker.js` is a single stateless Cloudflare Worker speaking MCP over Streamable HTTP (POST `/mcp`, JSON replies).
+Tools: `open_probe` (shows the UI) and `get_track` (app-only). Deployed as `gandora-mcp` at
+`https://gandora-mcp.yolopreneur.lol/mcp` by teahubxyz/time › Actions › gandora-mcp (reads this file from `dev`).
+
+Try it: add the URL as a custom connector in claude.ai, then ask Claude to open the gandora probe.
+
+No auth, no keys: it only serves public test clips. Don't grow it in place; the real player server gets designed
+from what this answers.
diff --git a/mcp/worker.js b/mcp/worker.js
new file mode 100644
index 0000000..607501f
--- /dev/null
+++ b/mcp/worker.js
@@ -0,0 +1,148 @@
+// gandora MCP spike: one stateless Streamable-HTTP MCP endpoint (POST /mcp, JSON responses) exposing an MCP App.
+// Question it answers: can a gandora player inside claude.ai play audio, and by which path?
+//   1. synth  - Web Audio, no network
+//   2. remote - <audio src> from dev.gandora.lol, allowed through the resource's declared CSP domains
+//   3. blob   - bytes returned by the get_track tool (called by the UI through the host bridge) -> blob: URL
+// Throwaway: not wired to the page, the player or the inference worker. See mcp/README.md.
+
+const MEDIA = "https://dev.gandora.lol";
+const TRACKS = {
+  sky: "/asmr/audio/kokoro-sky.mp3",
+  rain: "/asmr/audio/bed-rain.mp3",
+};
+const UI_URI = "ui://gandora/probe";
+const UI_MIME = "text/html;profile=mcp-app";
+const UI_META = { ui: { csp: { resourceDomains: [MEDIA], connectDomains: [MEDIA] }, prefersBorder: true } };
+
+const TOOLS = [
+  {
+    name: "open_probe",
+    title: "Open gandora audio probe",
+    description: "Shows the gandora audio probe player in chat (an MCP App). Use when the user asks to run the gandora probe or open the gandora player.",
+    inputSchema: { type: "object", properties: {} },
+    _meta: { ui: { resourceUri: UI_URI }, "ui/resourceUri": UI_URI },
+  },
+  {
+    name: "get_track",
+    title: "Get a gandora track",
+    description: "Returns one short test track's audio bytes (base64 mp3). Called by the probe UI.",
+    inputSchema: { type: "object", properties: { id: { type: "string", enum: Object.keys(TRACKS) } } },
+    _meta: { ui: { visibility: ["app"] } },
+  },
+];
+
+function b64(buf) {
+  const u = new Uint8Array(buf);
+  let s = "";
+  for (let i = 0; i < u.length; i += 0x8000) s += String.fromCharCode.apply(null, u.subarray(i, i + 0x8000));
+  return btoa(s);
+}
+
+async function callTool(name, args) {
+  if (name === "open_probe") {
+    return { content: [{ type: "text", text: "gandora probe opened. Tap each row, then Send results." }],
+             structuredContent: { media: MEDIA, tracks: Object.keys(TRACKS) } };
+  }
+  if (name === "get_track") {
+    const id = (args && args.id) || "sky";
+    const path = TRACKS[id];
+    if (!path) return { isError: true, content: [{ type: "text", text: `unknown track ${id}` }] };
+    const r = await fetch(MEDIA + path);
+    if (!r.ok) return { isError: true, content: [{ type: "text", text: `fetch ${path} -> ${r.status}` }] };
+    const data = b64(await r.arrayBuffer());
+    return { content: [{ type: "text", text: `track ${id}: ${data.length} base64 chars` }],
+             structuredContent: { id, mimeType: "audio/mpeg", data } };
+  }
+  return null;
+}
+
+async function handle(msg) {
+  const { id, method, params } = msg;
+  const ok = (result) => ({ jsonrpc: "2.0", id, result });
+  const err = (code, message) => ({ jsonrpc: "2.0", id, error: { code, message } });
+  switch (method) {
+    case "initialize":
+      return ok({
+        protocolVersion: (params && params.protocolVersion) || "2025-06-18",
+        capabilities: { tools: {}, resources: {} },
+        serverInfo: { name: "gandora", title: "gandora", version: "0.0.1-spike" },
+        instructions: "gandora: generative radio. open_probe shows the audio probe player in chat.",
+      });
+    case "ping":
+      return ok({});
+    case "tools/list":
+      return ok({ tools: TOOLS });
+    case "tools/call": {
+      const res = await callTool(params && params.name, params && params.arguments);
+      return res ? ok(res) : err(-32602, `unknown tool ${params && params.name}`);
+    }
+    case "resources/list":
+      return ok({ resources: [{ uri: UI_URI, name: "gandora probe", mimeType: UI_MIME, _meta: UI_META }] });
+    case "resources/templates/list":
+      return ok({ resourceTemplates: [] });
+    case "resources/read":
+      if (params && params.uri === UI_URI)
+        return ok({ contents: [{ uri: UI_URI, mimeType: UI_MIME, text: PROBE_HTML, _meta: UI_META }] });
+      return err(-32002, "resource not found");
+    default:
+      if (id === undefined) return null; // notification
+      return err(-32601, `method not found: ${method}`);
+  }
+}
+
+const CORS = {
+  "access-control-allow-origin": "*",
+  "access-control-allow-headers": "content-type, mcp-session-id, mcp-protocol-version, authorization",
+  "access-control-allow-methods": "GET, POST, DELETE, OPTIONS",
+};
+
+export default {
+  async fetch(req) {
+    const url = new URL(req.url);
+    if (req.method === "OPTIONS") return new Response(null, { headers: CORS });
+    if (url.pathname === "/health") return new Response("ok gandora-mcp", { headers: CORS });
+    if (url.pathname !== "/mcp") return new Response("gandora mcp spike: POST /mcp", { status: 404, headers: CORS });
+    if (req.method !== "POST") return new Response(null, { status: 405, headers: CORS });
+    let body;
+    try { body = await req.json(); } catch { return Response.json({ jsonrpc: "2.0", id: null, error: { code: -32700, message: "parse error" } }, { status: 400, headers: CORS }); }
+    const batch = Array.isArray(body);
+    const out = (await Promise.all((batch ? body : [body]).map(handle))).filter(Boolean);
+    if (!out.length) return new Response(null, { status: 202, headers: CORS });
+    return Response.json(batch ? out : out[0], { headers: CORS });
+  },
+};
+
+const PROBE_HTML = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
+<style>
+:root{color-scheme:light dark;font-family:system-ui,sans-serif}
+body{margin:0;padding:14px;background:transparent;color:CanvasText}
+h1{font-size:15px;font-weight:600;margin:0 0 10px}
+.row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;margin:8px 0}
+.s{font-size:12px;opacity:.75}.ok{color:#2a8a3e;opacity:1}.bad{color:#c0392b;opacity:1}
+button{font:inherit;font-size:13px;padding:5px 10px;border-radius:7px;border:1px solid #8886;background:transparent;color:inherit;cursor:pointer}
+#log{font:11px ui-monospace,monospace;white-space:pre-wrap;opacity:.7;margin-top:10px;max-height:120px;overflow:auto}
+</style></head><body>
+<h1>gandora · MCP App probe</h1>
+<div id="rows"></div>
+<div style="display:flex;gap:8px;margin-top:12px"><button id="all">Run all</button><button id="send">Send results ↗</button></div>
+<div id="log"></div>
+<script>
+const R={},log=t=>{document.getElementById('log').textContent+=t+'\\n'};
+let nid=1;const pend={};
+function rpc(method,params){const id=nid++;return new Promise((res,rej)=>{pend[id]={res,rej};window.parent.postMessage({jsonrpc:'2.0',id,method,params},'*');setTimeout(()=>{if(pend[id]){delete pend[id];rej(new Error('timeout '+method))}},20000)})}
+function note(method,params){window.parent.postMessage({jsonrpc:'2.0',method,params},'*')}
+window.addEventListener('message',e=>{const m=e.data;if(!m||m.jsonrpc!=='2.0')return;if(m.id!=null&&pend[m.id]){const p=pend[m.id];delete pend[m.id];m.error?p.rej(new Error(m.error.message||JSON.stringify(m.error))):p.res(m.result)}else if(m.method){log('host: '+m.method)}});
+let ready=rpc('ui/initialize',{protocolVersion:'2026-01-26',appInfo:{name:'gandora-probe',version:'0.0.1'},appCapabilities:{}}).then(r=>{log('init ok '+(r&&r.protocolVersion||''));note('ui/notifications/initialized',{});return true}).catch(e=>{log('init: '+e.message);return false});
+const tests=[{id:'synth',name:'Web Audio synth'},{id:'remote',name:'<audio> from dev.gandora.lol (CSP domain)'},{id:'blob',name:'bytes via get_track tool → blob:'}];
+const rows=document.getElementById('rows');
+for(const t of tests){const d=document.createElement('div');d.className='row';d.innerHTML='<span>'+t.name.replace(/</g,'&lt;')+'</span><span style="display:flex;gap:8px;align-items:center"><span class="s" id="s-'+t.id+'">not run</span><button>Play</button></span>';d.querySelector('button').onclick=()=>run(t);rows.appendChild(d)}
+function set(id,txt,ok){R[id]=txt;const e=document.getElementById('s-'+id);e.textContent=txt;e.className='s'+(ok===true?' ok':ok===false?' bad':'')}
+let cur;
+async function playUrl(id,src){if(cur)cur.pause();const a=new Audio();cur=a;a.onerror=()=>set(id,'failed (code '+(a.error&&a.error.code)+')',false);a.src=src;try{await a.play();set(id,'playing',true);setTimeout(()=>a.pause(),4000)}catch(e){if(R[id]==='loading…')set(id,'refused: '+e.name,false)}}
+async function run(t){set(t.id,'loading…');
+if(t.id==='synth'){try{const C=new(window.AudioContext||window.webkitAudioContext)();await C.resume();const o=C.createOscillator(),g=C.createGain();o.frequency.value=440;g.gain.value=.08;o.connect(g).connect(C.destination);o.start();o.stop(C.currentTime+.8);set('synth','played ('+C.state+')',true)}catch(e){set('synth','error: '+e.name,false)}return}
+if(t.id==='remote')return playUrl('remote','${MEDIA}/asmr/audio/bed-rain.mp3');
+if(t.id==='blob'){try{if(!await ready)throw new Error('no host bridge');const r=await rpc('tools/call',{name:'get_track',arguments:{id:'sky'}});const sc=r&&r.structuredContent;if(!sc||!sc.data)throw new Error('no bytes in result');const bin=atob(sc.data),u=new Uint8Array(bin.length);for(let i=0;i<bin.length;i++)u[i]=bin.charCodeAt(i);log('got '+u.length+' bytes');return playUrl('blob',URL.createObjectURL(new Blob([u],{type:sc.mimeType})))}catch(e){set('blob','error: '+e.message,false)}}}
+document.getElementById('all').onclick=async()=>{for(const t of tests){await run(t);await new Promise(r=>setTimeout(r,1500))}};
+document.getElementById('send').onclick=async()=>{const text='gandora MCP App probe: '+tests.map(t=>t.id+'='+(R[t.id]||'not run')).join('; ');try{await ready;await rpc('ui/message',{role:'user',content:[{type:'text',text}]});log('sent')}catch(e){log('send failed: '+e.message+' — copy: '+text)}};
+</script></body></html>`;