io.github.OguntolaIbrahim/image-viewer
InChat Image Viewer MCP - View images inline in AI chat by just providing the file path
Open source Open in the app JSON README (API)
About
InChat Image Viewer MCP - View images inline in AI chat by just providing the file path
Details
- Kind
- MCP servers
- Topic
- No topic detected
- Publisher
- oguntolaibrahim
- Origin
- official
- Category
- ferramentas
- Transport
- local
- Version
- 1.0.1
- Last push
- 2026-01-20T17:29:48Z
- Repository state
- ativo
- Language
- JavaScript
- Added
- 2026-08-29 03:02:08
- Updated
- 2026-08-29 03:02:08
- Origin id
io.github.OguntolaIbrahim/image-viewer
README
# 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)**
---