為什麼需要
agent 看不見自己的成果,只能盲改
ChatGPT 內建的雲端瀏覽器運行在與 agent 隔離的環境中,agent 產出的 HTML、CSS、JavaScript 無法交給它載入。RenderSight 透過 MCP 補上這塊缺口。
-
隔離的執行環境
agent 在自己的環境裡產出或修改網頁後,內建瀏覽器無法載入這些成果,因此無法呈現、檢視或截圖。
-
雲端渲染截圖
agent 將網頁內容交給
rendertool,由 Cloudflare Browser Run 在雲端渲染並回傳 PNG 截圖。 -
看見並迭代
以「截圖 → 檢視 → 修正 → 再截圖」的循環迭代 UI,視覺化檢查 landing page、電子郵件樣板或報告版面。
-
暫存分享
渲染結果可存入 R2,包裝成 24 小時效期的暫存下載連結分享出去。
運作方式
從 HTML 到截圖,一個 tool 完成
Worker 由 Cloudflare Access Managed OAuth 保護,只有通過 Access Policy 的使用者能連線。截圖能以 MCP image content 內嵌回傳、存入 R2 並回傳暫存下載 URL,或兩者同時回傳。
MCP server(Cloudflare Workers)
ChatGPT 透過 Managed OAuth 連線,呼叫 render tool 並傳入 HTML。
Browser Run
雲端渲染 HTML,等內容與 webfont 就緒後截圖,回傳 PNG。
R2 暫存
PNG 存入 R2,回傳 24 小時效期的 presigned 下載 URL。
agent 檢視成果
agent 以 image content 或下載 URL 讀取截圖,據以迭代修正。
Tools
render
將 HTML 渲染為 PNG 圖片,並以內嵌圖片、暫存下載 URL 或兩者回傳。
| 參數 | 說明 |
|---|---|
html |
必填,要渲染的 HTML。 |
width、height |
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 |
inline、url 或 both,預設 both。 |
filename |
下載時顯示的檔名;未提供 .png 時自動補上。 |
等待條件逾時時會回傳 tool error,不會以未完成的畫面繼續。為避免超過 Workers 的 128 MB isolate memory limit,inline 編碼上限為 8 MiB。
輸出模式
inline、url 或 both
所有成功結果都會附帶 output、filename、mimeType、width、height
與 byteLength structured metadata。
| 模式 | 行為 |
|---|---|
inline |
回傳 MCP image content,不寫入 R2。 |
url |
將渲染結果串流至 R2,只回傳文字 presigned URL 與 resource metadata。 |
both |
同時回傳兩者;失敗時自動降級為 inline 或 url。 |
暫存 URL 是有效 24 小時的 R2 S3 presigned URL
RenderSight