Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@view-image-mcpshow me the image at ./assets/screenshot.png"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
view-image-mcp
Claude Code から画像をターミナル内にインライン表示する MCP サーバー。
Kitty グラフィクスプロトコルを使用して、Ghostty や Kitty などの対応ターミナル上で画像を直接表示します。
対応環境
OS: macOS
ターミナル: Ghostty, Kitty（Kitty グラフィクスプロトコル対応ターミナル）
ランタイム: Node.js v18+
対応フォーマット
フォーマット | 対応方法 |
PNG | そのまま表示 |
JPEG |
|
GIF |
|
WebP |
|
インストール
git clone <repository-url>
cd view-image-mcp
npm installClaude Code への登録
claude mcp add view-image node /path/to/view-image-mcp/index.jsまたは ~/.claude.json に直接追記:
{
"mcpServers": {
"view-image": {
"command": "node",
"args": ["/path/to/view-image-mcp/index.js"]
}
}
}使い方
Claude Code 上で画像ファイルの表示を依頼すると、view_image ツールが呼ばれてターミナルにインライン表示されます。
> この画像を表示して: /path/to/screenshot.pngツール: view_image
パラメータ | 型 | 説明 |
| string | 画像ファイルのパス（絶対パスまたは相対パス） |
仕組み
Claude Code ←(stdio JSON-RPC)→ MCP Server
│
├─ 画像ファイルを読み込み
├─ 必要に応じて PNG に変換 (sips)
├─ Base64 エンコード + チャンク分割
└─ /dev/tty に Kitty グラフィクスプロトコルで書き込み
│
▼
ターミナルにインライン表示MCP サーバーの stdout は Claude Code との JSON-RPC 通信に使われるため、画像データは /dev/tty に直接書き込むことでターミナルに表示しています。
ライセンス
MIT