Code Screenshot Generator

Instructions

Implementation Reference

• src/generator.ts:68-113 (handler)

  Core handler function that generates the screenshot of provided code using Playwright. Renders HTML with syntax highlighting (via generateHTML helper), takes screenshot of the code container, saves to temp file, and returns path and base64.
  export async function generateScreenshot( options: ScreenshotOptions ): Promise<GenerateScreenshotResult> { const html = generateHTML(options); const browser = await getBrowser(); const page = await browser.newPage(); try { // Set viewport for better rendering await page.setViewportSize({ width: 1920, height: 1080, }); // Load the HTML content await page.setContent(html, { waitUntil: "networkidle", }); // Wait for syntax highlighting to apply await page.waitForTimeout(500); // Find the container element const container = await page.locator(".container"); // Take screenshot of just the container const screenshot = await container.screenshot({ type: "png", }); // Save to temp file const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "code-screenshot-")); const tempFile = path.join(tempDir, "screenshot.png"); await fs.writeFile(tempFile, screenshot); // Convert to base64 const base64 = screenshot.toString("base64"); return { path: tempFile, base64: base64, }; } finally { await page.close(); } }
• src/index.ts:137-184 (handler)

  MCP CallToolRequestSchema handler block that validates input arguments, calls the generateScreenshot function, and formats the response with text and image content.
  if (name === "generate_code_screenshot") { if (!args) { throw new Error("Arguments are required"); } try { const { code, language, theme = "dracula" } = args as { code: string; language: string; theme?: string; }; if (!code || !language) { throw new Error("Both 'code' and 'language' are required"); } // Generate the screenshot const result = await generateScreenshot({ code, language, theme, }); return { content: [ { type: "text", text: `✅ Screenshot generated successfully!\n\nFile saved to: ${result.path}\n\nTheme: ${theme}\nLanguage: ${language}\n\nYou can view the image in your file browser.`, }, { type: "image", data: result.base64, mimeType: "image/png", }, ], }; } catch (error) { return { content: [ { type: "text", text: `❌ Error generating screenshot: ${error instanceof Error ? error.message : String(error)}`, }, ], isError: true, }; } }
• src/index.ts:34-56 (registration)

  Tool registration entry in the ListTools response, defining name, description, and input schema.
  { name: "generate_code_screenshot", description: "Generate a beautiful screenshot of code with syntax highlighting and themes", inputSchema: { type: "object", properties: { code: { type: "string", description: "The code to screenshot", }, language: { type: "string", description: "Programming language (e.g., javascript, python, rust)", }, theme: { type: "string", description: "Color theme (dracula, nord, monokai, github-light, github-dark)", enum: ["dracula", "nord", "monokai", "github-light", "github-dark"], }, }, required: ["code", "language"], }, },
• src/index.ts:37-55 (schema)

  Input schema definition for the generate_code_screenshot tool, specifying required code and language, optional theme.
  inputSchema: { type: "object", properties: { code: { type: "string", description: "The code to screenshot", }, language: { type: "string", description: "Programming language (e.g., javascript, python, rust)", }, theme: { type: "string", description: "Color theme (dracula, nord, monokai, github-light, github-dark)", enum: ["dracula", "nord", "monokai", "github-light", "github-dark"], }, }, required: ["code", "language"], },