[Bug] Anthropic API Error: Image media type mismatch with base64 data

Bug Description
API Error: 400 {"type":"error","error":{"type":"invalid_request_error","message":"messages.3.content.10.image.source.base64.data: Image does not match the provided media type image/jpeg"},"request_id":"req_011CVHBL3QHdhdaeVDGdstBx"}

Environment Info

• Platform: win32
• Terminal: vscode
• Version: 2.0.45
• Feedback ID: 231d7c87-6426-4a3c-9a5d-edabcb43731f

Errors

[]

The new chat (after the patch) was tested and there was no problem at first, but it happened again. I wasn't doing anything specific when it occurred.

---

✅ ROOT CAUSE IDENTIFIED - Requires Anthropic Fix

Problem Summary

Claude Code does NOT pass the type parameter when calling Playwright MCP's browser_take_screenshot tool, causing it to default to PNG. However, Claude Code then sends this PNG image to Anthropic API with image/jpeg MIME type header, resulting in the error:

Image does not match the provided media type image/jpeg

Root Cause Analysis

From Playwright MCP documentation:

browser_take_screenshot
  - type (string, optional): Image format for the screenshot. **Default is png.**

The bug: Claude Code fails to specify type: "jpeg" when calling this tool, so Playwright defaults to PNG.

Evidence: Even when explicitly instructing Claude to use JPEG format, the actual tool call still defaults to PNG:

{
  "filename": "payment-modal-issue.png"  // Still PNG!
}

Current Workarounds

❌ What DOESN'T Work:

• Telling Claude "use JPEG format" - Claude still sends PNG
• Creating .claude/instructions.md - Claude ignores it for MCP tool parameters
• Modifying Playwright MCP config - No option to change default screenshot type

⚠️ Only Temporary Workaround:

Use /rewind after the error occurs to go back and continue without screenshot. This is NOT a solution, just damage control.

Proof of Concept

When type: "jpeg" parameter is properly set by Claude Code, it works:

await page.screenshot({
  quality: 90,
  scale: 'css',
  type: 'jpeg'  // ✅ Matches API expectation
});

Required Fix (For Anthropic Team)

Option 1 (Recommended): Modify Claude Code to ALWAYS pass type: "jpeg" when calling mcp__playwright__browser_take_screenshot

Option 2: Fix the MIME type detection - inspect actual image format before setting the header instead of hardcoding image/jpeg

Option 3: Coordinate with Microsoft to make Playwright MCP default to JPEG instead of PNG

Test Results

• ❌ Default behavior (no type specified) → PNG → API Error
• ❌ Verbal instruction "use JPEG" → PNG → API Error
• ❌ Custom instructions file → PNG → API Error
• ✅ Manual code edit (type: "jpeg") → JPEG → Works perfectly

This bug affects ALL Playwright MCP users and requires a code-level fix in Claude Code itself. There is currently NO reliable user-side workaround.

---

🎉 UPDATE: Possibly Fixed in Version 2.0.50

After updating to Claude Code v2.0.50, PNG screenshots appear to work without errors. The fix mentioned in the changelog:

"Fixed bug preventing calling MCP tools that have nested references in their input schemas"

...may have resolved this issue, though we're not 100% certain this was the specific fix. PNG screenshots now successfully send to the API without MIME type mismatch errors.

Test Results (v2.0.50):

• ✅ PNG screenshots → Working (no API error)
• ✅ JPEG screenshots → Working

If you're experiencing this issue, please update to v2.0.50 or later.

Thank you to the Anthropic team for the quick fix! 🙏

---

Additional Environment Info:

• Also confirmed on: Windows 11 & macOS
• Playwright MCP: @playwright/mcp@latest
• Fixed in: v2.0.50 (possibly)

playwright - Take a screenshot (MCP)(filename: "redacted.png")
  ⎿ ### Result
    Took the viewport screenshot and saved it as redacted.png
    … +10 lines (ctrl+o to expand)

  ⎿  [Image]
  ⎿ API Error: 400 {"type":"error","error":{"type":"invalid_request_error","mess
    age":"messages.5.content.10.image.source.base64.data: Image does not match
    the provided media type
    image/jpeg"},"request_id":"req_011CVLiCKaXDaJChtp4huvEq"}