Investigate Inline Image Rendering from MCP Tool in Claude Desktop/Cursor

[ramakay]

Goal:

To have images returned by the getProductById MCP tool render inline within the main text response of clients like Claude Desktop and Cursor.

Problem:
Despite implementing various standard MCP methods and workarounds, images returned by the tool are not rendering inline within the main chat flow in either Claude Desktop or Cursor.

Approaches Tried & Results:

1. ImageContentBlock with URL Source:
   • Server returned { type: "image", source: { type: "url", ... } }.
   • Result: Client displayed a placeholder ("Show Image") instead of rendering the image.
2. TextContentBlock with Markdown URL:
   • Server returned { type: "text", text: "![Alt](URL)" }.
   • Result: Client displayed the raw Markdown text, not the rendered image.
3. TextContentBlock with HTML URL:
   • Server returned { type: "text", text: "<img src='URL' ...>" }.
   • Result: Client displayed the raw HTML tag as text, not the rendered image.
4. ImageContentBlock with Base64 Data:
   • Server fetched image, base64 encoded it, returned { type: "image", data: "...", mimeType: "..." }.
   • Result: Client rendered the image correctly, but displayed it in a separate "Tool result" UI block, not inline with the accompanying text block.
5. TextContentBlock with Markdown Data URI:
   • Server fetched image, base64 encoded it, returned { type: "text", text: "![Alt](data:mime/type;base64,...)" }.
   • Result: Client displayed the raw Markdown text, not the rendered image.
6. TextContentBlock with HTML Data URI:
   • Server fetched image, base64 encoded it, returned { type: "text", text: "<img src='data:mime/type;base64,...' ...>" }.
   • Result: Client displayed the raw HTML tag/base64 string as text, not the rendered image.

Current Server State:
The code currently implements approach #4 (Base64 ImageContentBlock), which successfully transmits and allows rendering of the image, albeit separately in the client UI.

Conclusion:
The MCP server correctly fetches and formats image data according to various MCP standards and common web formats (Markdown, HTML). The inability to render images inline within the main text response appears to be a limitation or specific UI design choice within the tested clients (Claude Desktop, Cursor) when handling content blocks returned by MCP tools. Standard ImageContentBlocks are rendered, but separately. Embedded Markdown/HTML images within TextContentBlocks are not rendered as images.

Next Steps:

• Document this limitation.
• Investigate if future client updates change this rendering behavior.
• Consider if separate rendering via ImageContentBlock is acceptable for the use case.