Skip to main content
Glama

Code Screenshot Generator MCP

MCP server for generating beautiful code screenshots directly from Claude

npm version npm downloads License: MIT TypeScript MCP

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.

Related MCP server: Claude Code Starter Kit MCP

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

Dracula Theme

Nord Theme

Nord Theme

Monokai Theme

Monokai Theme

GitHub Light Theme

GitHub Light

GitHub Dark Theme

GitHub Dark

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

Available Tools

4 tools
batch_screenshotB

Generate screenshots for multiple files at once. Useful for documenting multiple code files quickly.

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathsYesArray of file paths to screenshot
themeNoColor theme to apply to all screenshots (dracula, nord, monokai, github-light, github-dark)

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It mentions generating screenshots and a use case, but lacks critical behavioral details: it doesn't specify output format (e.g., image files, base64), file type support, error handling, performance characteristics, or whether it modifies files. For a tool with no annotation coverage, this is a significant gap in transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is perfectly concise and front-loaded: two sentences with zero waste. The first sentence states the core purpose, and the second adds practical context. Every word earns its place without redundancy or fluff.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations, no output schema, and a tool that performs batch operations (implying complexity), the description is incomplete. It lacks information on what the tool returns (e.g., file paths, images), error conditions, or limitations (e.g., max files). For a tool with these contextual gaps, the description should provide more completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already fully documents both parameters (filePaths array, theme with enum). The description adds no additional parameter semantics beyond what's in the schema—it doesn't explain file path requirements, theme implications, or default behaviors. Baseline 3 is appropriate when the schema does all the work.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Generate screenshots for multiple files at once' specifies the verb (generate) and resource (screenshots for files). It distinguishes from siblings by emphasizing batch processing ('multiple files at once'), but doesn't explicitly differentiate from each sibling tool by name or specific use case.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides implied usage guidance: 'Useful for documenting multiple code files quickly' suggests a context of code documentation with efficiency needs. However, it doesn't explicitly state when to use this tool versus the sibling tools (generate_code_screenshot, screenshot_from_file, screenshot_git_diff) or provide any exclusion criteria.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_code_screenshotC

Generate a beautiful screenshot of code with syntax highlighting and themes

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesThe code to screenshot
languageYesProgramming language (e.g., javascript, python, rust)
themeNoColor theme (dracula, nord, monokai, github-light, github-dark)

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions generating a 'beautiful screenshot' but doesn't specify output format (e.g., image type, size), performance aspects (e.g., rate limits, processing time), or error handling. For a tool with no annotations, this leaves significant gaps in understanding how it behaves beyond the basic action.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and front-loaded in a single sentence that states the core purpose efficiently. There's no wasted text, and it directly communicates the tool's function. However, it could be slightly improved by structuring to include usage hints, but as is, it's appropriately sized for its content.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (generating visual output) and lack of annotations and output schema, the description is incomplete. It doesn't explain what the output looks like (e.g., image format, dimensions), potential limitations, or how errors are handled. For a tool with no structured output information, the description should provide more context to be fully helpful.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The description adds minimal meaning beyond the input schema, which has 100% coverage with clear descriptions for all parameters. It implies parameters through 'code with syntax highlighting and themes' but doesn't detail semantics like how 'language' affects highlighting or what 'theme' visually entails. With high schema coverage, the baseline is 3, as the schema does most of the work without extra value from the description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Generate a beautiful screenshot of code with syntax highlighting and themes.' It specifies the verb ('generate'), resource ('screenshot of code'), and key features ('syntax highlighting and themes'), making the action distinct. However, it doesn't explicitly differentiate from sibling tools like 'batch_screenshot' or 'screenshot_from_file', which likely handle multiple codes or file inputs, so it misses full sibling distinction.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention sibling tools such as 'batch_screenshot' for multiple codes, 'screenshot_from_file' for code from files, or 'screenshot_git_diff' for diff outputs, leaving the agent without context for selection. Usage is implied only by the tool's name and description, with no explicit when/when-not instructions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

screenshot_from_fileB

Screenshot code directly from a file path, with optional line range selection. Auto-detects language from file extension.

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathYesPath to the code file
startLineNoStart line number (1-indexed, optional)
endLineNoEnd line number (optional)
themeNoColor theme (dracula, nord, monokai, github-light, github-dark)

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions 'auto-detects language from file extension', which adds useful context beyond the schema. However, it doesn't describe critical behaviors like output format (e.g., image type, size), error handling (e.g., for invalid file paths), or performance aspects (e.g., file size limits), leaving significant gaps for a tool that performs file I/O and image generation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose ('Screenshot code directly from a file path') and adds key features ('optional line range selection', 'auto-detects language'). It avoids redundancy and wastes no words, though it could be slightly more structured by separating usage notes.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (file I/O, image generation, language detection) and lack of annotations and output schema, the description is incomplete. It misses details on output (e.g., image format, where it's saved), error conditions, permissions needed for file access, and how it differs from siblings. For a tool with no structured behavioral hints, this leaves the agent under-informed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description adds minimal value beyond the schema by hinting at 'optional line range selection' (implied by startLine/endLine) and 'auto-detects language' (not directly parameter-related). With high schema coverage, the baseline is 3, as the description doesn't significantly enhance parameter understanding.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Screenshot code directly from a file path' with the specific action 'screenshot' and resource 'code from a file path'. It distinguishes from siblings by mentioning 'from a file path' (vs. batch operations, git diffs, or generic generation), but doesn't explicitly name alternatives or contrast with all siblings like 'batch_screenshot' or 'screenshot_git_diff'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage context through 'optional line range selection' and 'auto-detects language from file extension', suggesting it's for capturing specific code sections from files. However, it lacks explicit guidance on when to use this tool versus siblings like 'batch_screenshot' (for multiple files) or 'screenshot_git_diff' (for diff outputs), leaving the agent to infer based on parameter names and descriptions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

screenshot_git_diffB

Generate a screenshot of git diff output. Shows changes in your working directory or staged changes.

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathNoOptional: Specific file to diff. If not provided, shows diff for all changes.
stagedNoShow staged changes (git diff --staged) instead of unstaged changes
themeNoColor theme (dracula, nord, monokai, github-light, github-dark)

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool generates a screenshot, implying a read-only operation that produces an image, but does not disclose details such as output format (e.g., PNG, JPEG), size, permissions needed, rate limits, or whether it modifies any state. This leaves significant gaps for an AI agent to understand the tool's behavior fully.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and front-loaded, with two sentences that directly state the tool's purpose and scope. There is no unnecessary information, and each sentence contributes to understanding the tool's function. However, it could be slightly more structured by explicitly separating purpose from usage hints.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (3 parameters, no output schema, no annotations), the description is adequate but incomplete. It covers the basic purpose and scope but lacks details on output (e.g., image format, handling of errors), behavioral traits, and explicit usage guidelines. This makes it minimally viable but with clear gaps for effective tool invocation.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, providing clear details for all parameters (filePath, staged, theme). The description adds no additional parameter semantics beyond what the schema already explains, such as not elaborating on default behaviors or interactions between parameters. Since schema coverage is high, the baseline score of 3 is appropriate, as the description does not compensate with extra insights.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Generate a screenshot of git diff output' with the specific resource being git diff output. It distinguishes from siblings like 'batch_screenshot' or 'screenshot_from_file' by specifying git diff content, though it doesn't explicitly contrast with 'generate_code_screenshot' which might handle different code-related screenshots.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides implied usage context by mentioning 'Shows changes in your working directory or staged changes,' which suggests when to use it (for git diff visualization). However, it lacks explicit guidance on when to choose this over alternatives like 'generate_code_screenshot' or 'screenshot_from_file,' and does not mention any exclusions or prerequisites.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

TDQS

B3.3/5.0
Disambiguation4/5

The tools are mostly distinct with clear purposes: batch_screenshot for multiple files, generate_code_screenshot for general code, screenshot_from_file for file-based input, and screenshot_git_diff for git diffs. There is minor overlap between generate_code_screenshot and screenshot_from_file, as both handle single-file code screenshots, but the descriptions clarify the input method differences.

Naming Consistency3/5

The naming is mixed with no consistent pattern: batch_screenshot uses verb_noun, generate_code_screenshot uses verb_adjective_noun, screenshot_from_file uses noun_preposition_noun, and screenshot_git_diff uses noun_noun. This inconsistency makes the set less predictable, though all names are readable and descriptive.

Tool Count5/5

With 4 tools, the count is well-scoped for a code screenshot generator. Each tool serves a distinct use case (batch processing, general code, file input, git diffs), and there are no redundant or missing tools for the domain, making it efficient and focused.

Completeness4/5

The tool set covers the core workflows for code screenshots: single and batch generation, file-based input, and git diffs. A minor gap exists in lacking a tool for screenshot customization (e.g., themes or layout adjustments), but agents can work around this with the provided tools for most documentation needs.

Maintenance

ActivityInactive
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/MoussaabBadla/code-screenshot-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server