Code Screenshot MCP

🚀 コードスクリーンショット生成器MCP

Claudeから直接美しいコードのスクリーンショットを生成するためのMCPサーバーです。

🚀 クイックスタート

このコードスクリーンショット生成器MCPは、Claudeがシンタックスハイライト付きのコードスクリーンショットを生成できるようにするModel Context Protocol (MCP)サーバーです。直接ファイルを読み取り、行選択、git diffの可視化、バッチ処理をサポートしています。

✨ 主な機能

• 5つのプロフェッショナルテーマ：Dracula、Nord、Monokai、GitHub Light、GitHub Dark
• ファイル統合：ファイルパスから直接コードのスクリーンショットを撮り、行範囲を選択できます。
• Git Diffサポート：ステージングされたまたはステージングされていない変更を可視化します。
• バッチ処理：複数のファイルを同時に処理します。
• 自動言語検出：20種類以上のプログラミング言語をサポートします。
• Claudeとのネイティブ統合：Claude DesktopとClaude Codeで動作します。

📦 インストール

前提条件

npm install -g code-screenshot-mcp

設定

クイックセットアップ (Claude Code):

claude mcp add code-screenshot-mcp

手動セットアップ (Claude Desktop): ~/Library/Application Support/Claude/claude_desktop_config.jsonのClaude設定ファイルに以下を追加します。

{
  "mcpServers": {
    "code-screenshot": {
      "command": "code-screenshot-mcp"
    }
  }
}

設定後、Claude Desktopを再起動してください。

開発環境のセットアップ

git clone https://github.com/MoussaabBadla/code-screenshot-mcp.git
cd code-screenshot-mcp
npm install
npm run build

💻 使用例

基本的なスクリーンショット

"このTypeScript関数のNordテーマのコードスクリーンショットを生成してください:

function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n-1) + fibonacci(n-2);
}
"

ファイルからのスクリーンショット

"Draculaテーマでsrc/index.tsのスクリーンショットを撮ってください"

特定の行のスクリーンショット

"Monokaiテーマでsrc/generator.tsの20 - 45行目のスクリーンショットを撮ってください"

Git Diffのスクリーンショット

"github Darkテーマでgit diffのスクリーンショットを撮ってください"

バッチ処理

"src/index.ts、src/generator.ts、およびsrc/templates.tsのスクリーンショットを撮ってください"

📚 ドキュメント

利用可能なテーマ

• dracula - ダークパープルのテーマ (デフォルト)
• nord - 北極の青みがかったテーマ
• monokai - クラシックなダークテーマ
• github-light - クリーンなライトテーマ
• github-dark - GitHubのダークテーマ

APIリファレンス

generate_code_screenshot

コード文字列からスクリーンショットを生成します。 パラメータ:

• code (文字列、必須) - スクリーンショットを撮るソースコード
• language (文字列、必須) - プログラミング言語識別子
• theme (文字列、オプション) - カラーテーマ (デフォルト: "dracula")

戻り値: Base64エンコードされたPNG画像

screenshot_from_file

自動言語検出でファイルパスからコードのスクリーンショットを撮ります。 パラメータ:

• filePath (文字列、必須) - ソースファイルのパス
• startLine (数値、オプション) - 開始行番号 (1から始まる)
• endLine (数値、オプション) - 終了行番号
• theme (文字列、オプション) - カラーテーマ (デフォルト: "dracula")

サポートされる拡張子: .js, .jsx, .ts, .tsx, .py, .rb, .go, .rs, .java, .c, .cpp, .cs, .php, .swift, .kt, .sql, .sh, .yml, .yaml, .json, .xml, .html, .css, .scss, .md

戻り値: Base64エンコードされたPNG画像

screenshot_git_diff

git diffの出力のスクリーンショットを生成します。 パラメータ:

• filePath (文字列、オプション) - 差分を表示する特定のファイル (省略するとすべて表示)
• staged (ブール値、オプション) - ステージングされた変更を表示する代わりに、ステージングされていない変更を表示します。
• theme (文字列、オプション) - カラーテーマ (デフォルト: "dracula")

戻り値: Base64エンコードされたPNG画像

batch_screenshot

単一の操作で複数のファイルを処理します。 パラメータ:

• filePaths (文字列配列、必須) - ファイルパスの配列
• theme (文字列、オプション) - すべてのスクリーンショットに適用されるテーマ (デフォルト: "dracula")

戻り値: 成功/失敗ステータス付きのPNG画像の配列

テーマの例

Draculaテーマ

Nordテーマ

Monokaiテーマ

GitHub Lightテーマ

GitHub Darkテーマ

🤝 コントリビューション

コントリビューションは歓迎されます。以下の手順に従ってください。

1. リポジトリをフォークします。
2. 機能ブランチを作成します: git checkout -b feature/your-feature
3. 変更をコミットします: git commit -m 'Add your feature'
4. ブランチにプッシュします: git push origin feature/your-feature
5. プルリクエストを送信します。

📄 ライセンス

MITライセンス - Copyright (c) 2025 Moussaab Badla 詳細はLICENSEファイルを参照してください。

謝辞

Model Context Protocol、Playwright、およびHighlight.jsを使用して構築されています。

リポジトリ: github.com/MoussaabBadla/code-screenshot-mcp