code-screenshot

This MCP server enables Claude to generate syntax-highlighted code screenshots directly from code snippets, files, diffs, or batch sets. It supports five professional themes (Dracula, Nord, Monokai, GitHub Light, GitHub Dark) and can auto-detect languages for 20+ languages. You can ask Claude to render a screenshot from a code string, read code from a file with optional start/end lines, visualize git diffs, or process multiple files at once. The server exposes capabilities such as generate_code_screenshot (from a code string with language and theme), screenshot_from_file (from a file path with optional line range and theme), screenshot_git_diff (for diffs with an optional file path and theme), and batch_screenshot (for multiple files with a shared theme). Use concise prompts like: 1) Generate a TypeScript function screenshot with the Nord theme; 2) Screenshot lines 20-45 of src/generator.ts with Monokai; 3) Screenshot my git diff with GitHub Dark theme; 4) Batch screenshot src/index.ts, src/generator.ts, and src/templates.ts with Dracula theme. The API returns PNG images encoded in base64, which Claude can display as images in responses.

Prerequisites:\n- Node.js (recommended: current LTS) and npm installed on your system.\n- Optional: Git for cloning the repository if you prefer building from source.\n\nInstallation steps:\n1) Install the MCP server globally via npm:\nbash\nnpm install -g code-screenshot-mcp\n\n2) Verify installation and run or configure as an MCP server in Claude:\n- Quick setup (Claude Code):\nbash\nclaude mcp add code-screenshot-mcp\n\n- Manual setup (Claude Desktop):\nAdd to Claude configuration at ~/Library/Application Support/Claude/claude_desktop_config.json:\njson\n{\n "mcpServers": {\n "code-screenshot": {\n "command": "code-screenshot-mcp"\n }\n }\n}\n\nRestart Claude Desktop after configuring.\n\nDevelopment Setup (optional):\nbash\ngit clone https://github.com/MoussaabBadla/code-screenshot-mcp.git\ncd code-screenshot-mcp\nnpm install\nnpm run build\n\n

Tips and notes:\n- The server supports five themes: Dracula (default), Nord, Monokai, GitHub Light, and GitHub Dark.\n- It can read code directly from files, with optional start and end lines, and will auto-detect the language for many common file types.\n- Git diff visualization shows changes (staged or unstaged) for a given file.\n- Batch processing allows generating multiple screenshots in a single operation.\n- If you encounter language detection issues, explicitly provide the language parameter when using generate_code_screenshot.\n- When integrating with Claude Desktop, ensure the mcpServers entry uses the exact command name exposed by the global install (code-screenshot-mcp).\n- There are no required environment variables documented in the README; any needed configuration should be supplied via Claude’s MCP setup prompts as shown in the Quick Setup and Manual Setup sections.