@probebrowser/trace-mcp 1.2.0 → 1.3.0

package/dist/server.js

@@ -137,7 +137,28 @@ export class TraceMcpServer {
                         ]
                     };
                 }
-                // 3. Handle Standard SDK Tools
+                // 3. Handle Screenshot Tool — return MCP image content
+                if (toolDef.method === 'take_screenshot') {
+                    result = await this.trace.tool(toolDef.method, (request.params.arguments || {}));
+                    const data = result?.data;
+                    if (data?.base64) {
+                        return {
+                            content: [
+                                {
+                                    type: 'image',
+                                    data: data.base64,
+                                    mimeType: 'image/png',
+                                },
+                                {
+                                    type: 'text',
+                                    text: `Screenshot captured (${data.sizeKB}KB${data.selector ? `, element: ${data.selector}` : data.fullPage ? ', full page' : ', viewport'})`,
+                                },
+                            ],
+                        };
+                    }
+                    return { content: [{ type: 'text', text: JSON.stringify(result, null, 2) }] };
+                }
+                // 4. Handle Standard SDK Tools
                 result = await this.trace.tool(toolDef.method, (request.params.arguments || {}));
                 return {
                     content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
@@ -230,10 +251,18 @@ export class TraceMcpServer {
             }
             // --- Screenshot ---
             if (uri === 'trace://screenshot') {
-                // Try to capture snapshot via capture_execution_state which might have screenshot
-                // Or just return a placeholder if SDK doesn't support raw image output via tool interface easily
-                // For now, returning text explainer
-                return { contents: [{ uri, mimeType: 'text/plain', text: "Screenshot resource requires Trace SDK v1.4+" }] };
+                const result = await this.trace.tool('take_screenshot', {});
+                const data = result?.data;
+                if (data?.base64) {
+                    return {
+                        contents: [{
+                                uri,
+                                mimeType: 'image/png',
+                                blob: data.base64,
+                            }],
+                    };
+                }
+                return { contents: [{ uri, mimeType: 'text/plain', text: 'Screenshot capture failed' }] };
             }
             throw new Error(`Resource not found: ${uri}`);
         });

package/dist/tools.js

@@ -950,4 +950,15 @@ export const TOOLS = {
             prompt: z.string().describe('The debugging question/goal'),
         }),
     },
+    // ============================================
+    // SCREENSHOT (1)
+    // ============================================
+    trace_take_screenshot: {
+        method: 'take_screenshot',
+        description: 'Capture a PNG screenshot of the current page. Returns base64 image data directly viewable by the AI. Use this to see the actual rendered UI, verify layout changes, check visual bugs, or compare before/after states.',
+        schema: z.object({
+            fullPage: z.boolean().optional().describe('Capture full scrollable page (default: viewport only)'),
+            selector: z.string().optional().describe('CSS selector to capture only that element'),
+        }),
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@probebrowser/trace-mcp",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Trace MCP - Bridge between AI Agents and Trace",
   "homepage": "https://trace.probebrowser.com/",
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.0",
-    "@probebrowser/sdk": "^2.1.0",
+    "@probebrowser/sdk": "^2.2.0",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
     "cors": "^2.8.6",

package/src/server.ts

@@ -172,7 +172,29 @@ export class TraceMcpServer {
                     };
                 }
 
-                // 3. Handle Standard SDK Tools
+                // 3. Handle Screenshot Tool — return MCP image content
+                if (toolDef.method === 'take_screenshot') {
+                    result = await this.trace.tool(toolDef.method, (request.params.arguments || {}) as Record<string, unknown>);
+                    const data = result?.data as any;
+                    if (data?.base64) {
+                        return {
+                            content: [
+                                {
+                                    type: 'image' as const,
+                                    data: data.base64,
+                                    mimeType: 'image/png',
+                                },
+                                {
+                                    type: 'text',
+                                    text: `Screenshot captured (${data.sizeKB}KB${data.selector ? `, element: ${data.selector}` : data.fullPage ? ', full page' : ', viewport'})`,
+                                },
+                            ],
+                        };
+                    }
+                    return { content: [{ type: 'text', text: JSON.stringify(result, null, 2) }] };
+                }
+
+                // 4. Handle Standard SDK Tools
                 result = await this.trace.tool(toolDef.method, (request.params.arguments || {}) as Record<string, unknown>);
 
                 return {
@@ -271,10 +293,18 @@ export class TraceMcpServer {
 
             // --- Screenshot ---
             if (uri === 'trace://screenshot') {
-                // Try to capture snapshot via capture_execution_state which might have screenshot
-                // Or just return a placeholder if SDK doesn't support raw image output via tool interface easily
-                // For now, returning text explainer
-                return { contents: [{ uri, mimeType: 'text/plain', text: "Screenshot resource requires Trace SDK v1.4+" }] };
+                const result = await this.trace.tool('take_screenshot', {});
+                const data = result?.data as any;
+                if (data?.base64) {
+                    return {
+                        contents: [{
+                            uri,
+                            mimeType: 'image/png',
+                            blob: data.base64,
+                        }],
+                    };
+                }
+                return { contents: [{ uri, mimeType: 'text/plain', text: 'Screenshot capture failed' }] };
             }
 
             throw new Error(`Resource not found: ${uri}`);

package/src/tools.ts

@@ -966,4 +966,15 @@ export const TOOLS = {
             prompt: z.string().describe('The debugging question/goal'),
         }),
     },
+    // ============================================
+    // SCREENSHOT (1)
+    // ============================================
+    trace_take_screenshot: {
+        method: 'take_screenshot',
+        description: 'Capture a PNG screenshot of the current page. Returns base64 image data directly viewable by the AI. Use this to see the actual rendered UI, verify layout changes, check visual bugs, or compare before/after states.',
+        schema: z.object({
+            fullPage: z.boolean().optional().describe('Capture full scrollable page (default: viewport only)'),
+            selector: z.string().optional().describe('CSS selector to capture only that element'),
+        }),
+    },
 };