fix: ensure mediaType is present in MCP image transformation

- Add fallback to 'image/png' when MCP mimeType is undefined
- JSON.stringify omits undefined values, which caused mediaType to be
  missing from tool results, breaking image rendering in Anthropic provider
- Add debug logging to trace MCP image content transformation
- Add integration test verifying Chrome DevTools MCP screenshot handling

Author: ammar-agent

src/node/services/mcpServerManager.ts

@@ -64,13 +64,25 @@ function transformMCPResult(result: MCPCallToolResult): unknown {
     return result;
   }
 
+  // Debug: log what we received from MCP
+  log.debug("[MCP] transformMCPResult input", {
+    contentTypes: result.content.map((c) => c.type),
+    imageItems: result.content
+      .filter((c): c is MCPImageContent => c.type === "image")
+      .map((c) => ({ type: c.type, mimeType: c.mimeType, dataLen: c.data?.length })),
+  });
+
   // Transform to AI SDK content format
   const transformedContent: AISDKContentPart[] = result.content.map((item) => {
     if (item.type === "text") {
       return { type: "text" as const, text: item.text };
     }
     if (item.type === "image") {
-      return { type: "media" as const, data: item.data, mediaType: item.mimeType };
+      const imageItem = item;
+      // Ensure mediaType is present - default to image/png if missing
+      const mediaType = imageItem.mimeType || "image/png";
+      log.debug("[MCP] Transforming image content", { mimeType: imageItem.mimeType, mediaType });
+      return { type: "media" as const, data: imageItem.data, mediaType };
     }
     // For resource type, convert to text representation
     if (item.type === "resource") {

tests/ipc/mcpConfig.test.ts

@@ -75,6 +75,144 @@ describeIntegration("MCP project configuration", () => {
 });
 
 describeIntegration("MCP server integration with model", () => {
+  test.concurrent(
+    "MCP image content is correctly transformed to AI SDK format",
+    async () => {
+      console.log("[MCP Image Test] Setting up workspace...");
+      // Setup workspace with Anthropic provider
+      const { env, workspaceId, tempGitRepo, cleanup } = await setupWorkspace(
+        "anthropic",
+        "mcp-chrome"
+      );
+      const client = resolveOrpcClient(env);
+      console.log("[MCP Image Test] Workspace created:", { workspaceId, tempGitRepo });
+
+      try {
+        // Add the Chrome DevTools MCP server to the project
+        // Use --headless and --no-sandbox for CI/root environments
+        console.log("[MCP Image Test] Adding Chrome DevTools MCP server...");
+        const addResult = await client.projects.mcp.add({
+          projectPath: tempGitRepo,
+          name: "chrome",
+          command:
+            "npx -y chrome-devtools-mcp@latest --headless --isolated --chromeArg='--no-sandbox'",
+        });
+        expect(addResult.success).toBe(true);
+        console.log("[MCP Image Test] MCP server added");
+
+        // Create stream collector to capture events
+        console.log("[MCP Image Test] Creating stream collector...");
+        const collector = createStreamCollector(env.orpc, workspaceId);
+        collector.start();
+        await collector.waitForSubscription();
+        console.log("[MCP Image Test] Stream collector ready");
+
+        // Send a message that should trigger screenshot
+        // First navigate to a simple page, then take a screenshot
+        console.log("[MCP Image Test] Sending message...");
+        const result = await sendMessageWithModel(
+          env,
+          workspaceId,
+          "Navigate to https://example.com and take a screenshot. Describe what you see in the screenshot.",
+          HAIKU_MODEL
+        );
+        console.log("[MCP Image Test] Message sent, result:", result.success);
+
+        expect(result.success).toBe(true);
+
+        // Wait for stream to complete (this may take a while with Chrome)
+        console.log("[MCP Image Test] Waiting for stream-end...");
+        await collector.waitForEvent("stream-end", 120000); // 2 minutes for Chrome operations
+        console.log("[MCP Image Test] Stream ended");
+        assertStreamSuccess(collector);
+
+        // Find the screenshot tool call and its result
+        const events = collector.getEvents();
+        const toolCallEnds = events.filter(
+          (e): e is Extract<typeof e, { type: "tool-call-end" }> => e.type === "tool-call-end"
+        );
+        console.log(
+          "[MCP Image Test] Tool call ends:",
+          toolCallEnds.map((e) => ({ toolName: e.toolName, resultType: typeof e.result }))
+        );
+
+        // Find the screenshot tool result
+        const screenshotResult = toolCallEnds.find((e) => e.toolName === "take_screenshot");
+        expect(screenshotResult).toBeDefined();
+
+        // Verify the result has correct AI SDK format with mediaType
+        const result_output = screenshotResult!.result as
+          | { type: string; value: unknown[] }
+          | unknown;
+        // Log media items to verify mediaType presence
+        if (
+          typeof result_output === "object" &&
+          result_output !== null &&
+          "value" in result_output
+        ) {
+          const value = (result_output as { value: unknown[] }).value;
+          const mediaPreview = value
+            .filter(
+              (v): v is object =>
+                typeof v === "object" &&
+                v !== null &&
+                "type" in v &&
+                (v as { type: string }).type === "media"
+            )
+            .map((m) => ({
+              type: (m as { type: string }).type,
+              mediaType: (m as { mediaType?: string }).mediaType,
+              dataLen: ((m as { data?: string }).data || "").length,
+            }));
+          console.log("[MCP Image Test] Media items:", JSON.stringify(mediaPreview));
+        }
+
+        // If it's properly transformed, it should have { type: "content", value: [...] }
+        if (
+          typeof result_output === "object" &&
+          result_output !== null &&
+          "type" in result_output
+        ) {
+          const typedResult = result_output as { type: string; value: unknown[] };
+          expect(typedResult.type).toBe("content");
+          expect(Array.isArray(typedResult.value)).toBe(true);
+
+          // Check for media content with mediaType
+          const mediaItems = typedResult.value.filter(
+            (item): item is { type: "media"; data: string; mediaType: string } =>
+              typeof item === "object" &&
+              item !== null &&
+              "type" in item &&
+              (item as { type: string }).type === "media"
+          );
+
+          expect(mediaItems.length).toBeGreaterThan(0);
+          // Verify mediaType is present and is a valid image type
+          for (const media of mediaItems) {
+            expect(media.mediaType).toBeDefined();
+            expect(media.mediaType).toMatch(/^image\//);
+            expect(media.data).toBeDefined();
+            expect(media.data.length).toBeGreaterThan(100); // Should have actual image data
+          }
+        }
+
+        // Verify model's response mentions seeing something (proves it understood the image)
+        const deltas = collector.getDeltas();
+        const responseText = extractTextFromEvents(deltas).toLowerCase();
+        console.log("[MCP Image Test] Response text preview:", responseText.slice(0, 200));
+        // Model should describe something it sees - domain name, content, or visual elements
+        expect(responseText).toMatch(/example|domain|website|page|text|heading|title/i);
+
+        collector.stop();
+      } finally {
+        console.log("[MCP Image Test] Cleaning up...");
+        await cleanup();
+        console.log("[MCP Image Test] Done");
+      }
+    },
+    180000 // 3 minutes - Chrome operations can be slow
+  );
+
   test.concurrent(
     "MCP tools are available to the model",
     async () => {