feat(site): render computer tool screenshots as images in chat UI#23074
Merged
feat(site): render computer tool screenshots as images in chat UI#23074
Conversation
Instead of showing raw base64 JSON for Anthropic's computer use tool, render the screenshot as an inline image. The image is clickable to open at full resolution in a new tab. Adds ComputerTool component and registers it in the tool renderer map. Handles both single-object and array-of-blocks result shapes.
Contributor
DanielleMaywood
left a comment
DanielleMaywood
left a comment
There was a problem hiding this comment.
There should be an update to the storybook tests to capture this change
Covers five scenarios: - ComputerScreenshot: completed with base64 image data - ComputerRunning: in-progress with spinner - ComputerTextFallback: completed with text, no image - ComputerError: error state with destructive styling - ComputerArrayResult: result as array of content blocks Each story includes play functions that verify DOM structure, image src attributes, link targets, and error styling.
Remove unused args parameter from ComputerRenderer and apply biome formatting fixes.
Replace the tiny 4x4 test pixel with a real 400x225 desktop screenshot fixture so the storybook stories show what the component actually looks like in practice.
Member
Author
Thanks @DanielleMaywood. Added storybook tests. Do you want to review/approve them or shall I do it? |
Member
|
Hmm, I think the outline on the tool block is unlike our other ones. Tell agent to take inspiration from |
Rewrite ComputerTool to use ToolCollapsible like ReadFile and WriteFile, giving it the same collapsible header with chevron, error tooltip, and content border styling. Screenshots with image data default to expanded; text-only results are collapsed. Remove the custom MonitorIcon header layout in favor of the shared ToolCollapsible structure.
DanielleMaywood
approved these changes
Mar 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Instead of showing raw base64 JSON for Anthropic's computer use tool, render the screenshot as an inline image. The image is clickable to open at full resolution in a new tab.
Changes
<img>tagComputerRendererhandling both single-object and array-of-blocks result shapesMonitorIconfor thecomputertoolcomputertool