# 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:**
```xml
<attachments></attachments>  <!-- Empty! -->
```
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:**
```json
{
  "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)
```bash
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:
```json
{
  "servers": {
    "image-viewer": {
      "command": "npx",
      "args": ["inchat-image-viewer-mcp"]
    }
  }
}
```

**Claude Desktop** – Config file (`%APPDATA%\Claude\claude_desktop_config.json` on Windows):
```json
{
  "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](https://github.com/OguntolaIbrahim)**

---