npm - @mcpjam/inspector - Versions diffs - 1.0.0 → 1.0.2 - Mend

@mcpjam/inspector 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md +16 -55
package/dist/client/assets/index-D5Niv-PI.css +1 -0
package/dist/client/assets/index-DfX8IFHm.js +1874 -0
package/dist/client/demo_1.png +0 -0
package/dist/client/demo_2.png +0 -0
package/dist/client/demo_3.png +0 -0
package/dist/client/demo_4.png +0 -0
package/dist/client/index.html +2 -2
package/dist/server/index.js +378 -56
package/dist/server/index.js.map +1 -1
package/package.json +1 -1
package/dist/client/assets/index-BQ-ekSd_.js +0 -1874
package/dist/client/assets/index-BZlC0Ubf.css +0 -1

package/dist/client/demo_1.png CHANGED Viewed

Binary file

package/dist/client/demo_2.png CHANGED Viewed

Binary file

package/dist/client/demo_3.png CHANGED Viewed

Binary file

package/dist/client/demo_4.png ADDED Viewed

Binary file

package/dist/client/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/mcp_jam.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCPJam Inspector</title>
-    <script type="module" crossorigin src="/assets/index-BQ-ekSd_.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BZlC0Ubf.css">
+    <script type="module" crossorigin src="/assets/index-DfX8IFHm.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D5Niv-PI.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/server/index.js CHANGED Viewed

@@ -272,6 +272,8 @@ tools.post("/list", async (c) => {
   }
 });
 tools.post("/execute", async (c) => {
+  const mcp2 = c.mcpJamClientManager;
+  let state = null;
   try {
     const { serverId, toolName, parameters } = await c.req.json();
     if (!serverId) return c.json({ error: "serverId is required" }, 400);
@@ -279,19 +281,22 @@ tools.post("/execute", async (c) => {
     if (activeExecution) {
       return c.json({ error: "Another execution is already in progress" }, 409);
     }
-    const mcp2 = c.mcpJamClientManager;
     const status = mcp2.getConnectionStatus(serverId);
     if (status !== "connected") {
       return c.json({ error: `Server '${serverId}' is not connected` }, 400);
     }
     const executionId = `exec_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
-    const state = {
+    const execPromise = Promise.resolve().then(
+      () => mcp2.executeToolDirect(`${serverId}:${toolName}`, parameters || {})
+    ).catch((error) => {
+      if (state) state.error = error;
+      throw error;
+    });
+    state = {
       id: executionId,
       serverId,
       toolName,
-      execPromise: Promise.resolve().then(
-        () => mcp2.executeToolDirect(toolName, parameters || {})
-      ),
+      execPromise,
       completed: false,
       queue: [],
       waiters: []
@@ -342,10 +347,7 @@ tools.post("/execute", async (c) => {
       state.result = race.res;
       activeExecution = null;
       mcp2.clearElicitationCallback();
-      return c.json(
-        { status: "completed", toolName, result: race.res.result },
-        200
-      );
+      return c.json({ status: "completed", toolName, result: race.res }, 200);
     }
     return c.json(
       {
@@ -360,20 +362,27 @@ tools.post("/execute", async (c) => {
       202
     );
   } catch (err) {
+    if (state && activeExecution === state) {
+      state.error = state.error ?? err;
+      state.waiters.length = 0;
+      state.queue.length = 0;
+      activeExecution = null;
+      mcp2.clearElicitationCallback();
+    }
     const msg = err instanceof Error ? err.message : String(err);
     return c.json({ error: msg }, 500);
   }
 });
 tools.post("/respond", async (c) => {
+  const mcp2 = c.mcpJamClientManager;
+  const state = activeExecution;
   try {
     const { requestId, response } = await c.req.json();
     if (!requestId) return c.json({ error: "requestId is required" }, 400);
-    if (!activeExecution) return c.json({ error: "No active execution" }, 404);
-    const mcp2 = c.mcpJamClientManager;
+    if (!state) return c.json({ error: "No active execution" }, 404);
     const ok = mcp2.respondToElicitation(requestId, response);
     if (!ok)
       return c.json({ error: "No pending elicitation for requestId" }, 404);
-    const state = activeExecution;
     try {
       const race = await Promise.race([
         state.execPromise.then((res) => ({ kind: "done", res })),
@@ -390,7 +399,7 @@ tools.post("/respond", async (c) => {
           {
             status: "completed",
             toolName: state.toolName,
-            result: race.res.result
+            result: race.res
           },
           200
         );
@@ -408,10 +417,24 @@ tools.post("/respond", async (c) => {
         202
       );
     } catch (e) {
+      state.error = state.error ?? e;
+      state.waiters.length = 0;
+      state.queue.length = 0;
+      if (activeExecution === state) {
+        activeExecution = null;
+        mcp2.clearElicitationCallback();
+      }
       const msg = e instanceof Error ? e.message : String(e);
       return c.json({ error: msg }, 500);
     }
   } catch (err) {
+    if (state && activeExecution === state) {
+      state.error = state.error ?? err;
+      state.waiters.length = 0;
+      state.queue.length = 0;
+      activeExecution = null;
+      mcp2.clearElicitationCallback();
+    }
     const msg = err instanceof Error ? err.message : String(err);
     return c.json({ error: msg }, 500);
   }
@@ -478,6 +501,269 @@ resources.post("/read", async (c) => {
     );
   }
 });
+resources.get("/widget/:sessionId", async (c) => {
+  const sessionId = c.req.param("sessionId");
+  const widgetData = c.req.query("data");
+  if (!widgetData) {
+    return c.html("<html><body>Error: Missing widget data</body></html>", 400);
+  }
+  return c.html(`
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <title>Loading Widget...</title>
+    </head>
+    <body>
+      <script>
+        (async function() {
+          // Change URL to "/" BEFORE loading widget (for React Router)
+          history.replaceState(null, '', '/');
+          // Fetch the actual widget HTML
+          const response = await fetch('/api/mcp/resources/widget-content?data=${encodeURIComponent(widgetData)}');
+          const html = await response.text();
+          // Replace entire document with widget HTML
+          document.open();
+          document.write(html);
+          document.close();
+        })();
+      </script>
+    </body>
+    </html>
+  `);
+});
+resources.get("/widget-content", async (c) => {
+  try {
+    const widgetData = c.req.query("data");
+    if (!widgetData) {
+      return c.html(
+        "<html><body>Error: Missing widget data</body></html>",
+        400
+      );
+    }
+    const { serverId, uri, toolInput, toolOutput, toolId } = JSON.parse(
+      Buffer.from(widgetData, "base64").toString()
+    );
+    const mcpClientManager = c.mcpJamClientManager;
+    const connectedServers = mcpClientManager.getConnectedServers();
+    let actualServerId = serverId;
+    if (!connectedServers[serverId]) {
+      const serverNames = Object.keys(connectedServers);
+      const match = serverNames.find(
+        (name) => name.toLowerCase() === serverId.toLowerCase()
+      );
+      if (match) {
+        actualServerId = match;
+      } else {
+        return c.html(
+          `<html><body>
+            <h3>Error: Server not connected</h3>
+            <p>Requested server: ${serverId}</p>
+            <p>Available servers: ${serverNames.join(", ")}</p>
+          </body></html>`,
+          404
+        );
+      }
+    }
+    const content = await mcpClientManager.getResource(uri, actualServerId);
+    let htmlContent = "";
+    if (Array.isArray(content)) {
+      htmlContent = content[0]?.text || content[0]?.blob || "";
+    } else if (content && typeof content === "object") {
+      htmlContent = content.text || content.blob || "";
+      if (!htmlContent && Array.isArray(content.contents)) {
+        htmlContent = content.contents[0]?.text || content.contents[0]?.blob || "";
+      }
+    }
+    if (!htmlContent) {
+      return c.html(
+        "<html><body>Error: No HTML content found</body></html>",
+        404
+      );
+    }
+    const widgetStateKey = `openai-widget-state:${toolId}`;
+    const apiScript = `
+      <script>
+        (function() {
+          'use strict';
+          const openaiAPI = {
+            toolInput: ${JSON.stringify(toolInput)},
+            toolOutput: ${JSON.stringify(toolOutput)},
+            displayMode: 'inline',
+            maxHeight: 600,
+            theme: 'dark',
+            locale: 'en-US',
+            safeArea: { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+            userAgent: {},
+            widgetState: null,
+            async setWidgetState(state) {
+              this.widgetState = state;
+              try {
+                localStorage.setItem(${JSON.stringify(widgetStateKey)}, JSON.stringify(state));
+              } catch (err) {
+                console.error('[OpenAI Widget] Failed to save widget state:', err);
+              }
+              window.parent.postMessage({
+                type: 'openai:setWidgetState',
+                toolId: ${JSON.stringify(toolId)},
+                state
+              }, '*');
+            },
+            async callTool(toolName, params = {}) {
+              return new Promise((resolve, reject) => {
+                const requestId = \`tool_\${Date.now()}_\${Math.random()}\`;
+                const handler = (event) => {
+                  if (event.data.type === 'openai:callTool:response' &&
+                      event.data.requestId === requestId) {
+                    window.removeEventListener('message', handler);
+                    if (event.data.error) {
+                      reject(new Error(event.data.error));
+                    } else {
+                      resolve(event.data.result);
+                    }
+                  }
+                };
+                window.addEventListener('message', handler);
+                window.parent.postMessage({
+                  type: 'openai:callTool',
+                  requestId,
+                  toolName,
+                  params
+                }, '*');
+                setTimeout(() => {
+                  window.removeEventListener('message', handler);
+                  reject(new Error('Tool call timeout'));
+                }, 30000);
+              });
+            },
+            async sendFollowupTurn(message) {
+              const payload = typeof message === 'string'
+                ? { prompt: message }
+                : message;
+              window.parent.postMessage({
+                type: 'openai:sendFollowup',
+                message: payload.prompt || payload
+              }, '*');
+            },
+            async requestDisplayMode(options = {}) {
+              const mode = options.mode || 'inline';
+              this.displayMode = mode;
+              window.parent.postMessage({
+                type: 'openai:requestDisplayMode',
+                mode
+              }, '*');
+              return { mode };
+            },
+            async sendFollowUpMessage(args) {
+              const prompt = typeof args === 'string' ? args : (args?.prompt || '');
+              return this.sendFollowupTurn(prompt);
+            }
+          };
+          Object.defineProperty(window, 'openai', {
+            value: openaiAPI,
+            writable: false,
+            configurable: false,
+            enumerable: true
+          });
+          Object.defineProperty(window, 'webplus', {
+            value: openaiAPI,
+            writable: false,
+            configurable: false,
+            enumerable: true
+          });
+          setTimeout(() => {
+            try {
+              const globalsEvent = new CustomEvent('webplus:set_globals', {
+                detail: {
+                  globals: {
+                    displayMode: openaiAPI.displayMode,
+                    maxHeight: openaiAPI.maxHeight,
+                    theme: openaiAPI.theme,
+                    locale: openaiAPI.locale,
+                    safeArea: openaiAPI.safeArea,
+                    userAgent: openaiAPI.userAgent
+                  }
+                }
+              });
+              window.dispatchEvent(globalsEvent);
+            } catch (err) {}
+          }, 0);
+          setTimeout(() => {
+            try {
+              const stored = localStorage.getItem(${JSON.stringify(widgetStateKey)});
+              if (stored && window.openai) {
+                window.openai.widgetState = JSON.parse(stored);
+              }
+            } catch (err) {}
+          }, 0);
+        })();
+      </script>
+    `;
+    let modifiedHtml;
+    if (htmlContent.includes("<html>") && htmlContent.includes("<head>")) {
+      modifiedHtml = htmlContent.replace(
+        "<head>",
+        `<head><base href="/">${apiScript}`
+      );
+    } else {
+      modifiedHtml = `<!DOCTYPE html>
+<html>
+<head>
+  <base href="/">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  ${apiScript}
+</head>
+<body>
+  ${htmlContent}
+</body>
+</html>`;
+    }
+    const trustedCdns = [
+      "https://persistent.oaistatic.com",
+      "https://*.oaistatic.com",
+      "https://unpkg.com",
+      "https://cdn.jsdelivr.net",
+      "https://cdnjs.cloudflare.com",
+      "https://cdn.skypack.dev"
+    ].join(" ");
+    c.header(
+      "Content-Security-Policy",
+      [
+        "default-src 'self'",
+        `script-src 'self' 'unsafe-inline' 'unsafe-eval' ${trustedCdns}`,
+        "worker-src 'self' blob:",
+        "child-src 'self' blob:",
+        `style-src 'self' 'unsafe-inline' ${trustedCdns}`,
+        "img-src 'self' data: https: blob:",
+        "media-src 'self' data: https: blob:",
+        `font-src 'self' data: ${trustedCdns}`,
+        "connect-src 'self' https: wss: ws:",
+        "frame-ancestors 'self'"
+      ].join("; ")
+    );
+    c.header("X-Frame-Options", "SAMEORIGIN");
+    c.header("X-Content-Type-Options", "nosniff");
+    return c.html(modifiedHtml);
+  } catch (error) {
+    return c.html(
+      `<html><body>Error: ${error instanceof Error ? error.message : "Unknown error"}</body></html>`,
+      500
+    );
+  }
+});
 var resources_default = resources;
 // routes/mcp/prompts.ts
@@ -752,11 +1038,16 @@ function convertMastraToolsToVercelTools(mastraTools) {
 }
 // ../shared/http-tool-calls.ts
-function flattenToolsets(toolsets) {
+function flattenToolsetsWithServerId(toolsets) {
   const flattened = {};
-  for (const serverTools of Object.values(toolsets || {})) {
+  for (const [serverId, serverTools] of Object.entries(toolsets || {})) {
     if (serverTools && typeof serverTools === "object") {
-      Object.assign(flattened, serverTools);
+      for (const [toolName, tool2] of Object.entries(serverTools)) {
+        flattened[toolName] = {
+          ...tool2,
+          _serverId: serverId
+        };
+      }
     }
   }
   return flattened;
@@ -794,13 +1085,18 @@ async function executeToolCallsFromMessages(messages, options) {
   let tools2 = {};
   if (options.client) {
     const toolsets = await options.client.getToolsets();
-    tools2 = flattenToolsets(toolsets);
+    tools2 = flattenToolsetsWithServerId(toolsets);
   } else if (options.toolsets) {
-    tools2 = flattenToolsets(options.toolsets);
+    const toolsets = options.toolsets;
+    tools2 = flattenToolsetsWithServerId(toolsets);
   } else {
     tools2 = options.tools;
   }
   const index = buildIndexWithAliases(tools2);
+  const extractServerId = (toolName) => {
+    const tool2 = index[toolName];
+    return tool2?._serverId;
+  };
   const existingToolResultIds = /* @__PURE__ */ new Set();
   for (const msg of messages) {
     if (!msg || msg.role !== "tool" || !Array.isArray(msg.content))
@@ -837,6 +1133,7 @@ async function executeToolCallsFromMessages(messages, options) {
           } else {
             output = { type: "text", value: String(result) };
           }
+          const serverId = extractServerId(toolName);
           const toolResultMessage = {
             role: "tool",
             content: [
@@ -844,7 +1141,11 @@ async function executeToolCallsFromMessages(messages, options) {
                 type: "tool-result",
                 toolCallId: content.toolCallId,
                 toolName,
-                output
+                output,
+                // Preserve full result including _meta for OpenAI Apps SDK
+                result,
+                // Add serverId for OpenAI component resolution
+                serverId
               }
             ]
           };
@@ -927,11 +1228,15 @@ var runBackendConversation = async (options) => {
         if (msg.role === "tool" && Array.isArray(content)) {
           for (const item of content) {
             if (item?.type === "tool-result") {
+              const fullResult = item.result;
               const rawOutput = item.output ?? item.result ?? item.value ?? item.data ?? item.content;
               const resultEvent = {
                 toolName: item.toolName ?? item.name,
-                result: extractToolResultValue(rawOutput),
-                error: item.error
+                // Use full result if available, otherwise extract value from output
+                result: fullResult ?? extractToolResultValue(rawOutput),
+                error: item.error,
+                // Preserve serverId if present
+                serverId: item.serverId
               };
               iterationToolResults.push(resultEvent);
               handlers?.onToolResult?.(resultEvent);
@@ -1042,7 +1347,8 @@ var handleAgentStepFinish = (streamingContext, text, toolCalls, toolResults, emi
                 toolResult: {
                   id: currentToolCallId,
                   toolCallId: currentToolCallId,
-                  result: result.result,
+                  // Preserve full result which may include _meta for OpenAI Apps SDK
+                  result: result.result || result,
                   error: result.error,
                   timestamp: (/* @__PURE__ */ new Date()).toISOString()
                 }
@@ -1219,14 +1525,17 @@ var sendMessagesToBackend = async (messages, streamingContext, mcpClientManager,
         return { role: "user", content: m.content };
     }
   });
-  const flatTools = await mcpClientManager.getFlattenedToolsetsForEnabledServers(
-    selectedServers
-  );
-  const toolDefs = Object.entries(flatTools).map(([name, tool2]) => ({
-    name,
-    description: tool2?.description,
-    inputSchema: zodToJsonSchema3(tool2?.inputSchema)
-  }));
+  const toolsets = await mcpClientManager.getToolsetsWithServerIds(selectedServers);
+  const toolDefs = [];
+  for (const serverTools of Object.values(toolsets)) {
+    for (const [name, tool2] of Object.entries(serverTools)) {
+      toolDefs.push({
+        name,
+        description: tool2?.description,
+        inputSchema: zodToJsonSchema3(tool2?.inputSchema)
+      });
+    }
+  }
   if (!baseUrl) {
     throw new Error("CONVEX_HTTP_URL is not set");
   }
@@ -1253,7 +1562,9 @@ var sendMessagesToBackend = async (messages, streamingContext, mcpClientManager,
         toolCallId: currentToolCallId,
         result: result.result,
         error: result.error,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        serverId: result.serverId
+        // Propagate serverId
       }
     });
   };
@@ -1277,7 +1588,7 @@ var sendMessagesToBackend = async (messages, streamingContext, mcpClientManager,
     },
     executeToolCalls: async (messages2) => {
       await executeToolCallsFromMessages(messages2, {
-        tools: flatTools
+        toolsets
       });
     },
     handlers: {
@@ -1299,7 +1610,7 @@ var sendMessagesToBackend = async (messages, streamingContext, mcpClientManager,
           text,
           toolCalls,
           toolResults.map((result) => ({
-            result: result.result,
+            result: result.result || result,
             error: result.error
           })),
           false
@@ -9421,6 +9732,15 @@ var MCPJamClientManager = class {
   getServerIdForName(serverName) {
     return this.serverIdMapping.get(serverName);
   }
+  // Reverse lookup: get server name from internal server ID
+  getServerNameForId(serverId) {
+    for (const [name, id] of this.serverIdMapping.entries()) {
+      if (id === serverId) {
+        return name;
+      }
+    }
+    return void 0;
+  }
   flattenToolsets(toolsets) {
     const flattenedTools = {};
     Object.values(toolsets).forEach((serverTools) => {
@@ -9428,6 +9748,26 @@ var MCPJamClientManager = class {
     });
     return flattenedTools;
   }
+  async getToolsetsWithServerIds(serverNameFilter) {
+    const toolsetsByServer = {};
+    const allServerIdsFromFilter = serverNameFilter?.map(
+      (serverName) => this.getServerIdForName(serverName)
+    );
+    for (const [serverId, client] of this.mcpClients.entries()) {
+      if (serverNameFilter && !allServerIdsFromFilter?.includes(serverId))
+        continue;
+      if (this.getConnectionStatus(serverId) !== "connected") continue;
+      try {
+        const toolsets = await client.getToolsets();
+        const flattenedTools = this.flattenToolsets(toolsets);
+        const serverName = this.getServerNameForId(serverId) || serverId;
+        toolsetsByServer[serverName] = flattenedTools;
+      } catch (error) {
+        console.warn(`Failed to get tools from server ${serverId}:`, error);
+      }
+    }
+    return toolsetsByServer;
+  }
   async getFlattenedToolsetsForEnabledServers(serverNameFilter) {
     const allFlattenedTools = {};
     const allServerIdsFromFilter = serverNameFilter?.map(
@@ -9663,30 +10003,12 @@ var MCPJamClientManager = class {
     const tool2 = flattenedTools[name];
     if (!tool2)
       throw new Error(`Tool '${name}' not found in server '${serverId}'`);
-    const schema = tool2.inputSchema;
-    const hasContextProperty = schema && typeof schema === "object" && schema.properties && Object.prototype.hasOwnProperty.call(
-      schema.properties,
-      "context"
-    );
-    const requiresContext = hasContextProperty || schema && Array.isArray(schema.required) && schema.required.includes("context");
-    const contextWrapped = { context: parameters || {} };
-    const direct = parameters || {};
-    const attempts = requiresContext ? [contextWrapped, direct] : [direct, contextWrapped];
-    let lastError = void 0;
-    for (const args of attempts) {
-      try {
-        console.log("args", args);
-        const result = await tool2.execute(args);
-        if (result && result.isError) {
-          const errorText = result.content && result.content[0] && result.content[0].text ? result.content[0].text : "Unknown error";
-          throw new Error(errorText);
-        }
-        return { result };
-      } catch (err) {
-        lastError = err;
-      }
+    const result = await tool2.execute({ context: parameters || {} });
+    if (result && result.isError) {
+      const errorText = result.content && result.content[0] && result.content[0].text ? result.content[0].text : "Unknown error";
+      throw new Error(errorText);
     }
-    throw lastError;
+    return { result };
   }
   async getResource(resourceUri, serverId) {
     let uri = resourceUri;