金大哥 - inchat-image-viewer-mcp MCP 详情

article

README

🚀 InChat图像查看器MCP

InChat图像查看器MCP解决了GitHub Copilot Chat无法通过文件路径查看图像的问题，只需以纯文本形式提供文件路径，AI就能立即查看图像，有效提升工作流程的流畅性。

🚀 快速开始

1. 安装（可选）

npm install -g inchat-image-viewer-mcp
# 或者使用npx（无需安装）

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服务器。

✨ 主要特性

📸 路径转图像：输入图像路径，AI即可查看图像。
🖼️ 多格式支持：支持PNG、JPEG、GIF、BMP、WebP等多种图像格式。
⚡ 零配置：使用 npx inchat-image-viewer-mcp 即可直接运行。
🔌 兼容性强：可与VS Code Copilot Chat和Claude Desktop配合使用。

📦 安装指南

可选安装方式

可通过全局安装 npm install -g inchat-image-viewer-mcp 或者使用 npx （无需安装）来使用本工具。

添加到AI工具

分别针对VS Code Copilot Chat和Claude Desktop给出了配置文件示例，将相应配置添加到指定文件中即可。

重启应用

重新加载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 工具，无需手动附加图像。

📚 详细文档

问题背景

在VS Code Copilot Chat中，普通文件路径和 #file: 引用方式无法让AI查看图像，而拖放操作虽然可行但比较麻烦，会打断工作流程。

解决方案

使用 #image-viewer 加上文件路径，AI就能立即查看图像。例如：

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

工作原理对比

未使用InChat图像查看器MCP时

用户输入图像路径，AI只能收到文本，看不到图像数据，需要手动将文件拖入聊天框。

使用InChat图像查看器MCP时

用户输入 #image-viewer 加上文件路径，AI能自动收到图像数据并内联显示，无需额外操作。

📄 许可证

本项目采用MIT许可证。

由 Ibrahim Oguntola 使用 🤖 开发

inchat-image-viewer-mcp