io.github.OguntolaIbrahim/image-viewer

InChat Image Viewer MCP

The Problem: GitHub Copilot Chat can't see images from file paths—only drag-and-drop works, breaking your workflow.

The Solution: Give AI the file path in plain text, and it sees the image instantly using this MCP.

Why This Exists

What DOESN'T Work in VS Code Copilot Chat

❌ Plain file paths → AI can't see them

Show me C:\screenshots\bug.png

Result: AI sees text, not the image

❌ #file: references → Unreliable for images

#file:screenshot.png

Result: Empty <attachments> - AI sees nothing

✅ Drag-and-drop → Works, but manual and disruptive Result: AI sees image as base64 attachment, but you have to manually drag every single image

What This MCP Solves

✅ Plain file paths with MCP → AI sees images instantly

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

Result: AI calls view_image tool and displays the image inline—no manual steps

How It Works: Before vs After

WITHOUT InChat Image Viewer MCP

You: "Analyze C:\test-results\failure-screenshot.png"

AI receives:

<attachments></attachments>  

Just sees the text path—no image data.

What you have to do: Stop, drag the file into chat, drop it, then ask again.

WITH InChat Image Viewer MCP

You: "#image-viewer Analyze C:\test-results\failure-screenshot.png"

AI receives:

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

AI sees the full image inline automatically.

What you do: Nothing extra—just type naturally with #image-viewer.

Features

• 📸 Path-to-image: Type the path, AI sees the image
• 🖼️ Multi-format: PNG, JPEG, GIF, BMP, WebP
• ⚡ Zero-config: npx inchat-image-viewer-mcp just works
• 🔌 Works with: VS Code Copilot Chat, Claude Desktop

Quick Start

1. Install (Optional)

npm install -g inchat-image-viewer-mcp
# or use npx (no install needed)

2. Add to Your AI Tool

VS Code Copilot Chat – mcp.json:

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

Claude Desktop – Config file (%APPDATA%\Claude\claude_desktop_config.json on Windows):

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

3. Restart

Reload VS Code or restart Claude Desktop to load the MCP server.

Usage Examples

#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

The AI automatically uses the view_image tool—no manual attachment needed.

Supported Formats

PNG · JPEG · GIF · BMP · WebP

License

MIT

Made with 🤖 by Ibrahim Oguntola