image-viewer

InChat Image Viewer MCP

問題： GitHub Copilot Chat はファイルパスから画像を認識できず、ドラッグ＆ドロップでしか表示できないため、ワークフローが中断されます。

解決策： MCP を使えば、AI にファイルパスをテキストで渡すだけで、画像をすぐに認識できます。

このツールが作られた理由

VS Code Copilot Chat で機能しない方法

❌ 通常のファイルパス → AI は認識できません

Show me C:\screenshots\bug.png

結果：AI に表示されるのはテキストで、画像ではありません

❌ #file: 参照 → 画像では動作が不安定です

#file:screenshot.png

結果：<attachments> が空になり、AI には何も表示されません

✅ ドラッグ＆ドロップ → 動作しますが、手動での操作が必要になり、作業が中断されます 結果：AI は画像を base64 添付ファイルとして認識しますが、画像を1枚ずつ手動でドラッグする必要があります

この 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. 再起動する

MCP サーバーを読み込むため、VS Code を再読み込みするか、Claude Desktop を再起動します。

---

使用例

#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 が作成しました

---