Skip to content

fix(components): render blob images inline in tool call resource blocks #506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
clanzhang wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(components): render blob images inline in tool call resource blocks #506

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d9e3ad
fix(components): render blob images inline in tool call resource blocks
clanzhang Sep 8, 2026
f3c3e88
fix(components): render blob images inline instead of showing base64
clanzhang Sep 8, 2026
6afd30d
fix(components): normalize mimeType case before image/ prefix check
clanzhang Sep 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/components/src/components/ai-gui/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6128,6 +6128,24 @@ const StandardToolContentBlock = ({
/>
);
}
// Render image blobs inline; fall through to download link for everything else.
if (
'blob' in content.resource &&
typeof content.resource.mimeType === 'string' &&
content.resource.mimeType.toLowerCase().startsWith('image/')
) {
const src = buildSafeBase64DataUrl(content.resource.mimeType, content.resource.blob);
if (src) {
<div className="space-y-2">

@chatgpt-codex-connector chatgpt-codex-connector Bot Sep 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Return the inline resource image

When a resource contains a valid image/* blob, this JSX element is merely evaluated and discarded because the branch does not return it. Execution therefore always continues to the URI fallback; typical file: resource URIs are rejected and render nothing, while HTTP(S) URIs still render a download link, so the newly added image path never displays the image.

Useful? React with 👍 / 👎.

<div className="text-xs font-medium text-muted-foreground">Resource</div>
<img
src={src}
alt={content.resource.uri || 'Resource image'}
className="max-h-80 w-full rounded-lg object-contain"
/>
</div>
}
}
const href = sanitizeToolContentHref(content.resource.uri);
if (!href) return null;
return (
Expand Down
Loading