Code Snippet Image Mcp Server

Configuration

Add to your MCP configuration file:

{
  "mcpServers": {
    "code-snippet-image-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "code-snippet-image-mcp-server",
        "/custom/output/directory"
      ]
    }
  }
}

Usage

The MCP server provides one main tool:

create_code_image

Generate a beautiful code snippet image:

Parameters:

• code (string, required): The code to convert to image
• language (string, optional): Programming language for syntax highlighting (default: "javascript")
• theme (string, optional): Color theme (default: "dracula")
• title (string, optional): Title for the code snippet
• width (number, optional): Image width in pixels (default: 800)
• height (number, optional): Image height in pixels (auto if not specified)
• padding (number, optional): Padding around the code window in pixels (default: 52)
• backgroundColor (string, optional): Custom background color (overrides theme background)
• showLineNumbers (boolean, optional): Show or hide line numbers (default: true)

Example:

{
  "code": "const hello = () => console.log('Hello, World!');",
  "language": "javascript",
  "theme": "dracula",
  "title": "Hello World Function",
  "width": 800,
  "height": 600,
  "padding": 52,
  "showLineNumbers": true
}