Code Screenshot Generator

Instructions

Implementation Reference

• src/generator.ts:155-193 (handler)

  The core handler function that executes the `git diff` command (optionally --staged and for specific file), captures stdout as diff code, and generates a syntax-highlighted screenshot using `generateScreenshot` with language 'diff'.

  export async function screenshotGitDiff(
    options: ScreenshotGitDiffOptions
  ): Promise<GenerateScreenshotResult> {
    try {
      // Build git diff command
      let command = "git diff";
  
      if (options.staged) {
        command += " --staged";
      }
  
      if (options.filePath) {
        command += ` -- "${options.filePath}"`;
      }
  
      // Execute git diff
      const { stdout, stderr } = await execAsync(command);
  
      if (stderr && !stdout) {
        throw new Error(`Git diff error: ${stderr}`);
      }
  
      if (!stdout || stdout.trim().length === 0) {
        throw new Error("No changes to display");
      }
  
      // Generate screenshot with diff language
      return generateScreenshot({
        code: stdout,
        language: "diff",
        theme: options.theme,
      });
    } catch (error) {
      if (error instanceof Error) {
        throw new Error(`Failed to generate git diff screenshot: ${error.message}`);
      }
      throw error;
    }
  }

• src/index.ts:85-106 (schema)

  MCP tool registration schema defining the 'screenshot_git_diff' tool, its description, and input schema (filePath optional, staged boolean, theme enum).

    name: "screenshot_git_diff",
    description: "Generate a screenshot of git diff output. Shows changes in your working directory or staged changes.",
    inputSchema: {
      type: "object",
      properties: {
        filePath: {
          type: "string",
          description: "Optional: Specific file to diff. If not provided, shows diff for all changes.",
        },
        staged: {
          type: "boolean",
          description: "Show staged changes (git diff --staged) instead of unstaged changes",
        },
        theme: {
          type: "string",
          description: "Color theme (dracula, nord, monokai, github-light, github-dark)",
          enum: ["dracula", "nord", "monokai", "github-light", "github-dark"],
        },
      },
      required: [],
    },
  },

• src/index.ts:241-282 (registration)

  MCP CallToolRequest handler dispatch for 'screenshot_git_diff' that parses arguments, calls the screenshotGitDiff function, and returns image content or error.

  if (name === "screenshot_git_diff") {
    try {
      const { filePath, staged, theme = "dracula" } = (args || {}) as {
        filePath?: string;
        staged?: boolean;
        theme?: string;
      };
  
      // Generate the screenshot from git diff
      const result = await screenshotGitDiff({
        filePath,
        staged,
        theme,
      });
  
      const diffType = staged ? "Staged changes" : "Unstaged changes";
      const fileInfo = filePath ? `\nFile: ${filePath}` : "\nAll files";
  
      return {
        content: [
          {
            type: "text",
            text: `✅ Git diff screenshot generated successfully!\n\n${diffType}${fileInfo}\nSaved to: ${result.path}\n\nTheme: ${theme}\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 git diff screenshot: ${error instanceof Error ? error.message : String(error)}`,
          },
        ],
        isError: true,
      };
    }

• src/generator.ts:149-153 (schema)

  TypeScript interface defining the input options for the screenshotGitDiff handler.

  export interface ScreenshotGitDiffOptions {
    filePath?: string;
    staged?: boolean;
    theme?: string;
  }