render-mcp

render-mcp

AI エージェントに本物のブラウザーを使わせます。 スクリーンショット、PDF、そして JavaScript の実行後にページが生成する HTML を取得できます。

API キーも、サインアップも、アカウントも不要です。クライアントに URL を指定するだけで使えます。

https://render.makermargins.com/mcp

---

これが必要な理由

エージェントは URL を取得できます。しかし、そのページを見ることはできません。

ページの表示が正しいか確認したり、React で構築されたサイトを読んだりするようアシスタントに頼むと、そこで行き詰まります。通常の HTTP フェッチでは、空の殻と読み込み中のスピナーしか返ってきません。コンテンツを生成する JavaScript が実行されないためです。

一般的な解決策はレンダリング API ですが、どれもサインアップし、メールアドレスを確認して、API キーを貼り付ける必要があります。単独で動作するエージェントには、そんなことはできません。 受信トレイもクレジットカードもありません。登録できない無料プランには、何の価値もありません。

このサーバーにはそのどれも必要ありません。Cloudflare のネットワーク上で動作し、本物のヘッドレスブラウザーを起動して、ページが実際にどう見えるかを返します。

インストール

Claude Code — プラグインとして（コマンド 1 つで、更新も自動で適用されます）

/plugin marketplace add RodRomer/render-mcp
/plugin install render@render-mcp

Claude Code — 直接インストール

claude mcp add --transport http render https://render.makermargins.com/mcp

Claude Desktop、Cursor、その他のクライアント — MCP 設定に追加します。

{
  "mcpServers": {
    "render": {
      "type": "http",
      "url": "https://render.makermargins.com/mcp"
    }
  }
}

設定はこれだけです。インストールも設定も認証情報も不要です。

ツール

screenshot_url

人が見るのと同じようにページを確認します。PNG を返します。

引数	型	説明
url	string	必須。 https:// を含む絶対 URL
full_page	boolean	スクロール可能なページ全体をキャプチャします。デフォルトは false
width	number	ビューポートの幅。320～2560。デフォルトは 1280
height	number	ビューポートの高さ。240～2000。デフォルトは 800

用途：デプロイ後の表示確認、レイアウトの確認、ユーザーに見える画面の確認。

rendered_html

JavaScript の実行後の DOM です。HTML テキストを返します。

引数	型	説明
url	string	必須。 https:// を含む絶対 URL
wait_for	string	コンテンツの読み込みが遅い場合に、待機する CSS セレクター
max_chars	number	文字数の上限。1,000～500,000。デフォルトは 100000

用途：シングルページアプリや、通常のフェッチでは殻しか返ってこないページ。

page_diagnostics

ページを読み込み、JavaScript のコンソールエラー、失敗したネットワークリクエスト、4xx／5xx のレスポンスなど、問題の内容を報告します。読みやすい要約を返します。

引数	型	説明
url	string	必須。 https:// を含む絶対 URL
include_warnings	boolean	エラーだけでなく警告や情報も含めます。デフォルトは false
width	number	ビューポートの幅。320～2560。デフォルトは 1280
height	number	ビューポートの高さ。240～2000。デフォルトは 800

用途：不具合が混入した可能性のあるデプロイ、真っ白なまま読み込まれるページ、「表示がおかしい」サイトの原因調査。

正直に言えば： これは珍しい機能ではありません。Microsoft の @playwright/mcp はコンソールメッセージを返し、Google の chrome-devtools-mcp はソースマップに対応したスタックトレースとともにコンソールメッセージを返します。どちらも優れたツールで、このサーバーよりも多くのリソースを活用でき、合わせて月間約 3,400 万回ダウンロードされています。ローカルプロセスを実行できるなら、どちらかを使ってください。

どちらもできないのは、何もインストールできない環境で実行することです。npx、Node、ブラウザーのバイナリ、またはローカルの Chrome が必要です。このサーバーに必要なのは URL だけです。違いはそれだけで、意味があるのはそのような環境にいる場合に限られます。

inspect_element

CSS セレクターについて、*「この要素が予想した場所に表示されないのはなぜか？」*に答えます。

引数	型	備考
url	string	必須。 https:// を含む絶対 URL
selector	string	必須。 CSS セレクター。例：.buy-button
max_matches	number	報告する一致数。1～10。デフォルトは 3
width	number	ビューポートの幅。320～2560。デフォルトは 1280
height	number	ビューポートの高さ。240～2000。デフォルトは 800

まず原因を診断し、その後に数値を示します。解決後のボックスモデル、計算済みの display／visibility／opacity／position／z-index、色、ビューポート内にあるかどうか、 さらに別の要素に覆われていないかを確認できます。

便利なのは、ツリーを上方向にたどることです。要素が表示されないときのよくある原因は、その要素 自体ではなく祖先要素にあります。知りたいのは、どの祖先要素なのかです。

--- match 1: button#buy
  HIDDEN BY AN ANCESTOR — div.modal.panel has display:none. The element itself is fine.

単一のプロパティだけでは分からないケースも検出できます。閉じた <details> の中のコンテンツは 通常のボックスを保持し、display:block、visibility:visible、opacity:1 と報告されます。 すべて正常に見えるのに、描画されません。

  NOT RENDERED — it sits inside details.fees, which is not displaying its
  contents because of a closed <details>.
  Box: 70x27 ...  display:block  visibility:visible  opacity:1

次のような場合に便利です。「表示されるはず」の要素を調べる場合、クリックが別の要素に反応する 場合、CSS の変更が実際に適用されたかを確認する場合です。カスケードの解決とレイアウトは、 HTML と CSS を読むだけでは導き出せません。これにはブラウザーが必須です。

url_to_pdf

ブラウザーで印刷した場合と同じように、ページを PDF にレンダリングします。

引数	型	備考
url	string	必須。 https:// を含む絶対 URL
landscape	boolean	デフォルトは false

次のような場合に便利です。ページをアーカイブする場合、レンダリング済みのレポートを文書にする場合。

対応していないこと

エージェントが試して確認するために呼び出しを無駄にしないよう、明確に記載します。

• プライベートネットワークにはアクセスできません。 ループバック、RFC1918 の範囲、169.254.x.x、 .internal および .local のホスト名は拒否されます。このサーバーは Cloudflare のネットワーク内で 実行されており、検証されていない URL を許可するとサーバーサイドリクエストフォージェリが発生する おそれがあります。
• ログインには対応していません。 セッションがないため、認証が必要なページはログインページとして レンダリングされます。
• ナビゲーションの制限時間は20秒です。 非常に遅いページはタイムアウトします。
• JavaScript の挿入には対応していません。 ページをレンダリングしますが、ページ上でコードを実行する ことはありません。

エラーはプロトコルエラーではなく、問題の内容を説明する読みやすいテキストとして返されます。そのため、 エージェントはクラッシュせずに別の方法を試せます。

プライバシー

URL とページの内容が保存または記録されることはありません。 呼び出しごとにブラウザーを起動して 処理を行い、結果を返した後にブラウザーを閉じます。何をリクエストしたかは一切保持されません。

記録される情報が1つあります。「匿名化済み」という曖昧な表現に隠さず、正確に説明します。

記録される情報	記録されない情報
実行されたツール（screenshot_url、…）	URL、またはその一部
処理結果（ok、timeout、capacity、…）	IP アドレス
所要時間（ミリ秒）	ヘッダー、Cookie、認証情報
	ページの内容、画像、PDF

これらは3つの項目であり、リクエスト、人物、サイトのいずれとも結び付ける方法はありません。記録する 関数には、そもそも URL が渡されないため、誤って URL を記録することもありません。 src/index.js の count() をご覧ください。

この仕組みがある理由は1つだけです。このサーバーは無料であり、稼働を続ける価値があるかどうかを 判断するには、利用状況を知る必要があるためです。

集計数は公開されています。ログインもダッシュボードも必要ありません。

https://render.makermargins.com/stats

開発

npm install
npm test          # 279 tests, no network or browser needed
npm run test:dom  # 39 DOM tests, headless Edge/Chrome, no network
npm run dev       # local worker
npm run deploy    # to Cloudflare

どちらもホスト環境の外でテストされる、2つのレイヤーです。

• src/protocol.js — Cloudflare やブラウザーに依存しない、純粋関数としての MCP リクエスト／レスポンス層です。デプロイ前に、すべての URL 検証と SSRF ルールを通常の Node で検証します。
• src/inspect-page.js — ページ内で実行される inspect_element の処理です。外部の状態を参照しないため、実際の DOM であればどれでも実行できます。テストではヘッドレス Edge 上にフィクスチャーページを構築し、実際に計算されたスタイルと実際のジオメトリを検証します。ここでモック DOM を使っても何も証明できません。このツールの前提は、ブラウザーがカスケードを解決してレイアウトを実行した後にのみ、これらの値が得られることだからです。

src/index.js は薄いシェルです。トランスポートで受け取り、ブラウザーで処理し、戻り際に文章を整形します。

Node がインストールされていない場合は、npm run test:nonode を実行すると、代わりにヘッドレス Edge でプロトコルのテストスイートが実行されます。export／import キーワードだけを取り除き、同じソースを実行します。

実際のページを使ってテストする場合は、中立的な URL を使用してください

IANA がまさにこの目的のために予約している https://example.com、またはエラーパスのテストには httpstat.us を使用してください。実際のテストで makermargins.com を指定しないでください。

理由は礼儀の問題ではありません。このサイトでは Cloudflare Web Analytics を使用しており、ブラウザー風のリクエストに対する HTML レスポンスにビーコンが挿入されます。このサーバーは実際のヘッドレスブラウザーを動かすため、そのサイトのスクリーンショットや監査を行うたびに、ビーコンが実行され、訪問者として記録されます。その結果、数値を測定するための対象そのもののトラフィックが水増しされます。自分自身を数える計測器では、何も測れません。

ステータス

初期段階で、無料です。MCP レジストリのディスカバリーが実際に機能するかを確かめるために作られました。使われるようになれば保守します。そうでなければ、それもまた有益な答えです。

課題やプルリクエストを歓迎します。

これがどのように作られたか

Claude が執筆し、人間が指示しました。推測に任せず、ここに明記しています。

評価にあたって知っておく価値があるのは、次の事実です。318 件のテストで、プロトコル層、ルーティングテーブル、使用量カウンター、ランディングページ、プラグインマニフェストをカバーしています。また、実際のブラウザーが必要な部分は、モック DOM ではなく、実際のフィクスチャーページを使ってテストしています。この README に記載されているプラットフォームに関する主張はすべて一次情報で確認しており、広く繰り返されている主張のうち、いくつかは誤りだと分かりました。

これらの事実だけで品質が保証されるわけではありません。ただし、検証できるという点で、約束よりも有益です。

ライセンス

MIT