PageProofer

PageProofer MCP サーバー

GitHub Copilot、Claude Code、Cursor、その他の AI エージェントから寄せられた PageProofer のウェブサイトへのフィードバックメモを読み、修正し、返信します。

PageProofer は、ウェブサイトの視覚的なフィードバックを収集します。クライアントやチームメンバーが要素をクリックしてメモを残すと、PageProofer がページ、要素、ブラウザー、コンソールエラーを記録します。この MCP サーバーを使うと、コーディングエージェントがそれらのメモに対応できます。コード内で問題を見つけて修正し、変更内容をメモにコメントし、メモをレビュー待ちにします。

これはホスト型（リモート）サーバーなので、インストールは不要です。

• URL： https://app.pageproofer.com/mcp
• トランスポート： ストリーム可能な HTTP
• 認証： Authorization: Bearer YOUR_TOKEN

このリポジトリには、サーバーのドキュメントのみが含まれています。サーバー自体は PageProofer の一部として稼働します。

エージェントができること

ツール	説明
list-sites	作業可能なウェブサイトを、ドメイン、未対応メモの件数、各サイトのメンバーとともに一覧表示します。
list-notes	サイトのメモを新しい順に一覧表示します。ステータス、#タグ、テキスト、ページ、担当者、期限超過で絞り込めます。デフォルトでは未対応のメモのみを表示します。
get-note	1件のメモに関するすべての情報を取得します。フィードバック、ページ URL、メモが固定された要素（CSS セレクターと HTML）、ブラウザーとウィンドウサイズ、コンソールエラー、失敗したネットワークリクエスト、コメント、添付ファイルが含まれます。
get-attachment	スクリーンショットなどの添付ファイルを取得します。画像はエージェントが確認できる画像として、テキストファイルはその内容として返されます。
add-comment	あなたとしてメモにコメントします。たとえば、何をどのコミットで修正したかを伝えられます。チーム内限定のコメントにもできます。
update-note	メモのステータス、優先度、担当者、期限を変更します。

エージェントはメモを完了またはクローズにできません。エージェントが何かを修正すると、担当者が確認できるよう、メモをレビュー中に移動します。

トークンを取得する

1. PageProofer にサインインし、My Settings を開いて AI agents タブに移動します。
2. トークンに名前を付け（たとえば「ノート PC の VS Code」）、Create token をクリックします。
3. すぐにコピーしてください。トークンが表示されるのは一度だけです。

AI エージェントの利用は、無料トライアルを含むすべての PageProofer プランに含まれています。コンピューターやツールごとにトークンを作成でき、いつでも無効にできます。

設定

VS Code の GitHub Copilot

プロジェクトの .vscode/mcp.json、またはユーザーの MCP 設定に次の内容を追加します。VS Code は初回にトークンを要求し、安全に保存します。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "pageproofer-token",
      "description": "PageProofer token (My Settings > AI agents)",
      "password": true
    }
  ],
  "servers": {
    "pageproofer": {
      "type": "http",
      "url": "https://app.pageproofer.com/mcp",
      "headers": {
        "Authorization": "Bearer ${input:pageproofer-token}"
      }
    }
  }
}

次に、Copilot Chat をエージェントモードで開き、メモについて質問します。

Claude Code

claude mcp add --transport http pageproofer https://app.pageproofer.com/mcp --header "Authorization: Bearer YOUR_TOKEN"

Cursor

~/.cursor/mcp.json または .cursor/mcp.json に追加します。

{
  "mcpServers": {
    "pageproofer": {
      "url": "https://app.pageproofer.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      }
    }
  }
}

その他のエージェント

HTTP 経由のリモートサーバーに対応する MCP クライアントであれば、URL https://app.pageproofer.com/mcp とヘッダー Authorization: Bearer YOUR_TOKEN を使って接続できます。

使い方

プロジェクトのフォルダーから、普段の言葉で質問します。

• 「Northwind サイトの未対応メモは何ですか？」
• 「未対応の #checkout メモを修正して、それぞれに変更内容をコメントしてください。」
• 「メモ 12 の問題は何ですか？スクリーンショットを見てください。」
• 「自分が担当している期限超過のメモを表示してください。」

一般的な流れは、エージェントが未対応のメモを一覧表示し、スクリーンショットとコンソールエラーとともに1件を読み、該当する要素のコードを見つけて修正し、コミットとともにコメントし、メモをレビュー中に移動する、というものです。

動作のしくみ

• エージェントはあなたとして動作します。あなたが閲覧できるサイトとメモだけを確認できます。
• エージェントのコメントや変更にはあなたの名前が表示され、「via AI agent」と記されます。
• 通知は通常どおり機能するため、エージェントのコメントによって、そのメモの関係者に通知が届きます。
• メモのテキストやコメントは、クライアントやサイト訪問者が投稿したものです。サーバーはエージェントに、それらを指示ではなく問題の説明として扱うよう伝えます。

トークンはパスワードと同じように扱ってください。リポジトリにコミットしないでください。漏えいした可能性がある場合は、My Settings > AI agents で無効にしてください。

リンク

• ヘルプ：AI エージェントを接続する
• AI エージェントの使い方
• サポート：[email protected]