render-mcp

render-mcp

让 AI Agent 拥有真正的浏览器。 截图、PDF，以及页面运行 JavaScript 后生成的 HTML。

无需 API 密钥。无需注册。无需账户。让客户端访问一个 URL，即可使用。

https://render.makermargins.com/mcp

---

为什么要做这个项目

Agent 可以获取 URL，却无法 看见 页面。

让助手检查页面显示是否正常，或读取用 React 构建的网站，就会碰壁：普通的 HTTP 获取只会返回空壳和加载转圈。页面内容由从未运行的 JavaScript 构建。

通常的解决方案是使用渲染 API——但每种 API 都要求你注册、验证电子邮件并粘贴 API 密钥。**独立工作的 Agent 无法完成这些事。**它没有收件箱，也没有银行卡。无法注册的免费层对它毫无用处。

这个服务不需要这些。它运行在 Cloudflare 的网络上，会启动真正的无头浏览器，并返回页面实际呈现的内容。

安装

Claude Code — 作为插件安装（只需一条命令，更新会自动到达）

/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	字符串	**必填。**完整 URL，包含 https://
full_page	布尔值	截取整个可滚动页面。默认值为 false
width	数字	视口宽度，320–2560。默认值为 1280
height	数字	视口高度，240–2000。默认值为 800

适用于：确认部署显示正常、检查布局、查看用户看到的内容。

rendered_html

JavaScript 执行后的 DOM。返回 HTML 文本。

参数	类型	说明
url	字符串	**必填。**完整 URL，包含 https://
wait_for	字符串	等待内容加载时使用的 CSS 选择器
max_chars	数字	截断上限，1,000–500,000。默认值为 100000

适用于：单页应用，以及所有普通获取只会返回空壳的场景。

page_diagnostics

加载页面并报告出现的问题：JavaScript 控制台错误、失败的网络请求，以及所有 4xx/5xx 响应。返回易读的摘要。

参数	类型	说明
url	字符串	**必填。**完整 URL，包含 https://
include_warnings	布尔值	除错误外，也包含警告和信息。默认值为 false
width	数字	视口宽度，320–2560。默认值为 1280
height	数字	视口高度，240–2000。默认值为 800

适用于：可能存在缺陷的部署、加载后空白的页面，以及“看起来坏了”且需要查明原因的网站。

**如实说明：**这并不是罕见的功能。Microsoft 的 @playwright/mcp 会返回控制台消息；Google 的 chrome-devtools-mcp 会通过 29 个工具返回带有源映射堆栈跟踪的控制台消息。两者都很出色，资源也都比本项目充足，两者合计每月下载量约为 3,400 万次。如果你可以运行本地进程，就用它们之一。

它们都无法做到的一点，是在无法安装任何东西的环境中运行。它们需要 npx、Node 和浏览器二进制文件，或本地 Chrome。本服务只需要一个 URL。这就是全部区别，而且只有在你身处这种环境时才重要。

inspect_element

针对 CSS 选择器回答*“为什么这个元素没有出现在我预期的位置？”*

参数	类型	说明
url	string	必填。 绝对 URL，包含 https://
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	必填。 绝对 URL，包含 https://
landscape	boolean	默认值为 false

适用于：存档网页、将渲染后的报告转换为文档。

它不会做什么

明确说明，避免 Agent 浪费调用来发现这些限制：

• 不支持私有网络。 环回地址、RFC1918 范围、169.254.x.x、.internal 和 .local 主机名都会被拒绝。此服务运行在 Cloudflare 的网络中，未经验证的 URL 会构成服务器端请求伪造风险。
• 不支持登录。 服务没有会话，因此任何需要身份验证的页面都会显示为登录页。
• 导航限时 20 秒。 加载非常慢的页面会超时。
• 不注入 JavaScript。 它会渲染页面，但不会在页面上运行你的代码。

失败时会返回易读的文本来说明问题，而不是协议错误——这样 Agent 可以改用其他方式处理，而不会崩溃。

隐私

URL 和页面内容绝不会被存储或记录日志。 每次调用都会启动浏览器、完成操作、返回结果，然后关闭浏览器。不会保留任何关于你请求了什么的信息。

有一项数据会被计数，值得明确说明，而不是笼统地称为“匿名化”：

记录	不记录
运行了哪个工具（screenshot_url，……）	URL 或其中任何部分
运行结果（ok、timeout、capacity，……）	你的 IP 地址
耗时（毫秒）	任何标头、Cookie 或凭据
	任何页面内容、图片或 PDF

这些是三个字段，无法将它们关联到某次请求、某个人或某个网站。写入这些数据的函数根本不会收到 URL，因此不可能意外记录 URL—— 参见 src/index.js 中的 count()。

保留这些计数只有一个原因：此服务是免费的，而要决定是否值得继续运行，唯一的办法就是了解是否有人在使用它。

计数数据公开可查——无需登录，也没有控制面板：

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

两个层面，均在宿主环境之外进行测试：

• src/protocol.js — MCP 请求／响应接口由纯函数实现，不依赖 Cloudflare 或浏览器。所有 URL 验证和 SSRF 规则都在部署前通过纯 Node 得到验证。
• src/inspect-page.js — inspect_element 中在页面内运行的部分。它不闭包捕获任何内容，因此任何真实 DOM 都能执行它。测试会在无头 Edge 中构建 fixture 页面，并断言真实的计算样式和真实几何信息。在这里使用模拟 DOM 毫无意义：这个工具的全部前提是，这些值只有在浏览器解析层叠并完成布局后才会存在。

src/index.js 是一个轻量外壳——接收传输内容、执行浏览器操作，再在返回时格式化文本。

如果没有安装 Node，npm run test:nonode 会改为在无头 Edge 中运行协议测试套件。它只移除 export／import 关键字，并执行同一份源代码。

针对线上页面测试时，请使用中立 URL

使用 https://example.com——IANA 正是为此保留了这个域名——或者使用 httpstat.us 测试错误路径。不要将线上测试指向 makermargins.com。

原因并非出于礼貌。该网站启用了 Cloudflare Web Analytics，其 beacon 会注入面向类似浏览器的请求所返回的 HTML 中。本服务会驱动真实的无头浏览器，因此对该网站进行的每次截图或审计都会执行 beacon 并登记为访客，从而抬高这项资产的流量数据，而这些数据本来正是要用来衡量它的。会统计自身操作者的仪器毫无测量价值。

状态

目前处于早期阶段，且免费。开发它是为了弄清 MCP 注册表发现是否真的有效。如果有人使用，就会持续维护；如果没人使用，这本身也是有用的答案。

欢迎提交问题和拉取请求。

构建方式

由 Claude 编写、由人类指导，并在此明确说明，而不是留待他人推测。

评估它时，了解这一点很重要，因此相关事实如下：318 项测试覆盖了协议接口、路由表、使用计数器、落地页和插件清单；需要真实浏览器的部分，则针对真实的 fixture 页面进行测试，而不是使用模拟 DOM。本 README 中的每项平台声明都经过一手资料核实，其中有几项广为流传的说法被证实是错误的。

这些都不能单独证明它很好——但这些内容可以核查，这比承诺更有用。

许可证

MIT