AIを活用してUIリグレッションの差分を調査する方法｜Percy MCPコネクター

エージェントがPercyを使用して、指定されたスナップショットのピクセル差分率や比較詳細を取得します。どのコンポーネントが移動・変化したかを特定できるため、その変更がバグなのか意図したものなのかを即座に判断できます。視覚的な変化の内容を明確に把握することが可能です。

1. 01

   スナップショットの特定

   調査を開始するために、エージェントがPercyプロジェクト内から関連する視覚状態を見つけ出します。

   list_snapshots
2. 02

   比較データの取得

   2つのスナップショット間における具体的なピクセル差分や視覚的なデルタ情報を取得します。

   list_comparisons
3. 03

   視覚詳細の検証

   変化の性質を理解するために、エージェントがスナップショットの具体的なプロパティを詳細に調査します。

   get_snapshot_details
4. 04

   調査結果の要約

   差分率やコンポーネントの変化をまとめ、簡潔なレポートとして作成します。

   get_snapshot_details

Percy Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Percy capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "percy-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

Vinkiusのダッシュボード経由でPercyアカウントをリンクするだけです。認証情報は暗号化されて保持されるため、すぐにエージェントへUIスナップショットに関する質問を開始できます。

• 01

  AIがCSSコードを修正してくれますか？

  いいえ。AIができるのは、Percyで見つかった視覚的な差異を読み取り、報告することだけです。コードの修正は、ご自身のIDEで手動で行う必要があります。

• 02

  AIがPercyのスナップショットを承認できますか？

  いいえ。エージェントはデータの取得と比較詳細の提示のみを行います。スナップショットを承認するか拒否するかは、ユーザー自身が決定します。

• 03

  AIはどのようにしてピクセルの変化を検知するのですか？

  エージェントはPercyから提供される比較データを使用して、視覚的なデルタの正確な割合と位置を特定します。

• 04

  AIはコードベース全体を見ることができるのですか？

  いいえ。AIが見ることができるのは、MCPを通じてPercyから提供される視覚的なスナップショットデータと比較情報のみです。

• 05

  別のプロジェクトのスナップショットについても質問できますか？

  はい。エージェントが正しいスナップショットを見つけられるよう、正しいプロジェクト名を指定してください。

• Percyについてさらに詳しく知りたいですか？ Percyコネクターの全機能を見る