Skip to content

Conversation

MoussaabBadla
Copy link

Description

This PR adds Code Screenshot Generator to the community servers list. This MCP server enables AI assistants like Claude to generate
beautiful, syntax-highlighted code screenshots with professional themes directly from conversations, eliminating the need to use
external screenshot tools.

Server Details

Motivation and Context

Developers frequently need to create visually appealing code screenshots for:

  • Technical documentation
  • Blog posts and tutorials
  • Social media content
  • Presentations and teaching materials
  • Code review discussions

Currently, this requires leaving the development environment and using external tools like Carbon.now.sh or Ray.so, which involves
manual copying, pasting, and configuration.

This MCP server solves this problem by allowing Claude to generate professional code screenshots directly from:

  • Code snippets in conversations
  • Files in the project directory (with line range selection)
  • Git diffs showing code changes
  • Multiple files in batch operations

How Has This Been Tested?

  • Tested extensively with Claude Desktop
  • Tested with Claude Code CLI
  • All 4 MCP tools verified working:
    • generate_code_screenshot - Generate from code strings
    • screenshot_from_file - Screenshot from file paths with line selection
    • screenshot_git_diff - Visualize git diffs
    • batch_screenshot - Process multiple files at once
  • All 5 themes tested and rendering correctly
  • File extension auto-detection tested with 20+ languages
  • Batch processing tested with multiple files
  • Published to npm and installation tested globally

Breaking Changes

No breaking changes. This is a new server addition to the community list.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update

Checklist

  • I have read the MCP Protocol Documentation
  • My changes follows MCP security best practices
  • I have updated the server's README accordingly
  • I have tested this with an LLM client
  • My code follows the repository's style guidelines
  • New and existing tests pass locally
  • I have added appropriate error handling
  • I have documented all environment variables and configuration options

Installation:

npm install -g code-screenshot-mcp

Quick Setup with Claude Code:
claude mcp add code-screenshot-mcp

The server is production-ready, published to npm, and has been tested thoroughly with Claude Code. The entry has
 been added alphabetically to the Community Servers section as per contribution guidelines.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant