Inchat Image Viewer MCP

🚀 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 使用 🤖 開發