browserbase_screenshot

Instructions

Implementation Reference

• src/tools/screenshot.ts:26-134 (handler)

  The core handler function `handleScreenshot` for the `browserbase_screenshot` tool. Captures a full-page screenshot of the active page using Chrome DevTools Protocol's Page.captureScreenshot, resizes the PNG image using Sharp if it exceeds Claude's vision API limits (1568px edge, 1.15MP), generates a timestamped name, registers the base64 image as an MCP resource via `registerScreenshot`, notifies the server of resource changes, and returns a ToolResult with text and image content.

  async function handleScreenshot(
    context: Context,
    params: ScreenshotInput,
  ): Promise<ToolResult> {
    const action = async (): Promise<ToolActionResult> => {
      try {
        const stagehand = await context.getStagehand();
        const page = stagehand.context.pages()[0];
  
        if (!page) {
          throw new Error("No active page available");
        }
  
        // We're taking a full page screenshot to give context of the entire page, similar to a snapshot
        // Enable Page domain if needed
        await page.sendCDP("Page.enable");
  
        // Use CDP to capture screenshot
        const { data } = await page.sendCDP<{ data: string }>(
          "Page.captureScreenshot",
          {
            format: "png",
            fromSurface: true,
          },
        );
  
        // data is already base64 string from CDP
        let screenshotBase64 = data;
  
        // Scale down image if needed for Claude's vision API
        // Claude constraints: max 1568px on any edge AND max 1.15 megapixels
        // Reference: https://docs.anthropic.com/en/docs/build-with-claude/vision#evaluate-image-size
        const imageBuffer = Buffer.from(data, "base64");
        const metadata = await sharp(imageBuffer).metadata();
  
        if (metadata.width && metadata.height) {
          const pixels = metadata.width * metadata.height;
  
          // Min of: width constraint, height constraint, and megapixel constraint
          const shrink = Math.min(
            1568 / metadata.width,
            1568 / metadata.height,
            Math.sqrt((1.15 * 1024 * 1024) / pixels),
          );
  
          // Only resize if we need to shrink (shrink < 1)
          if (shrink < 1) {
            const newWidth = Math.floor(metadata.width * shrink);
            const newHeight = Math.floor(metadata.height * shrink);
  
            process.stderr.write(
              `[Screenshot] Scaling image from ${metadata.width}x${metadata.height} (${(pixels / (1024 * 1024)).toFixed(2)}MP) to ${newWidth}x${newHeight} (${((newWidth * newHeight) / (1024 * 1024)).toFixed(2)}MP) for Claude vision API\n`,
            );
  
            const resizedBuffer = await sharp(imageBuffer)
              .resize(newWidth, newHeight, {
                fit: "inside",
                withoutEnlargement: true,
              })
              .png()
              .toBuffer();
  
            screenshotBase64 = resizedBuffer.toString("base64");
          }
        }
        const name = params.name
          ? `screenshot-${params.name}-${new Date()
              .toISOString()
              .replace(/:/g, "-")}`
          : `screenshot-${new Date().toISOString().replace(/:/g, "-")}` +
            context.config.browserbaseProjectId;
  
        // Associate with current mcp session id and store in memory /src/mcp/resources.ts
        const sessionId = context.currentSessionId;
        registerScreenshot(sessionId, name, screenshotBase64);
  
        // Notify the client that the resources changed
        const serverInstance = context.getServer();
  
        if (serverInstance) {
          serverInstance.notification({
            method: "notifications/resources/list_changed",
          });
        }
  
        return {
          content: [
            {
              type: "text",
              text: `Screenshot taken with name: ${name}`,
            },
            {
              type: "image",
              data: screenshotBase64,
              mimeType: "image/png",
            },
          ],
        };
      } catch (error) {
        const errorMsg = error instanceof Error ? error.message : String(error);
        throw new Error(`Failed to take screenshot: ${errorMsg}`);
      }
    };
  
    return {
      action,
      waitForNetwork: false,
    };
  }

• src/tools/screenshot.ts:14-24 (schema)

  Defines the input schema `ScreenshotInputSchema` (optional `name` string) using Zod and the `screenshotSchema` ToolSchema object with name `"browserbase_screenshot"`, description, and inputSchema.

  const ScreenshotInputSchema = z.object({
    name: z.string().optional().describe("The name of the screenshot"),
  });
  
  type ScreenshotInput = z.infer<typeof ScreenshotInputSchema>;
  
  const screenshotSchema: ToolSchema<typeof ScreenshotInputSchema> = {
    name: "browserbase_screenshot",
    description: `Capture a full-page screenshot and return it (and save as a resource).`,
    inputSchema: ScreenshotInputSchema,
  };

• src/tools/screenshot.ts:136-142 (registration)

  Creates and exports the `screenshotTool` Tool object, combining the `screenshotSchema` and `handleScreenshot` function for use in the tools index.

  const screenshotTool: Tool<typeof ScreenshotInputSchema> = {
    capability: "core",
    schema: screenshotSchema,
    handle: handleScreenshot,
  };
  
  export default screenshotTool;

• src/tools/index.ts:21-30 (registration)

  Includes `screenshotTool` in the `TOOLS` array (imported at line 5), which is consumed by the MCP server to register all tools.

  export const TOOLS = [
    ...sessionTools,
    navigateTool,
    actTool,
    extractTool,
    observeTool,
    screenshotTool,
    getUrlTool,
    agentTool,
  ];

• src/index.ts:168-198 (registration)

  Registers all tools from `TOOLS` (including `browserbase_screenshot`) with the MCP server using `server.tool()`, providing a wrapper handler that invokes `context.run(tool, params)`.

  const tools: MCPToolsArray = [...TOOLS];
  
  // Register each tool with the Smithery server
  tools.forEach((tool) => {
    if (tool.schema.inputSchema instanceof z.ZodObject) {
      server.tool(
        tool.schema.name,
        tool.schema.description,
        tool.schema.inputSchema.shape,
        async (params: z.infer<typeof tool.schema.inputSchema>) => {
          try {
            const result = await context.run(tool, params);
            return result;
          } catch (error) {
            const errorMessage =
              error instanceof Error ? error.message : String(error);
            process.stderr.write(
              `[Smithery Error] ${new Date().toISOString()} Error running tool ${tool.schema.name}: ${errorMessage}\n`,
            );
            throw new Error(
              `Failed to run tool '${tool.schema.name}': ${errorMessage}`,
            );
          }
        },
      );
    } else {
      console.warn(
        `Tool "${tool.schema.name}" has an input schema that is not a ZodObject. Schema type: ${tool.schema.inputSchema.constructor.name}`,
      );
    }
  });