[Fix] Images returned by MCP tools are not displayed in chat

[zoomote]

Opened on behalf of Toray Altas. View the task or mention @zoomote for follow-up asks.

Related GitHub Issue

Closes: #1017

Description

When an MCP tool returned image content, Zoo Code only showed the [N image(s) received] placeholder text in chat — the actual image data was silently dropped from the UI even though it was persisted on the mcp_server_response message.

Two root causes, both fixed:

1. Chat UI never rendered the images. The backend already attached image data URLs to the mcp_server_response say message (message.images), but ChatRow.tsx had no case "mcp_server_response" — it fell through to the default case, which renders only markdown text. Added an explicit case that renders the response text plus each attached image via the existing ImageBlock component (the same pattern used for assistant text messages with images). The default say case now also renders message.images when present, so no future say type can silently drop attached images.
2. Embedded resource image blobs were discarded before reaching the model. processToolContent in UseMcpToolTool.ts destructured blob away from resource content blocks. Image resources (mimeType starting with image) are now extracted into data URLs, mirroring the existing behavior of access_mcp_resource, so they are both displayed in chat and forwarded to the model as image blocks. Non-image blobs are still serialized as JSON text as before.

MCP type: "image" content blocks were already wired through to the model correctly (subject to the model's declared supportsImages capability); this PR fixes the display gap and the resource-blob gap.

Test Procedure

• New unit tests in src/core/tools/__tests__/useMcpToolTool.spec.ts: an MCP tool result with an embedded image resource blob is extracted into a data URL and passed to say/pushToolResult; a data-URL-formatted blob is not double-prefixed; a non-image (text/plain) resource blob is not extracted.
• New webview component tests in webview-ui/src/components/chat/__tests__/ChatRow.mcp-server-response.spec.tsx: mcp_server_response messages render one image, multiple images, and no image correctly, and say types using the default renderer also display attached images.
• Full pnpm test from the repo root: passed (425 test files, 7010 tests).
• pnpm lint and pnpm check-types (turbo, all 14 packages): passed.
• Reviewers can verify manually by configuring any MCP server whose tool returns image content (e.g. godot-mcp game_screenshot), invoking it in chat with an image-capable model, and confirming the image renders inline in the chat response.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Not captured: this change is inside the VS Code extension webview, which has no browser-reachable surface in the automated environment. Rendering is covered by the new ChatRow component tests, which assert the images returned by MCP tools are displayed in the chat row.

Documentation Updates

• No documentation updates are required.

The existing docs for use_mcp_tool and access_mcp_resource already describe image content being processed and displayed; this fix restores that documented behavior.

Additional Notes

Image blocks are only sent to the model when the active model profile declares image support (supportsImages); that capability gating is pre-existing and unchanged.

Get in Touch

Available via this PR's comments for any reviewer questions.

Linked work items

Closes #1017

[zoomote]

No new code issues found. The new commit is test-only: the data-URL blob test matches the blob.startsWith("data:") branch in UseMcpToolTool.ts:295, and the default-renderer test matches the default case in ChatRow.tsx:1593 (command_output has no dedicated case). Both suites pass locally (21 + 4 tests). See task

_{Reviewed 3ce2f3b}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[taltas]

@zoomote fix the code coverage

[zoomote]

I'm on it. I routed this request into the existing PR task so follow-up work stays on one Roomote thread for this PR, and I'll keep updates here. See task

[zoomote]

Coverage gaps addressed in 3ce2f3b:

• UseMcpToolTool.ts — added a test for image resource blobs already formatted as data URLs (covers the no-double-prefix branch).
• ChatRow.tsx — added a test proving say types that use the default renderer also display attached images.

These target the exact lines Codecov flagged (1 missing + 1 partial in UseMcpToolTool.ts, 2 missing in ChatRow.tsx). Validation: full pnpm test passes (10/10 turbo tasks), plus lint and check-types across all 14 packages. The next Codecov report on this PR should reflect the improved patch coverage.