Claude (Bedrock) + MCP Image Tool: image not rendering in UI

[ABHIJITH-EA]

What happened?

When using Claude 3.7 (deployed on AWS Bedrock) as the base model for an agent with the Puppeteer MCP server, image screeenshot via the MCP tool works (i.e., base64 image data is returned), but the image is not displayed in the LibreChat UI.

When I change the agent's base model to Gemini (e.g., Gemini 2.5), the same MCP generated image is properly displayed in the UI.

Version Information

ghcr.io/danny-avila/librechat-rag-api-dev latest a37567f777ad 4 weeks ago 7.78GB

Steps to Reproduce

1. Create an agent in LibreChat using Claude 3.7 (AWS Bedrock) as the base model.
2. Ensure MCP Puppeteer tool is connected and configured properly.
3. Ask the agent something like:

"Take a screenshot of https://www.google.com and show it here."

4. Check the chat output – you will notice that:

• The MCP returns base64-encoded image data.
• But the image does not render in the chat UI.

5. Change the same agent’s base model to Gemini (via Google).
6. Repeat the same prompt.
7. The image displays correctly in the chat UI.

What browsers are you seeing the problem on?

No response

Relevant log output

No errors

Screenshots

Code of Conduct

• I agree to follow this project's Code of Conduct

[danny-avila]

Part of the issue here is that Bedrock doesn't accept images from tool outputs, otherwise we would run into this issue:
#6255

Relevant:
#6255 (comment)

I can work on still displaying it soon, but it might be misleading since the LLM will not actually "see" the image output:

[k255]

I think the issue is in the code actually. Since Bedrock is not defined as recognized provider, all the MCP content is stringified. Please take a look at that fix #8047 - with that the image renders just fine.

[ABHIJITH-EA]

@danny-avila Thank you for the detailed explanation, that really helped clarify the issue. I appreciate the great work you're doing on this project. Keep it up!

[sumansuhag]

Hey ABHIJITH-EA,

Thanks for reporting this bug! It’s a pretty unique issue, and it looks like there’s a problem with how things are rendering based on the model being used. The MCP tool gives back base64 image data just fine, but it doesn't show up on the UI with Claude 3.7 (Bedrock), while it works perfectly with Gemini 1.5.

This makes me think the issue might come down to:

1. How Claude 3.7 formats its output, or
2. How LibreChat is handling the responses from Claude specifically.

To help figure this out, could you try a couple of things?

1. Check the Raw Agent Output: If you can, get the exact raw text response from Claude 3.7 before LibreChat tries to show it. Do the same for Gemini 1.5. Compare them closely. Are there any tiny differences in:

   • The JSON or markdown layout?
   • The way characters in the base64 string are handled?
   • Whether the MIME type prefix is included or not (like data:image/png;base64,...)?

2. Look at the Browser Developer Console: When the problem happens with Claude, open your browser’s developer console (F12, usually found under Console and Network tabs). Check for any issues related to image loading or parsing, or if there are any Content Security Policy (CSP) errors.

It’s not unusual for different models to process structured data or tool outputs slightly differently, and the UI might react better to one format over another.