MCP server · Cloudflare Workers

讓 agent 看見自己做出的網頁

RenderSight 是部署在 Cloudflare Workers 上的無狀態 MCP server,讓 ChatGPT 能夠呈現、檢視並截圖 agent 在自己執行環境中製作、編修的網頁成果。

為什麼需要

agent 看不見自己的成果,只能盲改

ChatGPT 內建的雲端瀏覽器運行在與 agent 隔離的環境中,agent 產出的 HTML、CSS、JavaScript 無法交給它載入。RenderSight 透過 MCP 補上這塊缺口。

  • 隔離的執行環境

    agent 在自己的環境裡產出或修改網頁後,內建瀏覽器無法載入這些成果,因此無法呈現、檢視或截圖。

  • 雲端渲染截圖

    agent 將網頁內容交給 render tool,由 Cloudflare Browser Run 在雲端渲染並回傳 PNG 截圖。

  • 看見並迭代

    以「截圖 → 檢視 → 修正 → 再截圖」的循環迭代 UI,視覺化檢查 landing page、電子郵件樣板或報告版面。

  • 暫存分享

    渲染結果可存入 R2,包裝成 24 小時效期的暫存下載連結分享出去。

運作方式

從 HTML 到截圖,一個 tool 完成

Worker 由 Cloudflare Access Managed OAuth 保護,只有通過 Access Policy 的使用者能連線。截圖能以 MCP image content 內嵌回傳、存入 R2 並回傳暫存下載 URL,或兩者同時回傳。

1

MCP server(Cloudflare Workers)

ChatGPT 透過 Managed OAuth 連線,呼叫 render tool 並傳入 HTML。

2

Browser Run

雲端渲染 HTML,等內容與 webfont 就緒後截圖,回傳 PNG。

3

R2 暫存

PNG 存入 R2,回傳 24 小時效期的 presigned 下載 URL。

4

agent 檢視成果

agent 以 image content 或下載 URL 讀取截圖,據以迭代修正。

Tools

render

將 HTML 渲染為 PNG 圖片,並以內嵌圖片、暫存下載 URL 或兩者回傳。

參數 說明
html 必填,要渲染的 HTML。
widthheight viewport 尺寸,預設 800x800,限制 1–4096 px。
omitBackground 是否使用透明背景,預設 false
waitForFonts 截圖前等待 document.fonts.ready 與兩次 repaint,預設 true
waitForSelector 可選 readiness 條件:CSS selector、attached | visible | hidden state,最長 30 秒時間預算。
waitForTimeout readiness 後的額外固定等待,0–10000 ms,預設 0
output inlineurlboth,預設 both
filename 下載時顯示的檔名;未提供 .png 時自動補上。

等待條件逾時時會回傳 tool error,不會以未完成的畫面繼續。為避免超過 Workers 的 128 MB isolate memory limit,inline 編碼上限為 8 MiB。

輸出模式

inline、url 或 both

所有成功結果都會附帶 outputfilenamemimeTypewidthheightbyteLength structured metadata。

模式 行為
inline 回傳 MCP image content,不寫入 R2。
url 將渲染結果串流至 R2,只回傳文字 presigned URL 與 resource metadata。
both 同時回傳兩者;失敗時自動降級為 inlineurl

暫存 URL 是有效 24 小時的 R2 S3 presigned URL