feat: update screenshot tool in mcp to use direct cdp calls and downscale image size for claude code

[Kylejeong2]

what

Updating the screenshot tool to use direct CTP call. Cloud code can't handle the larger images, so scaling images down for claude code.

[greptile-apps]

Greptile Summary

• Migrated screenshot implementation from Playwright's page.screenshot() API to direct CDP Page.captureScreenshot calls for improved control.
• Added image downscaling using Sharp library to ensure screenshots meet Claude vision API constraints (max 1568px on any edge and max 1.15 megapixels).

Confidence Score: 4/5

• This PR is safe to merge with low risk.
• The changes are straightforward and well-contained: switching to CDP for screenshots and adding image scaling. The scaling math is correct, Sharp is a mature library, and the CDP API usage follows standard patterns. The only minor consideration is that CDP calls add a slight dependency on Chrome DevTools Protocol stability.
• No files require special attention.

Important Files Changed

Filename	Overview
src/tools/screenshot.ts	Replaced Playwright's page.screenshot() with CDP Page.captureScreenshot and added Sharp-based image downscaling to meet Claude vision API constraints (1568px max edge, 1.15MP max).

Sequence Diagram

sequenceDiagram
    participant User
    participant Tool as "Screenshot Tool"
    participant Page as "Browser Page"
    participant CDP as "Chrome DevTools Protocol"
    participant Sharp as "Sharp Library"
    participant Resource as "MCP Resources"
    
    User->>Tool: "Take screenshot"
    Tool->>Page: "sendCDP('Page.enable')"
    Page->>CDP: "Enable Page domain"
    CDP-->>Page: "Domain enabled"
    Tool->>Page: "sendCDP('Page.captureScreenshot')"
    Page->>CDP: "Capture screenshot (PNG, fromSurface)"
    CDP-->>Page: "Return base64 PNG data"
    Page-->>Tool: "Screenshot data (base64)"
    Tool->>Sharp: "Load image buffer and get metadata"
    Sharp-->>Tool: "Image dimensions"
    Tool->>Tool: "Calculate shrink factor for Claude constraints"
    alt Image needs resizing
        Tool->>Sharp: "Resize image to new dimensions"
        Sharp-->>Tool: "Resized PNG buffer"
        Tool->>Tool: "Convert to base64"
    end
    Tool->>Resource: "registerScreenshot(sessionId, name, base64)"
    Resource-->>Tool: "Screenshot registered"
    Tool-->>User: "Return screenshot with text + image content"

Loading

[greptile-apps]

_{3 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile
React with 👍 or 👎 to share your feedback on this new summary format}