Code Screenshot Generator

Instructions

Implementation Reference

• src/index.ts:34-56 (registration)

  Registration of the 'generate_code_screenshot' tool in the ListTools response, including name, description, and input schema definition.

  {
    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:137-184 (handler)

  MCP CallToolRequest handler for 'generate_code_screenshot': validates arguments, invokes generateScreenshot, constructs response with success/error text and base64 image.

  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/generator.ts:68-113 (handler)

  Core tool implementation: renders syntax-highlighted code HTML in headless browser using Playwright, screenshots the code container, saves PNG to temp file, returns file path and base64 data.

  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();
    }
  }