La Forge MCP

🚀 モデルコンテキストプロトコル (MCP) サーバー

AIコーディングアシスタントに欠けている視覚認知能力を提供するサーバーです。

🚀 クイックスタート

AIコーディングアシスタント（Claude Codeなど）がCSS/HTMLを扱う際、コード自体は見ることができますが、レンダリング結果を正確に「見る」ことができません。このMCPサーバーは、その問題を解決します。

1. Chromeを起動してアプリに移動

start_chrome("http://localhost:3000")

2. 基準画像をキャプチャ（正常な状態のとき）

capture_reference("homepage", selectors=[".header", ".nav", ".hero", ".footer"])

3. CSSを変更

通常通りコードを編集します。

4. 基準画像と比較

verify_against_reference("homepage")

詳細なレポートが返されます。

{
  "passed": false,
  "summary": {
    "match_percentage": 94.2,
    "problem_region_count": 2
  },
  "problem_areas": [{
    "region": {"area": "top-center"},
    "style_differences": [
      {"property": "height", "expected": "64px", "actual": "48px"}
    ],
    "css_rules": [
      {"selector": ".header", "source": "component.css"},
      {"selector": "header", "source": "reset.css"}
    ]
  }],
  "recommendation": "Check problem_areas for CSS rule conflicts."
}

✨ 主な機能

┌─ VISOR ONLINE ──────────────────────────────────────────────────────────┐
│                                                                         │
│  ◉ ピクセルレベルの差分検出   あらゆる視覚的な違いを検出します       │
│  ◉ 計算済みスタイルの抽出   実際に適用されているCSSを確認できます     │
│  ◉ CSSルールチェーンの分析   どのルールがスタイルを上書きしているかを見つけます │
│  ◉ 問題領域の検出         自動的に異なる領域を特定します             │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

📦 インストール

ワンライナ (macOS/Linux)

curl -fsSL https://raw.githubusercontent.com/MonomythDevelopment/la-forge-mcp/main/install-remote.sh | bash

ワンライナ (Windows PowerShell)

irm https://raw.githubusercontent.com/MonomythDevelopment/la-forge-mcp/main/install-remote.ps1 | iex

手動インストール

# リポジトリをクローン
git clone https://github.com/MonomythDevelopment/la-forge-mcp.git ~/.la-forge-mcp
cd ~/.la-forge-mcp

# インストーラーを実行
chmod +x install.sh
./install.sh

💻 使用例

基本的な使用法

# 基準画像をキャプチャ
capture_reference("homepage", selectors=[".header", ".nav", ".hero", ".footer"])

# 基準画像と比較
verify_against_reference("homepage")

高度な使用法

# 特定の要素のデバッグ情報を取得
get_element_debug_info(".header")

# 要素を比較
compare_elements(".header", expected={"height": "64px"})

📚 ドキュメント

利用可能なツール

Chrome管理

基準管理

視覚検証

要素分析

デバッグセッションの例

User: "変更後、ヘッダーの高さが正しくないようです"

Claude: 何が起こっているか確認します。

> verify_against_reference("homepage")
{
  "passed": false,
  "problem_areas": [{
    "style_differences": [
      {"property": "height", "expected": "64px", "actual": "48px"}
    ],
    "css_rules": [
      {"selector": ".main-header", "source": "header.css", "styles": "height: 64px"},
      {"selector": "header", "source": "reset.css", "styles": "height: auto"}
    ]
  }]
}

Claude: 見つかりました！reset.cssに`header { height: auto }`があり、`.main-header { height: 64px }`を上書きしています。リセットルールはカスケードの後半にあります。

修正オプション:
1. 詳細度を上げる: `header.main-header { height: 64px }`
2. !importantを使用する: `.main-header { height: 64px !important }`
3. スタイルシートのインポート順を変更する

黒い画面の検出

quick_visual_check() ツールを使用すると、レンダリング問題をプログラムで検出できます。

{
  "healthy": false,
  "issues": [
    "Screen appears black/very dark",
    "Page has no visible text content"
  ],
  "metrics": {
    "mean_brightness": 2.3,
    "std_deviation": 1.1
  }
}

黒い画面で「問題なし」と報告されることはありません！

CLAUDE.mdとの統合

最適な結果を得るには、CLAUDE_SNIPPET.md のスニペットをユーザーレベルのCLAUDE.mdに追加します。

# Claudeの設定場所を見つける
claude config get

# スニペットを追加
cat CLAUDE_SNIPPET.md >> ~/.claude/CLAUDE.md

これにより、Claude Codeが自動的に視覚デバッグツールを使用するタイミングと方法を学習します。

設定

環境変数

Chromeパスの設定

Chromeが自動検出されない場合:

# macOS
export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

# Linux  
export CHROME_PATH="/usr/bin/google-chrome"

# Windows
set CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"

🔧 技術詳細

ピクセル差分検出

sharpを使用して画像をピクセル単位で比較します。不一致の領域はマゼンタで強調表示された差分画像が出力されます。連結成分分析により、異なる問題領域が特定されます。

計算済みスタイルの抽出

Chrome DevTools Protocolを使用して、任意の要素の window.getComputedStyle() をクエリします。CSSカスケード後の実際の適用値を表示し、ソースファイルの値だけでなく、実際に適用されている値を確認できます。

CSSルールチェーン

CDPを介してすべてのスタイルシートを反復処理し、要素に一致するすべてのルールを見つけます。ソースファイル、セレクター、およびスタイルを表示します。各プロパティに対して「勝者」となるルールを明らかにします。

トラブルシューティング

サーバーが起動しない

# 直接テスト
node ~/.la-forge-mcp/dist/index.js

# 入力待ち状態になるはずです (Ctrl+Cで終了)
# エラーが表示された場合は、Nodeのバージョンを確認し、npm installを実行してください

"Chrome not found"

CHROME_PATH 環境変数を設定するか、start_chrome() に chrome_path を渡してください。

"No Chrome instance found"

デバッグを有効にしてChromeを手動で起動します。

google-chrome --remote-debugging-port=9222

または、start_chrome() ツールを使用して自動的に行います。

モジュールインポートエラー

再インストールして再構築します。

cd ~/.la-forge-mcp
npm install
npm run build

Claude Codeが「接続に失敗しました」と表示する

1. 登録を確認: claude mcp get la-forge
2. サーバーを手動でテスト（上記を参照）
3. 削除して再追加:

   claude mcp remove la-forge -s user
   claude mcp add la-forge node ~/.la-forge-mcp/dist/index.js -s user
   

開発

# クローン
git clone https://github.com/MonomythDevelopment/la-forge-mcp.git
cd la-forge-mcp

# 依存関係をインストール
npm install

# 開発 (ホットリロード付き)
npm run dev

# ビルド
npm run build

# ビルドされたバージョンを実行
npm start

アンインストール

# Claude Codeから削除
claude mcp remove la-forge -s user

# ファイルを削除
rm -rf ~/.la-forge-mcp

📄 ライセンス

MIT — LICENSE を参照してください。