Code Screenshot Generator MCP

MCP server for generating beautiful code screenshots directly from Claude

Overview

A Model Context Protocol (MCP) server that enables Claude to generate syntax-highlighted code screenshots with professional themes. Supports direct file reading, line selection, git diff visualization, and batch processing.

Features

• 5 Professional Themes: Dracula, Nord, Monokai, GitHub Light, GitHub Dark
• File Integration: Screenshot code directly from file paths with line range selection
• Git Diff Support: Visualize staged or unstaged changes
• Batch Processing: Process multiple files simultaneously
• Auto Language Detection: Supports 20+ programming languages
• Native Claude Integration: Works with Claude Desktop and Claude Code

Installation

Prerequisites

npm install -g code-screenshot-mcp

Configuration

Quick Setup (Claude Code):

claude mcp add code-screenshot-mcp

Manual Setup (Claude Desktop):

Add to your Claude configuration file at ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Restart Claude Desktop after configuration.

Development Setup

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

Quick Start

Basic Screenshot

"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);
}
"

From File

"Screenshot src/index.ts with Dracula theme"

Specific Lines

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

Git Diff

"Screenshot my git diff with GitHub Dark theme"

Batch Processing

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

Available Themes

• dracula - Dark purple theme (default)
• nord - Arctic blue-tinted theme
• monokai - Classic dark theme
• github-light - Clean light theme
• github-dark - GitHub's dark theme

API Reference

generate_code_screenshot

Generate a screenshot from code string.

Parameters:

• code (string, required) - Source code to screenshot
• language (string, required) - Programming language identifier
• theme (string, optional) - Color theme (default: "dracula")

Returns: PNG image with base64 encoding

screenshot_from_file

Screenshot code from file path with automatic language detection.

Parameters:

• filePath (string, required) - Path to source file
• startLine (number, optional) - Start line number (1-indexed)
• endLine (number, optional) - End line number
• theme (string, optional) - Color theme (default: "dracula")

Supported Extensions:

.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

Returns: PNG image with base64 encoding

screenshot_git_diff

Generate screenshot of git diff output.

Parameters:

• filePath (string, optional) - Specific file to diff (shows all if omitted)
• staged (boolean, optional) - Show staged changes instead of unstaged
• theme (string, optional) - Color theme (default: "dracula")

Returns: PNG image with base64 encoding

batch_screenshot

Process multiple files in a single operation.

Parameters:

• filePaths (string[], required) - Array of file paths
• theme (string, optional) - Theme applied to all screenshots (default: "dracula")

Returns: Array of PNG images with success/failure status

Examples

Dracula Theme

Nord Theme

Monokai Theme

GitHub Light Theme

GitHub Dark Theme

Contributing

Contributions are welcome. Please follow these steps:

1. Fork the repository

2. Create a feature branch: git checkout -b feature/your-feature

3. Commit changes: git commit -m 'Add your feature'

4. Push to branch: git push origin feature/your-feature

5. Submit a pull request

License

MIT License - Copyright (c) 2025 Moussaab Badla

See LICENSE file for details.

Acknowledgments

Built with Model Context Protocol, Playwright, and Highlight.js.

---

Repository: github.com/MoussaabBadla/code-screenshot-mcp