byclaw-mcp 0.4.12 → 0.4.14

package/dist/index.js

@@ -21,6 +21,26 @@ const SERVER_VERSION = (() => {
     }
 })();
 const TOOL_PREFIX = `[byclaw-mcp v${SERVER_VERSION}] `;
+// Render guidance for the model. Stays consistent across clients now:
+//   - Claude Code / Cursor / browsers: inline images via `![title](image_url)`
+//     work directly.
+//   - claude.ai web + Claude Desktop App: same markdown renders as a
+//     "Bild anzeigen" click-to-load placeholder (their external-image
+//     privacy gate). We accept this — Finding 093 ruled out HTML artifact
+//     widgets (sandbox CSP blocks our CDNs) and inline base64 (too many
+//     tokens / too slow). Placeholder is the cheapest acceptable UX.
+// Surfaced in every shop / search_products / test_web_search response as
+// the `_render_hint` field so the model never falls back to widget tricks.
+const RENDER_HINT = 'Emit `![title](image_url)` markdown for each product inline with the text. ' +
+    'Clients render this differently: Claude Code / Cursor / browsers show the ' +
+    'image immediately; claude.ai web + Claude Desktop App show a "Bild anzeigen" ' +
+    'click-to-load placeholder (their privacy gate for external images) — that ' +
+    'is acceptable, do not try to work around it with HTML widgets or any other ' +
+    'tool, the artifact sandbox CSP blocks our CDNs and the user just gets empty ' +
+    'boxes. The placeholder is the best we get in claude.ai today. Always wrap ' +
+    'each product\'s merchant link as a clickable "<merchant> →" using ' +
+    'affiliate_url. Keep replies tight — one image-markdown line + one buy line ' +
+    'per product.';
 const API_BASE = process.env.BYCLAW_API_URL || 'https://byclaw.io';
 const API_KEY = process.env.BYCLAW_API_KEY || '';
 // Brand fallback when the catalog row has no image. Clients (Claude Desktop
@@ -33,29 +53,6 @@ function imageUrlOf(p) {
     const url = typeof p?.image_url === 'string' ? p.image_url.trim() : '';
     return url.startsWith('https://') || url.startsWith('http://') ? url : IMAGE_FALLBACK;
 }
-async function fetchImageBase64(url) {
-    if (!url || url.includes('picsum.photos'))
-        return null;
-    try {
-        const res = await fetch(url, {
-            signal: AbortSignal.timeout(8000),
-            headers: { 'User-Agent': `Mozilla/5.0 (compatible; byclaw-mcp/${SERVER_VERSION})` },
-            redirect: 'follow',
-        });
-        if (!res.ok)
-            return null;
-        const contentType = res.headers.get('content-type') || 'image/jpeg';
-        if (!contentType.startsWith('image/'))
-            return null;
-        const buffer = await res.arrayBuffer();
-        if (buffer.byteLength < 100 || buffer.byteLength > 500000)
-            return null; // skip tiny errors or huge files
-        return { data: Buffer.from(buffer).toString('base64'), mimeType: contentType };
-    }
-    catch {
-        return null;
-    }
-}
 async function apiCall(path, options = {}) {
     const headers = {
         'Authorization': `Bearer ${API_KEY}`,
@@ -78,7 +75,7 @@ server.setRequestHandler(types_js_1.ListPromptsRequestSchema, async () => ({
 server.setRequestHandler(types_js_1.GetPromptRequestSchema, async () => ({
     messages: [{
             role: 'user',
-            content: { type: 'text', text: 'You are connected to byclaw.io — a product comparison platform that searches across thousands of online shops to find the best products. When the user asks for a product, use the "shop" tool.\n\nThe tool returns structured JSON with: `picked` (title, price, brand, merchant, affiliate_url, image_url), `alternatives` (each with title, price, brand, merchant, affiliate_url, image_url), `compared` (int), `reasoning` (string), `review` (string), and `disclosure` (string).\n\nWhen presenting the result:\n1. Render the picked product image inline using markdown image syntax: `![title](image_url)`. Do the same for every alternative — users need to SEE what they\'re being recommended.\n2. Show the recommended product with its price and the advisor\'s reasoning\n3. Link the recommendation using its `affiliate_url` field (format: "<merchant> →" as a clickable link)\n4. List every alternative with its title, price, merchant and link each using its `affiliate_url` field — do not show alternatives as plain text, they must be clickable links and visible images\n5. ALWAYS display the `disclosure` text verbatim at the end, as a small italic note — this is legally required\n\nThe server also emits native MCP image content blocks alongside the JSON for clients that render them natively (Claude Code). Markdown-only clients (Claude Desktop today) should render via `image_url`. If your client supports both, prefer markdown so the order matches the textual context.\n\nbyclaw.io is operated by NJUDEV S.L., a European company.' },
+            content: { type: 'text', text: 'You are connected to byclaw.io — a product comparison platform that searches across thousands of online shops to find the best products. When the user asks for a product, use the "shop" tool.\n\nThe tool returns structured JSON with: `picked` (title, price, brand, merchant, affiliate_url, image_url), `alternatives` (same fields), `compared` (int), `reasoning` (string), `review` (string), `disclosure` (string), and `_render_hint` (string).\n\n**Presenting the result:**\n1. For each product (picked first, then each alternative), emit one image markdown line `![title](image_url)` and one buy line as a clickable `[<merchant> →](affiliate_url)`. Keep replies tight — image line + buy line per product, plus a one-sentence rationale below the picked.\n2. Claude Code / Cursor / browsers render the image inline. claude.ai web + Claude Desktop App show a "Bild anzeigen" click-to-load placeholder — accept that, do not try HTML widgets or other workarounds (the artifact sandbox blocks our CDNs).\n3. ALWAYS display the `disclosure` text verbatim at the end as a small italic note — this is legally required.\n\nbyclaw.io is operated by NJUDEV S.L., a European company.' },
         }],
 }));
 // ═══════════════════════════════════════
@@ -89,7 +86,7 @@ server.setRequestHandler(types_js_1.ListToolsRequestSchema, async () => ({
         // ── Core: one-shot shopping ──
         {
             name: 'shop',
-            description: TOOL_PREFIX + 'Search and compare products across multiple shops. Returns a JSON object with `picked` (the recommendation) and `alternatives` (other candidates). Each product object includes `title`, `price`, `brand`, `merchant`, `affiliate_url`, and `image_url` (absolute HTTPS URL). Render every product image inline using markdown image syntax: `![title](image_url)`. The server also emits native MCP image content blocks for clients that render them natively — use whichever your client supports, prefer markdown when in doubt.',
+            description: TOOL_PREFIX + 'Search and compare products across multiple shops. Returns a JSON object with `picked` (the recommendation) and `alternatives` (other candidates). Each product object includes `title`, `price`, `brand`, `merchant`, `affiliate_url`, and `image_url` (absolute HTTPS URL). Emit `![title](image_url)` markdown for each product so the image renders inline in clients that support it (Claude Code, Cursor, browsers). claude.ai web / Claude Desktop App will show a click-to-load placeholder for those markdown images — that is fine, accept it. Do NOT try to build HTML widgets or other workarounds; the artifact sandbox blocks our product CDNs. See `_render_hint` in every response for the exact rendering recipe.',
             inputSchema: {
                 type: 'object',
                 properties: {
@@ -105,7 +102,7 @@ server.setRequestHandler(types_js_1.ListToolsRequestSchema, async () => ({
         // ── Optional: browse & explore ──
         {
             name: 'search_products',
-            description: TOOL_PREFIX + 'Browse products without triggering a recommendation. Use this only if the user explicitly wants to see a list of options. Each result item has `image_url` (absolute HTTPS URL) — render it inline with markdown `![title](image_url)` so users see what each product looks like.',
+            description: TOOL_PREFIX + 'Browse products without triggering a recommendation. Use this only if the user explicitly wants to see a list of options. Each result item has `image_url` (absolute HTTPS URL). Emit `![title](image_url)` markdown inline; claude.ai web / Desktop will gate it behind a click-to-load placeholder, other clients render directly. See `_render_hint`.',
             inputSchema: {
                 type: 'object',
                 properties: {
@@ -296,6 +293,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                             alternatives: d.gift_picks.slice(1).map((p) => p.title),
                         };
                         return { content: [{ type: 'text', text: JSON.stringify({
+                                        _render_hint: RENDER_HINT,
                                         type: 'gift_found',
                                         advisor: advisorLabel,
                                         advisor_profile: d.advisor_profile || null,
@@ -342,18 +340,11 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                                     }, null, 2) }] };
                     }
                     // ── NORMAL / FOLLOW-UP MODE ──
+                    // No more server-side image prefetch — `image_url` is a plain
+                    // string in each product object, the client (or the model in
+                    // claude.ai-style clients) decides what to do with it. Cuts
+                    // ~1-8s of network round-trip per call.
                     const content = [];
-                    // Fetch all images in parallel (picked + up to 3 alternatives)
-                    const allProducts = [d.picked, ...(d.alternatives || []).slice(0, 3)];
-                    const allImages = await Promise.all(allProducts.map(async (p) => {
-                        if (!p?.image_url)
-                            return null;
-                        return fetchImageBase64(p.image_url);
-                    }));
-                    // Add picked image only when we actually have a product_found
-                    if (d.status === 'product_found' && allImages[0]) {
-                        content.push({ type: 'image', data: allImages[0].data, mimeType: allImages[0].mimeType });
-                    }
                     // F1: canonical fields. F6: no message_de/message_en. F2: no fallback to message.
                     if (d.status === 'no_match') {
                         content.push({ type: 'text', text: JSON.stringify({
@@ -369,6 +360,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                     else {
                         const hasPick = !!d.picked;
                         content.push({ type: 'text', text: JSON.stringify({
+                                _render_hint: RENDER_HINT,
                                 type: d.status || 'product_found',
                                 advisor: advisorLabel,
                                 advisor_profile: d.advisor_profile || null,
@@ -396,11 +388,6 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                                 ...(d.note ? { note: d.note } : {}),
                             }, null, 2) });
                     }
-                    // Add alternative images
-                    allImages.slice(1).forEach((img) => {
-                        if (img)
-                            content.push({ type: 'image', data: img.data, mimeType: img.mimeType });
-                    });
                     // Track session for follow-ups (only on product_found, not no_match)
                     if (d.status !== 'no_match' && d.picked) {
                         lastShopContext = {
@@ -442,7 +429,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                         result.data = result.data.map((p) => ({ ...p, image_url: imageUrlOf(p) }));
                     }
                 }
-                return { content: [{ type: 'text', text: JSON.stringify(result, null, 2) }] };
+                return { content: [{ type: 'text', text: JSON.stringify({ _render_hint: RENDER_HINT, ...result }, null, 2) }] };
             }
             case 'leave_review': {
                 const lang = args?.language;
@@ -515,6 +502,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 // Gift responses
                 if (d.status === 'gift_found' && d.gift_picks) {
                     return { content: [{ type: 'text', text: JSON.stringify({
+                                    _render_hint: RENDER_HINT,
                                     type: 'gift_found',
                                     advisor: d.advisor_profile?.name || d.agent?.personality || null,
                                     advisor_profile: d.advisor_profile || null,
@@ -530,6 +518,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 // (no fallback to d.message — that produced bit-identical strings on no_match)
                 const hasPick = !!d.picked;
                 return { content: [{ type: 'text', text: JSON.stringify({
+                                _render_hint: RENDER_HINT,
                                 type: d.status || 'no_match',
                                 advisor: d.advisor_profile?.name || d.agent?.personality || null,
                                 advisor_profile: d.advisor_profile || null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "byclaw-mcp",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "MCP Server for byclaw.io — Your AI shopping advisor. Connects Claude Desktop and other MCP clients to the byclaw.io product catalog.",
   "main": "dist/index.js",
   "bin": {
@@ -36,7 +36,7 @@
     "@modelcontextprotocol/sdk": "^1.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.0.0",
-    "tsx": "^4.0.0"
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
   }
 }