Overview

This MCP (Model Context Protocol) server generates syntax-highlighted code screenshots. It accepts structured tool calls (MCP messages) and returns images rendered from source code or diffs. The server is designed for integrations where models need to produce visual, shareable representations of code snippets — for documentation, chat responses, PR previews, or developer tutorials.

Because the server supports file reading, line selection, git-diff visualization, themes, and batch processing, it can be used both interactively by LLMs and programmatically by developer tooling. Outputs can be returned as base64 images or as hosted files, making it easy to embed screenshots in chat UIs, web pages, or issue trackers.

Features

Render syntax-highlighted code into PNG images
Multiple themes and font configuration (light/dark themes supported)
Read code from local files or accept raw code input
Select specific line ranges or highlight lines
Visualize git diffs with added/removed/unchanged styling
Batch processing for directories or multiple inputs
Returns results as base64 images or saved files (configurable)
Designed to be called as an MCP tool from LLMs or via HTTP/REST

Installation / Configuration

Clone and install dependencies (example uses Node.js):

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

Run the server (development):

npm run dev
# or
node src/server.js

Environment variables / configuration options (example .env):

PORT=3000
OUTPUT_DIR=./screenshots
DEFAULT_THEME=dracula
FONT_FAMILY=FiraCode
IMAGE_WIDTH=1200
IMAGE_PADDING=24
RETURN_BASE64=true
ALLOW_FILE_READ=true

Sample startup (with environment file):

export $(cat .env | xargs)
node src/server.js

Available Tools

The MCP server exposes several tool-style endpoints (MCP-compatible). The table below lists common tool names and their primary arguments.

Tool name	Purpose	Key arguments
renderCode	Render raw code to image	code, language, theme, width, highlightLines
renderFile	Read file and render	path, language (optional), lines, theme
renderDiff	Visualize git diff	oldFile, newFile, gitDiffText, theme
batchRender	Process multiple inputs	inputs[], outputDir, namingTemplate

Example MCP-style JSON request for renderCode:

{
  "tool": "renderCode",
  "args": {
    "code": "function sum(a,b){return a+b}",
    "language": "javascript",
    "theme": "one-dark",
    "highlightLines": [1]
  }
}

Typical responses:

Successful: { “status”: “ok”, “imageBase64”: “iVBORw0KG…”, “path”: “/screenshots/123.png” }
Error: { “status”: “error”, “message”: “File not found” }

Use Cases

Embed code screenshots in chat responses
- An LLM calls renderCode with a short snippet and receives a base64 PNG to include directly in a message, ensuring consistent syntax highlighting across clients.

PR or code review diffs

Use renderDiff to convert git diffs into annotated images highlighting additions and deletions, then attach them to a PR comment for visual clarity.

Example (HTTP curl):

curl -sS -X POST http://localhost:3000/mcp \
  -H "Content-Type: application/json" \
  -d '{"tool":"renderDiff","args":{"gitDiffText":"diff --git a/foo.js b/foo.js\n@@ -1 +1,2 @@\n-console.log(1)\n+console.log(1)\n+console.log(2)","theme":"github-dark"}}'

Generate documentation screenshots
- Read a file and render a particular function or lines for inclusion in user guides. Use renderFile with lines=[10,20] to capture only the relevant block.
Bulk export of codebase snapshots
- Use batchRender to produce screenshots for a directory of files (e.g., for a visual code index). Provide namingTemplate like “{relpath}__{lineStart}-{lineEnd}.png”.

Tips and Notes

Security: If ALLOW_FILE_READ is enabled, the server can read files from disk. Restrict this in multi-tenant environments.
Output formats: Configure whether responses return base64-encoded PNGs or file URLs. Use smaller dimensions for avatars / thumbnails.
Themes & fonts: Add custom themes or fonts by placing assets in the configured theme/font directories and restarting the server.
Performance: For high-volume batch jobs, run the server behind a queue and limit concurrency to avoid CPU spikes during image rendering.

Repository and source code: https://github.com/MoussaabBadla/code-screenshot-mcp

For detailed API reference and examples, consult the repository README and the server’s /openapi or /docs endpoint (if enabled).

MCP Server Code Screenshot Generator with Syntax Highlighting