feat: add MCP image preview thumbnails and save_image tool #10879

roomote · 2026-01-21T23:04:22Z

Summary

This PR attempts to address Issue #10877. It builds on PR #10874 (MCP tool image support) to add:

Feature 1: Image Thumbnail Preview

Shows thumbnails of images returned from MCP tools in the chat interface
Click to open images in a new VSCode tab (using existing Thumbnails component)
Images are displayed below the MCP tool response section

Feature 2: save_image Tool for Agent

New tool that allows the agent to save base64-encoded images to any location
Agent can programmatically decide where to save images received from MCP tools
Supports PNG, JPG, JPEG, GIF, WEBP, and SVG formats
Parameters: path (required), data (required - base64 data URL)

Changes

Frontend (webview-ui):

McpExecution.tsx: Added images prop and Thumbnails rendering
ChatRow.tsx: Pass message.images to McpExecution component

Backend (src):

packages/types/src/tool.ts: Added save_image to toolNames
src/shared/tools.ts: Added tool params, native args, display name, and tool group
src/core/tools/SaveImageTool.ts: New tool implementation
src/core/prompts/tools/native-tools/save_image.ts: Native tool description
src/core/prompts/tools/native-tools/index.ts: Export save_image
src/core/assistant-message/presentAssistantMessage.ts: Register and execute save_image tool

Testing

TypeScript compilation passes
All existing useMcpToolTool tests pass (16/16)
Lint checks pass

Dependencies

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

Feedback and guidance are welcome!

Important

This PR adds image thumbnail previews in the chat interface and a new save_image tool for handling image saving, with updates to both frontend and backend components.

Features:
- Adds image thumbnail previews in chat interface using Thumbnails component in McpExecution.tsx and ChatRow.tsx.
- Introduces save_image tool for saving base64-encoded images, supporting multiple formats.
Backend:
- Implements SaveImageTool in SaveImageTool.ts for handling image saving logic.
- Updates UseMcpToolTool.ts to save images to temporary storage and provide file paths.
- Adds save_image to toolNames in tool.ts.
Frontend:
- Updates ChatView.tsx and ChatRow.tsx to handle and display image thumbnails.
- Modifies McpExecution.tsx to include image handling logic.
Localization:
- Adds translations for new image-related messages in multiple i18n locale files.
Testing:
- Updates useMcpToolTool.spec.ts to test image handling and tool execution.

^{This description was created by}^{for f3eaa46. You can customize this summary. It will automatically update as commits are pushed.}

- Add image thumbnails to McpExecution component (Feature 1) - Import Thumbnails component - Add images prop to McpExecutionProps interface - Render thumbnails when images are present (click to open in VSCode) - Pass message.images from ChatRow to McpExecution - Add save_image tool for agent to save images (Feature 2) - Create SaveImageTool.ts with base64 data URL support - Add save_image to toolNames in types/tool.ts - Add tool definitions in shared/tools.ts - Create native tool description in prompts/tools/native-tools - Register tool in presentAssistantMessage.ts - Add to edit tool group for file write operations Addresses Issue #10877

roomote · 2026-01-21T23:04:49Z

Rooviewer See task on Roo Cloud

Reviewed commit f3eaa46. All previously flagged issues have been resolved. The intermediate file persistence implementation correctly saves MCP images to temp storage and provides file paths to the LLM instead of raw base64 data.

Missing i18n translation key tools:saveImage.invalidDataFormat in SaveImageTool.ts
Security validation (.rooignore and write protection) uses original path before extension is added, but file is written to path with extension

Previous reviews

953f037: Review #1

7f1cab9: Review #2

1632659: Review #3

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

roomote · 2026-01-21T23:08:20Z

src/core/tools/SaveImageTool.ts

+		// Validate the image data format
+		const base64Match = data.match(/^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,(.+)$/)
+		if (!base64Match) {
+			await task.say("error", t("tools:saveImage.invalidDataFormat"))


The translation key tools:saveImage.invalidDataFormat is used here but doesn't exist in src/i18n/locales/en/tools.json. The i18n function will return the raw key string. You should add a saveImage section to the tools.json translation file with this key, similar to how generateImage translations are defined.

_{Fix it with Roo Code or mention @roomote and request a fix.}

roomote · 2026-01-21T23:08:44Z

src/core/tools/SaveImageTool.ts

+		// Validate access via .rooignore
+		const accessAllowed = task.rooIgnoreController?.validateAccess(relPath)
+		if (!accessAllowed) {
+			await task.say("rooignore_error", relPath)
+			pushToolResult(formatResponse.rooIgnoreError(relPath))
+			return


The .rooignore access check and write protection check (line 48) are performed using relPath before the image extension is potentially added. However, the file is written to finalPath which may have an extension appended (lines 70-74). If a .rooignore pattern targets specific extensions (e.g., *.png), passing a path without an extension would bypass the restriction. Consider moving these security checks after finalPath is computed, or re-validating with finalPath before writing.

_{Fix it with Roo Code or mention @roomote and request a fix.}

Sniper199999 · 2026-01-22T06:47:56Z

@roomote please fix the 2 issues that you have mentioned

roomote · 2026-01-22T06:49:49Z

Fixaroo See task on Roo Cloud

Fixed the reported issues. All local checks passed.

_{View commit | Revert commit}

…eImageTool

Sniper199999 · 2026-01-22T09:10:55Z

@roomote Both the features are not working as expected...

Feature 1:
Expected: Thumbnails below [1 image(s) received] and inspecting images on click
Result: Only the text "[1 image(s) received]" is shown.
Here is the reference screenshot showing the UI:

Feature 2:
Expected: save image(s) using the save_image tool to any location given by the agent
Result: Tool is called but Image(s) are not getting saved. The chat shows "Checkpoint" UI for some time and then the Agent continues to say that it needs base64 image from Figma screenshot.
Here is the reference screenshot of the "Checkpoint" UI:

This is the defination of the Figma get_screenshot tool:
get_screenshot
Supported file types: Figma Design, FigJam
Allows the agent to take a screenshot of your selection. This helps preserve layout fidelity in the generated code. Recommended to keep on (only turn off if you're concerned about token limits).

Here is a Redacted task History of my chat, you might get an insight about the issue for feature 2:
roo_task_jan-22-2026_1-57-09-pm.md

roomote · 2026-01-22T09:12:43Z

Fixaroo See task on Roo Cloud

Fixed both reported issues. All local checks passed.

_{View commit | Revert commit}

- Feature 1: Fix image thumbnails not displaying in MCP tool responses - Add mcpResponseImages prop to ChatRow to pass images from mcp_server_response - Find corresponding mcp_server_response message in ChatView and pass its images - McpExecution now receives images from the response message instead of ask message - Feature 2: Fix save_image tool not receiving image data - Include base64 data URLs in MCP tool result text response - Agent now receives image data in a format usable with save_image tool - Images are wrapped in <image_N> tags for easy parsing - Update tests to match new behavior

Sniper199999 · 2026-01-22T11:17:01Z

@roomote Both features are not working still...

Feature1: In Chat It outputs:
[1 image(s) received - data URLs provided below for use with save_image tool]
<image_1>"Base 64 Image"</image_1>
Image Preview/Thumbnail is still missing.

Feature 2: Still having issues with saving image

[Tool (Error)]
{"status":"error","message":"The tool execution failed","error":"Invalid tool call for 'save_image': missing nativeArgs. This usually means the model streamed invalid or incomplete arguments and the call could not be finalized."}

The base64 data got from figma tool is valid and converts to an image when i converted the base64 data manually.

The data (base64) that is passed to the save_image tool is not same as that of the base64 data obtained from Figma MCP screenshot tool. There is something wrong here. The base64 data passing to save_image is visually repetitive and when I tried to manually convert to image, gives me empty image. Also base64 data changed every time the save_image tool is called.

Also after using the save_image tool, the cost incurred is too high.

I have also attached the task history for the chat, please refer to this to get more insights on Feature 2:
roo_task_jan-22-2026_3-49-24-pm.md

Proposed Solution: "Intermediate File Persistence" (Architecture Change)

To resolve the corruption and cost issues, we should move away from passing raw Base64 strings through the LLM context.

Auto-Staging Workflow

Step A: When an MCP tool (like Figma) returns image data, the system should immediately intercept the Base64 and write it to a local .tmp or .media folder within the workspace.

Step B: The LLM should receive a File Path Reference (e.g., tmp/figma_screenshot_v1.png) instead of the raw Base64 string.
Reference-Based Saving

The save_image tool should be updated (or a new tool created) to accept a source_path and destination_path.

Benefit: This eliminates the need for the LLM to process thousands of lines of Base64 text, reducing costs to near-zero and preventing data mutation.

roomote · 2026-01-22T11:19:08Z

Fixaroo See task on Roo Cloud

Implemented the "Intermediate File Persistence" architecture as suggested. MCP tool images are now saved to temp storage immediately upon receipt, and file paths are passed to the LLM instead of raw base64 data. This prevents data corruption and significantly reduces token costs.

_{View commit | Revert commit}

- Save MCP tool images to temp storage instead of passing raw base64 to LLM - Add source_path parameter to save_image tool for copying from temp storage - This prevents data corruption and reduces token costs significantly - Images are still stored as data URLs in message.images for UI thumbnails - Update tests to match new behavior with file paths instead of base64 in text

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Jan 21, 2026

github-project-automation bot moved this to Triage in Roo Code Roadmap Jan 21, 2026

github-project-automation bot moved this to New in Roo Code Roadmap Jan 21, 2026

roomote bot mentioned this pull request Jan 21, 2026

[ENHANCEMENT] Image Handling and Representation in Chat Interface #10877

Open

2 tasks

roomote bot commented Jan 21, 2026

View reviewed changes

fix: add i18n translation key and fix security validation path in Sav…

7f1cab9

…eImageTool

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add MCP image preview thumbnails and save_image tool #10879

feat: add MCP image preview thumbnails and save_image tool #10879

Uh oh!

roomote bot commented Jan 21, 2026 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot commented Jan 21, 2026 •

edited

Loading

Uh oh!

roomote bot Jan 21, 2026

Uh oh!

roomote bot Jan 21, 2026

Uh oh!

Sniper199999 commented Jan 22, 2026

Uh oh!

roomote bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

Sniper199999 commented Jan 22, 2026

Uh oh!

roomote bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

Sniper199999 commented Jan 22, 2026

Uh oh!

roomote bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: add MCP image preview thumbnails and save_image tool #10879

Are you sure you want to change the base?

feat: add MCP image preview thumbnails and save_image tool #10879

Uh oh!

Conversation

roomote bot commented Jan 21, 2026 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Feature 1: Image Thumbnail Preview

Feature 2: save_image Tool for Agent

Changes

Testing

Dependencies

Uh oh!

roomote bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

roomote bot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

roomote bot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Sniper199999 commented Jan 22, 2026

Uh oh!

roomote bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sniper199999 commented Jan 22, 2026

Uh oh!

roomote bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sniper199999 commented Jan 22, 2026

Uh oh!

roomote bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

roomote bot commented Jan 21, 2026 •

edited by ellipsis-dev bot

Loading

roomote bot commented Jan 21, 2026 •

edited

Loading

roomote bot commented Jan 22, 2026 •

edited

Loading

roomote bot commented Jan 22, 2026 •

edited

Loading

roomote bot commented Jan 22, 2026 •

edited

Loading