Code Screenshot Generator

Code Screenshot Generator MCP is an MCP server that allows you to transforms code snippets into stylish, syntax-highlighted screenshots directly from your AI assistants like Claude Code.

Key Features

• 🎨 5 Professional Themes: Comes with Dracula, Nord, Monokai, and GitHub Light/Dark themes.
• 📄 Direct File Reading: You can screenshot code directly from a file path and specify line ranges.
• 🔄 Git Diff Visualization: Generate an image of your staged or unstaged git changes.
• ⚙️ Batch Processing: Create screenshots from multiple files at once.
• 🔍 Automatic Language Recognition: It automatically detects the language for syntax highlighting.

Use Cases

• Technical Documentation: I often need to embed code snippets in our team’s wiki. Instead of pasting poorly formatted text, I can ask Claude to generate a clean image from a source file. It looks much better and is easier to read.
• Code Reviews: When explaining a specific change in a pull request, a visual diff can be very effective. I use the git diff feature to create a screenshot of my changes and add it to my PR descriptions on GitHub.
• Presentations and Demos: For tech talks, I need to show code on slides. This tool lets me create a focused image of just the function I’m discussing, with a theme that is clear and readable on a projector.
• Blogging and Social Media: It’s perfect for writing technical blog posts or sharing a quick code tip. I can generate a nicely styled screenshot of a code block that’s ready to be published.

Installation

1. Install the MCP server globally withh npm:

npm install -g code-screenshot-mcp

2. Add the MCP to your Claude Code.

claude mcp add code-screenshot-mcp

3. For Claude Desktop users, you’ll configure the server manually. Locate your Claude configuration file at ~/Library/Application Support/Claude/claude_desktop_config.json and add this block:

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

4. If you prefer working from source code, clone the repository and build locally:

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

Using the MCP Server

Basic Code Screenshots

When you have code you want visualized, provide it directly to Claude with the theme you prefer:

Generate a code screenshot of this TypeScript function with Nord theme:
function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n-1) + fibonacci(n-2);
}

File-Based Screenshots

Reference source files by path, and the system automatically detects the language:

Screenshot src/index.ts with Dracula theme

You can specify exact line ranges to capture just the portion you need:

Screenshot lines 20-45 of src/generator.ts with Monokai theme

Git Diff Screenshots

View changes directly from your working directory:

Screenshot my git diff with GitHub Dark theme

To capture staged changes instead of unstaged modifications, adjust your request accordingly.

Processing Multiple Files

When you need screenshots from several files, submit them together:

Screenshot src/index.ts, src/generator.ts, and src/templates.ts

All files receive the same theme styling for visual consistency.

Available API Methods

generate_code_screenshot

This method accepts raw code strings and produces syntax-highlighted screenshots. Provide the source code, specify the programming language, and optionally select a theme. The function returns a PNG image encoded in base64 format.

screenshot_from_file

This method reads directly from your filesystem. Specify a file path, and the system automatically identifies the language based on the file extension. Optionally restrict output to specific line numbers. The following file types are recognized: .js, .jsx, .ts, .tsx, .py, .rb, .go, .rs, .java, .c, .cpp, .cs, .php, .swift, .kt, .sql, .sh, .yml, .yaml, .json, .xml, .html, .css, .scss, .md

screenshot_git_diff

This method generates screenshots of version control changes. You can target a specific file or view all changes in your repository. By setting the staged parameter, you choose between uncommitted working directory changes or staged changes awaiting commit. Output appears as a PNG image in base64 format.

batch_screenshot

This method processes an array of file paths simultaneously, applying a single theme across all outputs. Each file in the array receives individual processing with status indicators showing success or failure for each operation.

FAQs

Q: How does the language detection work?
A: The system identifies programming languages through file extensions. When using screenshot_from_file, the extension determines syntax highlighting rules automatically. For direct code input via generate_code_screenshot, you specify the language explicitly.

Q: What happens if I try to screenshot a file with an unsupported extension?
A: The MCP server recognizes approximately 20 common programming languages and markup formats. If you submit a file with an extension not in the supported list, the operation will fail. In these cases, you can still generate a screenshot by copying the code and using generate_code_screenshot with explicit language specification.

Q: Does this server need access to my local file system?
A: Yes. To screenshot files directly or show git diffs, the server needs permission to read files on your machine. It runs locally, so your code is not sent to any external services.