ClaudeMods
☰
ZH-CN
● 0 人在线 · 浏览 0 次
赞助提交作品
GitHub 仓库 · 发布者 arthur-fontaine

image-view

查看粘贴到 Claude Code 中的图像:在提示列上方显示缩略图,而不是只有 [Image #1] 标签。

arthur-fontaine@arthur-fontaine

arthur-fontaine/nixconfig/tree/main/modules/home/programs/claude/mods/image-view

原帖图片1
已翻译

关于这个 mod

一个 Claude Code 插件,会显示你粘贴的图像,让提示列上方出现缩略图,而不只是单独的 [Image #1] 标签。包含 Zed 半区块回退、点击标签时使用 macOS Quick Look,以及仅在本地运行,并要求 kitty 图形协议。

安装

请先查看作者 README 确认 marketplace 和插件名称;命令可能随仓库结构改变。

claude plugin marketplace add arthur-fontaine/nixconfig
claude plugin install image-view
原文 / README

Claude Image View

Local copy of jarrodwatts/claude-image-view at b3c412b, managed by nixconfig. Three changes:

  • Tiles also show in the transcript: under each sent prompt with [Image #n] tags, and under each image Claude reads with Read (a "Read image" row, or a folded "Read N files" line) or sends you with SendUserFile or SendUserMessage (a "› [image] …" row). A JPEG, GIF or WebP is shown from a PNG copy sips makes, since Image only reads PNG files.
  • In Zed's terminal (TERM_PROGRAM=zed), which has no graphics protocol, tiles are drawn as half-block pixel art (hooks/halfblock.ts) instead of the alt text. Every other terminal still gets the kitty-protocol Image.
  • Clicking a tile's #n label opens the image in macOS Quick Look, through bin/quicklook (built from quicklook/main.swift by nixconfig): no Dock icon, and on the display under the pointer. Without it, the mod falls back to qlmanage -p. The picture itself can't take a click: Claude Code's Image and Raster elements don't accept presses.

A Claude Code mod that shows the images you paste, so you see thumbnails above your prompt instead of bare [Image #1] tags.

License Stars

Claude Image View in action

Install

Inside Claude Code, run:

/plugin marketplace add jarrodwatts/claude-image-view
/plugin install image-view
/reload-plugins

That's it. Paste an image into the prompt and its thumbnail appears above the input.

<details> <summary><strong>Prefer the terminal?</strong></summary>
claude plugin marketplace add jarrodwatts/claude-image-view
claude plugin install image-view@claude-image-view

Then run /reload-plugins inside a session, or start a new one.

</details>

What You See

Paste one or more images and a row of thumbnails sits above the prompt, each labelled with the number of its tag:

╭────────────────────────╮ ╭────────────╮
│                        │ │            │
│      (screenshot)      │ │  (photo)   │
│                        │ │            │
│           #1           │ │     #2     │
╰────────────────────────╯ ╰────────────╯
❯ why is the header misaligned here [Image #1] vs [Image #2]
  • Thumbnails appear as soon as you paste. You don't have to type another key first.
  • Thumbnails keep their shape. Wide screenshots stay wide and phone shots stay tall.
  • Always fits on screen. Tiles shrink to fit the space above the prompt, so the row never scrolls or gets cut off.
  • Clears on send. Once the prompt is sent (or the tags are deleted), the row goes away.

How It Works

Claude Code saves every pasted image to a cache folder for the session, as <tmp>/<project>/<session>/images/<n>.png, and puts an [Image #n] tag in the prompt. Claude Image View is a mod:

  1. Every 200ms it reads the prompt box and looks for [Image #n] tags. It checks on a timer because pasting an image doesn't raise an edit event.
  2. For each tag it finds the cached PNG and reads its size from the PNG header.
  3. It draws the thumbnails in the band above the prompt with Claude Code's Image element. The terminal reads the file itself, so the image data never passes through the mod.

Security

Claude Image View is local-only. It makes no network requests and, outside Zed, writes no files. In Zed it runs /usr/bin/sips to scale each pasted image into a mktemp -d folder as a BMP, and reads its pixels back. Clicking a tile's label runs bin/quicklook (or /usr/bin/qlmanage -p) on that image. It reads the prompt box, lists Claude Code's temp folder to find the current session's image cache, and reads the first bytes of each pasted image. If CLAUDE_CODE_TMPDIR isn't set, it runs id -u once to find the default temp folder.

Run claude plugin validate on the repo to see every event it hooks and every call it makes.

Requirements

  • Claude Code v2.1.287 or later (mods support)
  • macOS or Linux
  • A terminal with the kitty graphics protocol, such as Ghostty or kitty

Zed shows each picture as colored half blocks, two pixels per cell, so a thumbnail is a rough preview. Other terminals show [Image #n] in each tile instead of the picture. The Claude Desktop app already previews pasted images, so the mod draws nothing there.

Troubleshooting

Nothing appears when I paste. Run /plugin and check the dim line under the tabs lists image-view as an active mod. If it isn't listed, run /reload-plugins.

The tile says "no preview". The mod couldn't find the cached file. Claude Code may have moved where it stores pasted images. Please open an issue with your Claude Code version.

The tile shows [Image #1] text instead of the picture. Your terminal doesn't support the kitty graphics protocol. See Requirements.

The tile shows [Image #1] text in agent view or a background session, even in Ghostty or kitty. Claude Code turns terminal images off for background sessions. If you attach from a terminal with the kitty graphics protocol, turn them back on in the env block of ~/.claude/settings.json, then start a new session:

"env": { "CLAUDE_CODE_FORCE_TERMINAL_IMAGES": "1" }

Development

git clone https://github.com/jarrodwatts/claude-image-view
cd claude-image-view

# Load it for one session without installing
claude --plugin-dir .

# Check it and run the tests
claude plugin validate .
claude plugin test .

Claude Code writes the API types into .claude-plugin/types/ the first time it loads the mod, and tsc -p . type-checks it from then on.

License

MIT. See LICENSE.

Star History

Star History Chart

其他同名作品

更多类似作品