[ENHANCEMENT] Image Handling and Representation in Chat Interface

[Sniper199999]

Problem (one or two sentences)

This feature request is with respect to a draft PR: #10874
The PR is working perfectly and fetching images from tools correctly and displaying a text: "[1 image(s) received]"
Issues/Gaps:

1. There is no way to preview the Images.
2. There is no way for the chat agent to download/save these images.

Context (who is affected and when)

This happens when using MCP tools for retrieving images.

Desired behavior (conceptual, not technical)

Once the tool fetches image(s),

1. It should show a thumbnail preview of those image(s) and on click should open in a new vscode tab.
2. Chat agent should be able to download/save these image(s) automatically if needed/specified inside the project folder.

Constraints / preferences (optional)

not sure

Request checklist

• I've searched existing Issues and Discussions for duplicates
• This describes a specific problem with clear context and impact

Roo Code Task Links (optional)

No response

Acceptance criteria (optional)

No response

Proposed approach (optional)

No response

Trade-offs / risks (optional)

No response

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Feature 1: Image Thumbnail Preview

This is relatively straightforward to implement:

1. Modify McpExecution.tsx to accept an optional images?: string[] prop
2. Import the existing Thumbnails component and render images when present (below the response section)
3. Update ChatRow.tsx (line ~1621) to pass message.images to the McpExecution component

The existing infrastructure already handles:

• Click-to-open functionality in Thumbnails component (sends openImage message)
• Opening images in VSCode tabs via image-handler.ts (openImage() function)

Feature 2: Agent Download/Save Images

This feature needs some clarification before implementation:

1. Automatic vs. Manual: Should images be automatically saved when received, or should there be a UI button for users to trigger the save?

2. Save Location: Should there be a configurable default save location? Options:

   • Always prompt with a save dialog (current saveImage() behavior)
   • Default to workspace root with a specific folder (e.g., ./roo-images/)
   • Use a configurable setting

3. Agent Control: Should the AI agent itself be able to programmatically save images? This would require:

   • A new tool (e.g., save_mcp_image) for the agent to use
   • Or extending the existing MCP tool handling to include a save parameter

Questions:

• For Feature 2, which approach do you prefer: user-triggered save via UI button, or agent-triggered automatic save?
• If automatic, where should images be saved by default?

---

For Feature 1, I'm ready to implement immediately. For Feature 2, I'd appreciate clarification on the desired behavior.

Please mention @roomote in a comment saying that you approve this plan (or provide answers to the questions), and I'll proceed with the implementation.

[Sniper199999]

@roomote please take into account that these feature requests are with respect to a draft PR: #10874
so make changes from that PR...

For Feature 2:
No, I don't want an UI button for saving image. Agent should be able to save the images to any custom location decided by the agent.

[Sniper199999]

@roomote please take into account that these feature requests are with respect to a draft PR: #10874
so make changes from that PR...

For Feature 2:
No, I don't want an UI button for saving image. Agent should be able to save the images to any custom location decided by the agent.

[roomote]

Thanks for the clarification! I understand now:

1. Changes should be based on PR fix: add image content support to MCP tool responses #10874 (branch fix/mcp-tool-image-support-10872)
2. Feature 1: Image thumbnail preview with click-to-open in VSCode tab
3. Feature 2: Agent should be able to save images programmatically to any custom location (no UI button)

I'll explore the codebase and implement both features. I'll create a new tool that allows the agent to save images to a specified path. Will open a PR with my attempt shortly.

[roomote]

Opened PR #10879 with my attempt at addressing this issue.

Summary of changes:

Feature 1 - Image Thumbnail Preview:

• Added images prop to McpExecution component
• Renders clickable thumbnails below the MCP tool response
• Click opens images in VSCode tab (using existing infrastructure)

Feature 2 - Agent Can Save Images:

• Created new save_image tool that accepts path and data (base64 data URL)
• Agent can programmatically decide where to save images received from MCP tools
• No UI button required - the agent controls when and where to save

The PR is based on PR #10874 and should be reviewed/merged after that one.

Feedback welcome!