@orchyn/mcp 1.14.0 → 1.16.0

package/dist/shared/tools.js

@@ -11,13 +11,23 @@ import { OrchynError } from "./orchyn.js";
 import { formatPaywallError, runVideoAnalysis, validatePostUrl } from "./video.js";
 import { ORCHYN_UI_TEMPLATE } from "./ui-template.js";
 /** Current MCP server version — bumped on every deploy for traceability. */
-export const MCP_SERVER_VERSION = "1.14.0";
+export const MCP_SERVER_VERSION = "1.16.0";
 /** MCP Apps extension identifier */
 const UI_EXTENSION = "io.modelcontextprotocol/ui";
 /** MIME type for MCP Apps HTML resources */
 const RESOURCE_MIME_TYPE = "text/html;profile=mcp-app";
-/** Single UI resource URI shared by all tools */
+/** Default UI resource URI (only used when a tool has no explicit view). */
 const UI_RESOURCE_URI = "ui://orchyn/view";
+/**
+ * Distinct UI resource URI per tool/view. Claude/ChatGPT create one app
+ * instance per resourceUri and key app state by it (ext-apps#558), so giving
+ * each tool its own uri avoids a shared app instance / session colliding
+ * between different tools and lets each view complete its own handshake.
+ */
+function uiResource(tool) {
+    const slug = tool.replace(/[^a-z0-9_]/gi, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
+    return `ui://orchyn/${slug || "view"}`;
+}
 /**
  * claude.ai requires `ui.domain` on the resource == sha256("<MCP endpoint
  * URL>")[:32] + ".claudemcpcontent.com" — the iframe is only revealed on
@@ -41,24 +51,6 @@ async function computeAppDomain() {
         return undefined;
     }
 }
-/** Convert an arbitrary http(s) URL to a base64 MCP `image` data block. */
-async function fetchAsBase64Image(url, mimeType) {
-    try {
-        const res = await fetch(url, { signal: AbortSignal.timeout(12_000) });
-        if (!res.ok)
-            return { type: "image", data: "", mimeType };
-        const buf = await res.arrayBuffer();
-        const bytes = new Uint8Array(buf);
-        let bin = "";
-        for (let i = 0; i < bytes.length; i += 0x8000) {
-            bin += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
-        }
-        return { type: "image", data: btoa(bin), mimeType };
-    }
-    catch {
-        return { type: "image", data: "", mimeType };
-    }
-}
 /**
  * Rewrite external image URLs to go through the orchyn proxy so they
  * work inside ChatGPT's sandboxed iframe (CORS + CSP restrictions).
@@ -105,19 +97,12 @@ function proxyUrls(obj) {
     return obj;
 }
 async function toToolResult(proxy) {
-    // The MCP SDK's ImageContent only accepts `data` (base64). The orchyn
-    // backend now emits `url` image blocks pointing at permanent, re-hosted
-    // JPEG thumbnails (HEIC already transcoded), so convert those URLs to
-    // base64 data here — guaranteeing clients render a valid image.
-    const imgBlocks = proxy.contentBlocks.filter((c) => c.type === "image");
-    // Skip image blocks whose base64 is empty (fetch failed) — clients reject
-    // them with "could not be processed: Error processing image".
-    const images = (await Promise.all(imgBlocks.map((c) => c.url
-        ? fetchAsBase64Image(String(c.url), String(c.mimeType ?? "image/jpeg"))
-        : Promise.resolve({ type: "image", data: String(c.data ?? ""), mimeType: String(c.mimeType ?? "image/jpeg") })))).filter((img) => img.type === "image" && img.data.length > 0);
-    // The Rust backend embeds HTML cards directly in the text block
-    // (type:"text", text:"<div>...</div>\n\n{json}"). We extract the HTML
-    // prefix from the first text contentBlock and prepend it.
+    // MCP Apps views (ChatGPT & Claude) render the interactive HTML card, which
+    // already embeds all thumbnails/videos. Claude's Apps bridge rejects a tool
+    // result that mixes raw `image` blocks with an app view ("could not be
+    // processed: Error processing image" + blank iframe), so we intentionally
+    // drop the standalone base64 image blocks here and keep only the text block
+    // carrying the HTML card + structured JSON.
     const textBlock = proxy.contentBlocks.find((c) => c.type === "text");
     const rawText = textBlock ? String(textBlock.text ?? "") : "";
     const htmlPrefix = rawText.startsWith("<")
@@ -131,7 +116,7 @@ async function toToolResult(proxy) {
     const proxiedHtml = htmlPrefix ? proxyImageUrlsInHtml(htmlPrefix) : "";
     const text = proxiedHtml ? `${proxiedHtml}\n\n${textJson}` : textJson;
     return {
-        content: [...images, { type: "text", text }],
+        content: [{ type: "text", text }],
         structuredContent: proxied ?? {},
     };
 }
@@ -259,49 +244,68 @@ export function createMcpServer(makeClient) {
             },
         },
     });
-    // Register the single UI resource that all tools share.
-    // The host reads this resource, renders it in a sandboxed iframe,
-    // and pushes tool results via ui/notifications/tool-result.
-    server.registerResource("Orchyn Interactive View", UI_RESOURCE_URI, { mimeType: RESOURCE_MIME_TYPE }, async () => {
-        // Build CSP resourceDomains from env so proxied thumbnails work
-        const domains = [
-            "https://*.tiktokcdn.com",
-            "https://*.cdninstagram.com",
-            "https://*.ytimg.com",
-            "https://*.googlevideo.com",
-            "https://*.licdn.com",
-            "https://*.linkedin.com",
-        ];
-        const apiUrl = process.env.ORCHYN_API_URL || process.env.ORCHYN_BASE_URL;
-        if (apiUrl && apiUrl.trim()) {
-            domains.push(apiUrl.trim().replace(/\/+$/, ""));
-        }
-        const domain = await computeAppDomain();
-        return {
-            contents: [
-                {
-                    uri: UI_RESOURCE_URI,
-                    mimeType: RESOURCE_MIME_TYPE,
-                    text: ORCHYN_UI_TEMPLATE,
-                    _meta: {
-                        ui: {
-                            ...(domain ? { domain } : {}),
-                            csp: {
-                                resourceDomains: domains,
+    // Register one UI app resource per tool/view. Claude/ChatGPT render a
+    // separate sandboxed app per resourceUri and key app state by it, so a
+    // distinct URI per tool avoids a shared app instance/session colliding
+    // between different tools (ext-apps#558). Each URI serves the same generic
+    // template, which renders whichever structuredResult the tool delivers.
+    const TOOL_URIS = [
+        "analyze_post",
+        "get_social_media",
+        "discover_social_posts",
+        "get_user_posts",
+        "analyze_creator_profile",
+        "get_post_comments",
+        "search_creators",
+        "get_similar_creators",
+        "discover_sounds",
+        "check_orchyn_credits",
+        "buy_orchyn_credits",
+        "understand_social_post",
+    ].map(uiResource);
+    // Build CSP resourceDomains from env so proxied thumbnails work
+    const domains = [
+        "https://*.tiktokcdn.com",
+        "https://*.cdninstagram.com",
+        "https://*.ytimg.com",
+        "https://*.googlevideo.com",
+        "https://*.licdn.com",
+        "https://*.linkedin.com",
+    ];
+    const apiUrl = process.env.ORCHYN_API_URL || process.env.ORCHYN_BASE_URL;
+    if (apiUrl && apiUrl.trim()) {
+        domains.push(apiUrl.trim().replace(/\/+$/, ""));
+    }
+    for (const uri of TOOL_URIS) {
+        server.registerResource("Orchyn Interactive View", uri, { mimeType: RESOURCE_MIME_TYPE }, async () => {
+            // Computed per-request so the claude.ai sandbox origin is correct.
+            const domain = await computeAppDomain();
+            return {
+                contents: [
+                    {
+                        uri,
+                        mimeType: RESOURCE_MIME_TYPE,
+                        text: ORCHYN_UI_TEMPLATE,
+                        _meta: {
+                            ui: {
+                                ...(domain ? { domain } : {}),
+                                csp: {
+                                    resourceDomains: domains,
+                                },
+                                prefersBorder: false,
                             },
-                            prefersBorder: false,
                         },
                     },
-                },
-            ],
-        };
-    });
+                ],
+            };
+        });
+    }
     server.registerTool("analyze_post", {
         title: "Analyze Post",
         description: "Analyze a social post (video, image, carousel/slideshow) from its link — " +
             "imports the media and runs AI analysis over the actual content (video frames, carousel images, caption). " +
             "Supports TikTok, Instagram, YouTube, X/Twitter, Douyin, Xiaohongshu and Bilibili. Returns the full analysis once finished. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("analyze_post") }, "ui/resourceUri": uiResource("analyze_post") },
         inputSchema: z
             .object({
             url: z.string().describe("Public post URL (TikTok/Instagram/YouTube/X, Douyin, Xiaohongshu or Bilibili)."),
@@ -330,19 +334,14 @@ export function createMcpServer(makeClient) {
             const creatorHandle = String(post.creatorHandle ?? "");
             const title = String(post.title ?? post.caption ?? "");
             const htmlCard = buildAnalysisHtmlCard(proxied, thumbnailUrl, platform, creatorHandle, title);
-            // The backend attaches `_inlineImages` as permanent orchyn public URLs
-            // (re-hosted into storage, HEIC already transcoded to JPEG). The SDK's
-            // ImageContent only accepts base64 `data`, so fetch each URL and encode it.
-            // Skip image blocks whose base64 is empty (fetch failed) — clients
-            // reject them with "could not be processed: Error processing image".
-            const images = (await Promise.all((result.inlineImages ?? [])
-                .filter((img) => typeof img === "object" && img !== null)
-                .map((img) => "url" in img && img.url
-                ? fetchAsBase64Image(String(img.url), String(img.mimeType ?? "image/jpeg"))
-                : Promise.resolve({ type: "image", data: String(img.data ?? ""), mimeType: String(img.mimeType ?? "image/jpeg") })))).filter((img) => img.type === "image" && img.data.length > 0);
+            // The interactive HTML card above already embeds the thumbnail + full
+            // video, so no standalone base64 `image` blocks are emitted. Claude's Apps
+            // bridge rejects raw image blocks mixed with an app view ("could not be
+            // processed: Error processing image" + blank iframe), so we keep only the
+            // text block carrying the card + structured JSON.
             const textJson = JSON.stringify(proxied, null, 2);
             return {
-                content: [...images, { type: "text", text: `${htmlCard}\n\n${textJson}` }],
+                content: [{ type: "text", text: `${htmlCard}\n\n${textJson}` }],
                 structuredContent: proxied,
             };
         }
@@ -362,7 +361,7 @@ export function createMcpServer(makeClient) {
         description: "Fetch a social post's media from a TikTok, Instagram, YouTube, X/Twitter, Douyin, Xiaohongshu or Bilibili URL: " +
             "contentType (video/image/carousel/slideshow), title, caption, author, stats and direct media URLs. " +
             "Returns an inline thumbnail image. Consumes 1 orchyn credit. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("get_social_media") }, "ui/resourceUri": uiResource("get_social_media") },
         inputSchema: z
             .object({
             url: z.string().describe("Full public post URL."),
@@ -382,7 +381,7 @@ export function createMcpServer(makeClient) {
         description: "Discover recent posts (video, image, carousel, slideshow) for a niche on YouTube, TikTok, Instagram, Douyin, Xiaohongshu, X/Twitter or Bilibili. " +
             "Each post includes title/caption, thumbnailUrl, externalUrl, views/likes/comments and inline thumbnails (up to 4) so they show in chat. " +
             'Say "next" to paginate (offset), or "analyze the 2nd one" / "analyze all" for batch analysis. Consumes 2 orchyn credits. First use free per user.',
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("discover_social_posts") }, "ui/resourceUri": uiResource("discover_social_posts") },
         inputSchema: z
             .object({
             niche: z.string().describe("Niche/topic, e.g. 'fitness'."),
@@ -409,7 +408,7 @@ export function createMcpServer(makeClient) {
         description: "List recent posts by a creator handle (e.g. @zoundsapp) on TikTok, Instagram, YouTube, Douyin, Xiaohongshu, X/Twitter, Bilibili or LinkedIn (LinkedIn uses the profile public_id, e.g. 'billgates'). " +
             "Each post includes title/caption, thumbnailUrl, externalUrl, views/likes/comments and inline thumbnails (up to 4) so they show in chat. " +
             "Use this when Claude needs to pull more posts from the same account to spot a pattern, or to scan a whole profile. Consumes 2 orchyn credits. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("get_user_posts") }, "ui/resourceUri": uiResource("get_user_posts") },
         inputSchema: z
             .object({
             username: z.string().describe("Creator handle, e.g. 'zoundsapp' or '@zoundsapp'."),
@@ -434,7 +433,7 @@ export function createMcpServer(makeClient) {
         description: "Deep-dive a whole creator profile on TikTok, Instagram, YouTube, Douyin, Xiaohongshu, X/Twitter, Bilibili or LinkedIn: fetch recent posts, run multimodal AI on up to 3, " +
             "then synthesize a profile report — creator summary, niche, content themes, hook styles, strengths/weaknesses, " +
             "engagement patterns, audience insights, variation ideas, collaboration fit. Consumes 15 orchyn credits. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("analyze_creator_profile") }, "ui/resourceUri": uiResource("analyze_creator_profile") },
         inputSchema: z
             .object({
             username: z.string().describe("Creator handle, e.g. 'zoundsapp'."),
@@ -459,7 +458,7 @@ export function createMcpServer(makeClient) {
         title: "Get Post Comments",
         description: "Fetch top comments for a post URL on TikTok, Instagram, YouTube, Douyin, X/Twitter, Bilibili or LinkedIn, plus keyword clusters from TikTok Analytics " +
             "when available — audience sentiment/audience-signal analysis. Consumes 2 orchyn credits. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("get_post_comments") }, "ui/resourceUri": uiResource("get_post_comments") },
         inputSchema: z
             .object({
             url: z.string().describe("Full public post URL (TikTok/Instagram/YouTube/Douyin/X/Bilibili/LinkedIn)."),
@@ -479,7 +478,7 @@ export function createMcpServer(makeClient) {
         title: "Search Creators",
         description: "Search creators by niche/keyword on TikTok, Instagram, Xiaohongshu, YouTube or Douyin — username, nickname, follower count, " +
             "signature, verified status. Use to find influencers to vet or analyze. Consumes 2 orchyn credits. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("search_creators") }, "ui/resourceUri": uiResource("search_creators") },
         inputSchema: z
             .object({
             keyword: z.string().describe("Niche/keyword, e.g. 'fitness' or a creator name."),
@@ -503,7 +502,7 @@ export function createMcpServer(makeClient) {
         title: "Get Similar Creators",
         description: "Find lookalike creators for a given handle — TikTok similar-user recommendations or Instagram " +
             "similar users. Useful for scaling: 'if this creator works, here are more like them'. Consumes 2 orchyn credits. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("get_similar_creators") }, "ui/resourceUri": uiResource("get_similar_creators") },
         inputSchema: z
             .object({
             username: z.string().describe("Seed creator handle, e.g. 'zoundsapp'."),
@@ -523,7 +522,7 @@ export function createMcpServer(makeClient) {
         title: "Discover Sounds",
         description: "Discover trending sounds/music for a keyword on TikTok or Instagram — the sound is a huge ranking " +
             "signal for TikTok virality. Returns title, artist, duration, play/cover URLs. Consumes 2 orchyn credits. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("discover_sounds") }, "ui/resourceUri": uiResource("discover_sounds") },
         inputSchema: z
             .object({
             keyword: z.string().describe("Niche/keyword, e.g. 'gym'."),
@@ -543,7 +542,7 @@ export function createMcpServer(makeClient) {
     server.registerTool("check_orchyn_credits", {
         title: "Check Orchyn Credits",
         description: "Check your orchyn credit balance, billing URL and pack size. No cost — call anytime to see remaining credits before running other tools.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("check_orchyn_credits") }, "ui/resourceUri": uiResource("check_orchyn_credits") },
         inputSchema: z.object({}).strict(),
     }, async (_args, extra) => {
         const client = await makeClient(extra);
@@ -557,7 +556,7 @@ export function createMcpServer(makeClient) {
     server.registerTool("buy_orchyn_credits", {
         title: "Buy Orchyn Credits",
         description: "Buy an MCP credit pack via Stripe Checkout. Returns a secure checkout URL — open it in your browser to pay. Credits are added automatically after payment. No cost to call.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("buy_orchyn_credits") }, "ui/resourceUri": uiResource("buy_orchyn_credits") },
         inputSchema: z.object({}).strict(),
     }, async (_args, extra) => {
         const client = await makeClient(extra);
@@ -573,7 +572,7 @@ export function createMcpServer(makeClient) {
         description: "Import a social post URL AND understand it with multimodal AI over the actual video/images: " +
             "summary, hook strength, viral triggers, format breakdown and variation ideas. Includes the thumbnail. " +
             "Supports TikTok, Instagram, YouTube, X/Twitter, Douyin, Xiaohongshu and Bilibili. Consumes 6 orchyn credits. First use free per user.",
-        _meta: { ui: { resourceUri: UI_RESOURCE_URI }, "ui/resourceUri": UI_RESOURCE_URI },
+        _meta: { ui: { resourceUri: uiResource("understand_social_post") }, "ui/resourceUri": uiResource("understand_social_post") },
         inputSchema: z
             .object({
             url: z.string().describe("Full public post URL (TikTok/Instagram/YouTube/X/Douyin/Xiaohongshu/Bilibili)."),

package/dist/shared/ui-template.js

@@ -526,10 +526,41 @@ body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--
   }
 
   // ─── Render ───
+  // Hosts deliver the tool result in two shapes:
+  //  - { structuredContent: {...} }  (spec-optional, used when present)
+  //  - { content: [ {type,text,...} ] }  (standard MCP content blocks)
+  // Our results put the HTML card prefix + structured JSON inside the first
+  // text content block, so decode BOTH. If the result is a primitive/string,
+  // surface it as-is.
+  function extractResult(result){
+    if(!result||typeof result!=="object")return result;
+    var sc=result.structuredContent;
+    if(sc&&typeof sc==="object"&&!Array.isArray(sc))return sc;
+    if(Array.isArray(result.content)){
+      var textBlock=null;
+      for(var i=0;i<result.content.length;i++){
+        var c=result.content[i];
+        if(c&&c.type==="text"&&typeof c.text==="string"){textBlock=c.text;break;}
+      }
+      if(typeof textBlock==="string"&&textBlock!==""){
+        // Split "<html>\n\n{json}" — if there's a JSON object after the HTML,
+        // parse it; otherwise show the text itself.
+        var m=/^[\s]*<[^>]+>[\s\S]*?\n\n(\{.*\})[\s]*$/m.exec(textBlock);
+        if(m){try{var parsed=JSON.parse(m[1]);if(parsed&&typeof parsed==="object")return parsed;}catch(e){}}
+        // Single-line HTML (common): keep the whole block as text fallback.
+        if(textBlock.indexOf("<")===0){return { _html: textBlock };}
+        try{var j=JSON.parse(textBlock);if(j&&typeof j==="object")return j;}catch(e2){}
+      }
+    }
+    return result;
+  }
+
   function render(result){
     var app=document.getElementById("app");if(!app)return;
-    var d=result&&result.structuredContent?result.structuredContent:result;
+    var d=extractResult(result);
     if(!d||typeof d!=="object"){app.innerHTML='<div class="json-block fade-in">'+esc(JSON.stringify(d,null,2))+"</div>";return;}
+    // Raw HTML-only result — inject it directly.
+    if(d._html){app.innerHTML=d._html;setTimeout(reportSize,50);return;}
 
     // Analysis
     if(d.analysis&&(d.post||d.url)){app.innerHTML=analysisCard(d);return;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchyn/mcp",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "MCP server for orchyn - fetch, discover and understand TikTok/Instagram/YouTube/X/LinkedIn posts with AI (media metadata, niche discovery, hook & viral analysis)",
   "type": "module",
   "main": "dist/index.js",