Code Screenshot

You can generate beautiful, syntax-highlighted code screenshots directly from code or files using the Code Screenshot MCP Server. It integrates with Claude to produce polished visuals for multiple languages and enables batch processing, line-range previews, and git diff views for clear code comparisons.

How to use

Use the Code Screenshot MCP Server from your MCP client to create PNG images of code with professional themes. You can generate a screenshot from a code snippet, read code directly from a file, visualize specific line ranges, capture git diffs, or process multiple files in a batch.

How to install

Prerequisites you need before installing are Node.js and npm. Ensure you have permission to install global npm packages on your system.

npm install -g code-screenshot-mcp

Add the MCP server to Claude Code for quick access. Run the following in Claude Code’s command palette or appropriate setup area.

claude mcp add code-screenshot-mcp

For Claude Desktop, configure the MCP server by adding a simple JSON entry to your Claude desktop configuration. This enables Claude Desktop to start the MCP server when needed.

{
  "mcpServers": {
    "code-screenshot": {
      "command": "code-screenshot-mcp"
    }
  }
}

After adding the configuration, restart Claude Desktop to apply the new MCP server setting.

Additional setup and development

If you want to develop or build from source, clone the project, install dependencies, and build the server first. Then you can run or test locally.

git clone https://github.com/MoussaabBadla/code-screenshot-mcp.git
cd code-screenshot-mcp
npm install
npm run build

Notes on usage patterns

Basic usage lets you generate a screenshot from a code snippet by sending the code string to the MCP server along with the language and a theme. You can also point the server at a file path to capture a screenshot from the file, optionally restricting to a start and end line. If you want to compare changes, you can request a git diff view as the basis for your screenshot, and you can process multiple files in one batch for efficiency.

Configuration and themes

The MCP server supports multiple color themes to suit your visuals. Choose from five professional themes to match your branding or project style.

Troubleshooting tips

If the server fails to start, verify that Node.js and npm are installed and that the global installation completed successfully. Check that Claude Desktop or Claude Code can reach the MCP configuration you added, and ensure there are no port or permission conflicts on your machine.

Troubleshooting notes about usage with Claude

When you configure Claude to use the MCP server, ensure the command or URL used is exactly as shown in your setup. If you encounter issues with language detection, confirm that the requested language identifier is supported by the server.

Available tools

generate_code_screenshot

Renders a PNG screenshot from a code string by specifying the code, language, and theme.

screenshot_from_file

Renders a PNG screenshot from a file path, with optional start/end lines and theme, performing automatic language detection.

screenshot_git_diff

Renders a PNG screenshot from the diff output of a file, showing changes with a chosen theme.

batch_screenshot

Processes multiple file paths in a single operation and returns an array of PNG images with status.