[BUG] Image format mismatch error with Playwright MCP screenshot tool

Preflight Checklist

• [x] I have searched existing issues and this hasn't been reported yet
• [x] This is a single bug report (please file separate reports for different bugs)
• [x] I am using the latest version of Claude Code

What's Wrong?

When using the mcp__playwright__browser_take_screenshot tool through Claude Code, the API consistently returns a 400 error indicating that the image data doesn't match the declared MIME type.

What Should Happen?

Expected Behavior:
The screenshot image should be successfully captured and displayed in the conversation without format mismatch errors.

Error Messages/Logs

API Error: 400 {"type":"error","error":{"type":"invalid_request_error","message":"messages.5.content.7.image.source.base64.data: Image does not match the provided media type image/jpeg"},"request_id":"req_011CVMaFmiYjEXhaXnfkgRSC"}

Steps to Reproduce

1. Have Playwright MCP server configured in Claude Code
2. Ask Claude to take a screenshot of a web page using the Playwright tool
3. The error occurs when Claude tries to send the screenshot image back in the conversation

Claude Model

Sonnet (default)

Is this a regression?

Yes, this worked in a previous version

Last Working Version

_No response_

Claude Code Version

claude --version 2.0.49 (Claude Code)

Platform

Anthropic API

Operating System

macOS

Terminal/Shell

Terminal.app (macOS)

Additional Information

Expected Behavior:
The screenshot image should be successfully captured and displayed in the conversation without format mismatch errors.

Actual Behavior:
The API rejects the message because the base64-encoded image data doesn't match the declared MIME type (image/jpeg). The actual image data appears to be in PNG format while being labeled as JPEG.

Root Cause:
This appears to be a bug in the system layer between the MCP tool result and the API message construction. The issue is in how Claude Code processes the Playwright screenshot tool's output:

1. The Playwright tool returns image data (likely PNG by default)
2. The system layer incorrectly labels it as image/jpeg when constructing the API message
3. The API validates the format and rejects the mismatch

Suggested Fix:
The system layer that processes MCP tool results should either:

1. Correctly detect the actual image format from the tool output and set the matching MIME type
2. Respect the type parameter passed to the screenshot tool and ensure consistency
3. Default to PNG format throughout the pipeline if that's what Playwright returns

Workaround:
Use mcp__playwright__browser_snapshot instead, which returns text-based accessibility information rather than images.