mcpField
I
image-viewer

image-viewer

本地服务
github.com/OguntolaIbrahim开发工具040 周前更新

关于 image-viewer

image-viewer 是一个 MCP 服务,可让 AI 聊天客户端通过本地图片路径查看图像。它会将支持格式的图像内容直接返回到聊天中,无需手动拖放。

主要功能

  1. 01通过提供文件路径查看图片
  2. 02支持 PNG、JPEG、GIF、BMP 和 WebP
  3. 03将图片内容直接返回聊天

适用场景

  1. 01通过文件路径检查屏幕截图
  2. 02比较文件夹中的前后图片
  3. 03调试时查看错误截图

MCP 相关

向 MCP 客户端提供 `view_image` 工具,将指定图片作为图像内容返回。README 介绍了与 VS Code Copilot Chat 和 Claude Desktop 配合使用。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"oguntolaibrahim-image-viewer": {
"command": "npx",
"args": [
"-y",
"inchat-image-viewer-mcp"
]
}
}
}
启动命令npx -y inchat-image-viewer-mcp

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npminchat-image-viewer-mcp1.0.1

工具

1

收录的工具列表 · 更新于 2 周前

参数类型必填说明
file_pathstring是图片文件的绝对路径或相对路径

详细介绍

InChat Image Viewer MCP

问题: GitHub Copilot Chat 无法查看文件路径中的图像,只能通过拖放添加,这会打断你的工作流。

解决方案: 用纯文本向 AI 提供文件路径,它就能通过此 MCP 立即查看图像。

为什么要开发它

在 VS Code Copilot Chat 中不起作用的方式

❌ 纯文件路径 → AI 无法查看图像

Show me C:\screenshots\bug.png

结果:AI 只能看到文本,看不到图像

❌ #file: 引用 → 无法可靠地处理图像

#file:screenshot.png

结果:<attachments> 为空——AI 什么也看不到

✅ 拖放 → 可以使用,但需要手动操作,且会打断工作流 结果:AI 会将图像作为 base64 附件查看,但你必须手动拖放每一张图像

此 MCP 能解决的问题

✅ 通过 MCP 使用纯文件路径 → AI 可立即查看图像

#image-viewer Show me C:\screenshots\bug.png

结果:AI 会调用 view_image 工具并在行内显示图像——无需手动操作


工作原理:前后对比

不使用 InChat Image Viewer MCP

你:“分析 C:\test-results\failure-screenshot.png”

AI 收到的内容:

<attachments></attachments>  

只能看到文本路径,没有图像数据。

你需要做的事: 停下来,把文件拖进聊天窗口,放下,然后重新提问。


使用 InChat Image Viewer MCP

你:“#image-viewer 分析 C:\test-results\failure-screenshot.png”

AI 收到的内容:

{
  "content": [
    {
      "type": "text",
      "text": "Image: failure-screenshot.png (124,433 bytes)"
    },
    {
      "type": "image",
      "data": "iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAIAAABnsVYU...",
      "mimeType": "image/png"
    }
  ]
}

AI 会自动在行内查看完整图像。

你需要做的事: 无需额外操作,只需使用 #image-viewer 自然输入。


功能

  • 📸 路径转图像:输入路径,AI 即可查看图像
  • 🖼️ 支持多种格式:PNG、JPEG、GIF、BMP、WebP
  • ⚡ 零配置:运行 npx inchat-image-viewer-mcp 即可使用
  • 🔌 适用于:VS Code Copilot Chat、Claude Desktop

快速开始

1. 安装(可选)
npm install -g inchat-image-viewer-mcp
# or use npx (no install needed)
2. 添加到你的 AI 工具

VS Code Copilot Chat – mcp.json:

{
  "servers": {
    "image-viewer": {
      "command": "npx",
      "args": ["inchat-image-viewer-mcp"]
    }
  }
}

Claude Desktop – 配置文件(Windows 上为 %APPDATA%\Claude\claude_desktop_config.json):

{
  "mcpServers": {
    "image-viewer": {
      "command": "npx",
      "args": ["inchat-image-viewer-mcp"]
    }
  }
}
3. 重启

重新加载 VS Code 或重启 Claude Desktop,以加载 MCP 服务。


使用示例

#image-viewer What's in C:\Users\me\screenshot.png?
#image-viewer Compare before.jpg and after.jpg in the results folder
#image-viewer Debug this error screenshot: D:\projects\test-failures\2026-01-20.png

AI 会自动使用 view_image 工具,无需手动添加附件。


支持的格式

PNG · JPEG · GIF · BMP · WebP


许可证

MIT

由 Ibrahim Oguntola 🤖 制作


评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。