io.github.OguntolaIbrahim/image-viewer
编码与调试by oguntolaibrahim
InChat Image Viewer MCP,可在 AI 聊天中仅通过提供文件路径即可内联查看图片。
什么是 io.github.OguntolaIbrahim/image-viewer?
InChat Image Viewer MCP,可在 AI 聊天中仅通过提供文件路径即可内联查看图片。
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:
<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:
{
"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-mcpjust 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
常见问题
io.github.OguntolaIbrahim/image-viewer 是什么?
InChat Image Viewer MCP,可在 AI 聊天中仅通过提供文件路径即可内联查看图片。
相关 Skills
网页构建器
by anthropics
面向复杂 claude.ai HTML artifact 开发,快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML,适合需要状态管理、路由或多组件交互的页面。
✎ 在 claude.ai 里做复杂网页 Artifact 很省心,多组件、状态和路由都能顺手搭起来,React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。
前端设计
by anthropics
面向组件、页面、海报和 Web 应用开发,按鲜明视觉方向生成可直接落地的前端代码与高质感 UI,适合做 landing page、Dashboard 或美化现有界面,避开千篇一律的 AI 审美。
✎ 想把页面做得既能上线又有设计感,就用前端设计:组件到整站都能产出,难得的是能避开千篇一律的 AI 味。
网页应用测试
by anthropics
用 Playwright 为本地 Web 应用编写自动化测试,支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志,适合调试动态页面和回归验证。
✎ 借助 Playwright 一站式验证本地 Web 应用前端功能,调 UI 时还能同步查看日志和截图,定位问题更快。
相关 MCP Server
GitHub
编辑精选by GitHub
GitHub 是 MCP 官方参考服务器,让 Claude 直接读写你的代码仓库和 Issues。
✎ 这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题,适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现,生产环境得自己加固安全。
Context7 文档查询
编辑精选by Context7
Context7 是实时拉取最新文档和代码示例的智能助手,让你告别过时资料。
✎ 它能解决开发者查找文档时信息滞后的问题,特别适合快速上手新库或跟进更新。不过,依赖外部源可能导致偶尔的数据延迟,建议结合官方文档使用。
by tldraw
tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。
✎ 这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过,目前它只是个基础连接器,你得自己搭建画布应用才能发挥全部潜力。