HTML/CSS to Image
官方一個用於從HTML與CSS生成圖片，或透過htmlcsstoimage.com截取網頁截圖的MCP伺服器。
你可以用 HTML CSS To Image MCP 做什麼？
- 將 HTML/CSS 渲染為圖片 — 透過
create_image要求將 HTML/CSS 轉換為 PNG、JPG、WebP 或 PDF。 - 擷取網站螢幕截圖 — 使用
create_url_image請求公開 URL 的螢幕截圖，並可設定視窗大小與 Cookie 橫幅選項。 - 產生範本化圖片 — 呼叫
create_templated_image，以自訂變數渲染已儲存的範本。 - 建立圖片變體 — 透過
create_batch_images與get_max_batch_size，一次批次產生多個圖片版本。 - 管理可重複使用的範本 — 透過
create_template、update_template、list_templates與list_template_versions建立、更新、列出及檢視範本版本。 - 檢查帳戶使用量 — 詢問以
check_usage驗證圖片額度與限制，不需實際渲染。
文件
整合 HTML/CSS to Image MCP 伺服器
直接從您的 AI 助理拍攝網站截圖、渲染圖片或 PDF，並管理您組織的資源。
簡介
無論您使用哪種 AI 工具或代理程式，都可以透過 MCP 將它連接到 HTML/CSS to Image。為任何相容的助理提供公開 URL 或 HTML/CSS，並要求它拍攝截圖、渲染 PDF，或從您儲存的範本建立圖片。
- 免費開始。 免費的 HCTI 帳戶 可與任何整合搭配使用。建立圖片會像 API 一樣使用您組織的可用圖片額度。
- 安全登入。 透過瀏覽器中的 OAuth 授權您的帳戶，無需將 API 金鑰複製到您的助理中。
- 無需管理瀏覽器基礎架構。 HCTI 負責處理渲染，並回傳一個您可以開啟、下載或分享的託管 URL。
您也可以要求您的助理透過 Management API 功能 設定代理伺服器、儲存目的地和自動 Open Graph 圖片。這些操作需要額外的 OAuth 權限；API 金鑰管理僅限 REST。
選擇您的用戶端
選擇您的助理以取得設定說明和可複製的範例。
| 用戶端 | 如何連接 |
|---|---|
| ChatGPT & Codex | 安裝官方外掛程式；在對話或編碼任務中使用它。 |
| Claude & Claude Code | 從 Claude Connectors Directory 安裝，或連接 Claude Code。 |
| Cline | 從 Cline 擴充功能連接 Streamable HTTP 伺服器。 |
| Cursor | 使用安裝按鈕或 MCP 設定，將 HCTI 新增到 Cursor Agent。 |
| Gemini CLI | 使用遠端 HTTP 伺服器和瀏覽器登入連接 Gemini CLI。 |
| GitHub Copilot | 從您的終端機連接 Copilot CLI。 |
| Grok | 在 Grok Build 中使用 HCTI 外掛程式或直接 MCP 連接。 |
| JetBrains IDEs | 透過支援 OAuth 的 MCP 橋接器連接 AI Assistant。 |
| OpenCode | 設定遠端 MCP 伺服器，並從 CLI 授權它。 |
| VS Code | 新增遠端 HTTP 伺服器，並在 Copilot Agent 模式中使用其工具。 |
| Windsurf | 將 HCTI 連接到 Cascade 以進行截圖和渲染。 |
| Zed | 將遠端 MCP 伺服器新增到 Agent Panel。 |
什麼是 MCP？
Model Context Protocol 讓助理可以呼叫外部工具。HCTI 的託管 MCP 伺服器會渲染您的助理提供的 HTML/CSS 或公開 URL，並回傳結果。您不需要自己執行渲染瀏覽器。
MCP 伺服器 URL： https://mcp.hcti.io
傳輸方式： Streamable HTTP
驗證： OAuth
我們的 代理程式外掛程式 也打包了使用 HCTI 的工作流程指引。如果用戶端支援該外掛程式，安裝它即可同時提供連接和助理的說明。直接 MCP 連接則可存取下列工具。
可用工具
這些核心工具可在各種 MCP 用戶端中運作。存取權限取決於 為您的連接核准的權限。請以名稱要求您的助理使用 HCTI。
帳戶使用量
| 工具 | 功能 |
|---|---|
check_usage | 檢查已使用的圖片數、圖片額度、下次重設時間和超額設定，無需渲染圖片。 |
截圖和渲染
| 工具 | 功能 |
|---|---|
create_image | 將 HTML/CSS 渲染為 PNG、JPG、WebP 或 PDF。支援 device_scale、viewport_width、viewport_height 和 ms_delay。 |
create_url_image | 拍攝公開頁面或 CSS 選擇器的截圖，可設定視窗大小和封鎖 Cookie 橫幅。 |
create_templated_image | 使用 template_id 和 template_values 渲染已儲存的範本。 |
create_batch_images | 使用共用的 default_options 和每個圖片的變體來渲染多種變化。 |
get_max_batch_size | 在準備批次前檢查帳戶的批次限制。 |
意見回饋
| 工具 | 功能 |
|---|---|
submit_feedback | 向 HCTI 團隊回報錯誤、要求功能並提出改進建議。請參閱 意見回饋工具參考。 |
範本管理
| 工具 | 功能 |
|---|---|
create_template | 將 HTML/CSS 儲存為可重複使用的範本，並包含變數。 |
update_template | 依 ID 更新現有範本。 |
list_templates | 在連接的帳戶中尋找範本。 |
list_template_versions | 檢視範本的版本歷史記錄。 |
請參閱 渲染參數 和 範本編輯器 以了解圖片選項和可重複使用的設計。完整工具參考 也涵蓋代理伺服器、儲存目的地、Open Graph 設定和所需權限。
驗證
新增 HCTI 後，使用您用戶端的連接或登入動作，並在瀏覽器中完成授權。登入您要使用其範本和額度的 HCTI 帳戶，檢閱選取的組織和權限，然後返回助理。如有需要，請開啟 More Permissions 以選取其他管理存取權限。某些用戶端會在首次使用時自動提示；個別指南會說明如何明確連接。
若要檢查連接而不渲染圖片，請詢問：「使用 HCTI 檢查我的圖片使用量和帳戶限制。」 check_usage 工具需要 usage:read，並會回傳使用量和限制，無需渲染圖片。get_max_batch_size 也需要 usage:read。渲染請求會使用您 HCTI 帳戶的圖片額度；您的助理訂閱是分開的。
範例提示
如何拍攝網站截圖
Use HTML/CSS to Image to screenshot https://example.com as a PNG.
Set viewport_width to 1440 and device_scale to 1. Return the image URL.
開啟回傳的 URL 以檢視擷取的內容。若要只拍攝您自己網站的部分內容，請提供該頁面上實際存在的 CSS 選擇器，例如 .pricing-grid。HCTI 必須能從其託管服務存取該 URL；localhost 無法存取。
如何將 HTML 和 CSS 渲染為 PNG
Use HCTI to render this HTML and CSS as a PNG with device_scale set to 1.
HTML: <div class="card">Hello from HCTI</div>
CSS: .card { width: 1200px; height: 630px; display: flex;
align-items: center; justify-content: center; background: #172554;
color: white; font: 64px sans-serif; }
Return the hosted image URL.
結果應顯示深藍色卡片上置中的白色文字。助理會將 HTML/CSS 傳送給 HCTI 進行渲染。從儲存庫工作時，請要求它讀取相關檔案，並提供自包含的標記和樣式；本機資源路徑需要替換為可存取的資源。
如何匯出 PDF
Format the following report as HTML and CSS, then render it with HCTI
using format="pdf". Use clear headings and a readable table.
Report: January revenue $12,000; February revenue $14,500; March revenue $16,200.
Return the PDF URL.
如何重複使用範本並建立變化
Use HCTI to list my saved templates. Find the social-card template and
inspect its variables before rendering it with the headline "New release".
Use HCTI to check my maximum batch size. Create five variations of the
HTML/CSS card we just rendered, with a different accent color in each.
Return a labeled list of image URLs.
使用 範本編輯器 設計範本，並定義您的助理應作為 template_values 傳遞的值。
如何檢視組織資源
Use HCTI to list my OG configurations and inspect the blog configuration.
Explain its template mappings and refresh interval.
為此範例核准 og_configs:read。若要建立或更新設定，也請核准 og_configs:create_update。請參閱 工具參考 以了解代理伺服器、儲存目的地和 OG 管理操作。
圖片參數
建立圖片時，主要參數為：
| 參數 | 類型 | 說明 |
|---|---|---|
html | String | 要渲染的 HTML 內容。create_image 為必填。 |
css | String | 您的 HTML 的 CSS 樣式。 |
url | String | 要截圖的 URL。create_url_image 為必填。 |
其他參數
| 名稱 | 類型 | 說明 |
|---|---|---|
additional_header_origins | Array | 允許在對特定額外 HTTP 或 HTTPS 來源的請求上使用自訂的 headers。 |
block_consent_banners | Boolean | 設定為 true 時，會自動封鎖網站上的 Cookie 同意橫幅和彈出視窗。對 URL 截圖最為實用。 |
color_scheme | String | 將 Chrome 設定為以 light 或 dark 模式渲染。會影響使用 prefers-color-scheme 的網站。 |
dedupe_duration_s | Integer | 重複使用相同的近期圖片，不消耗圖片額度。設定回看視窗的秒數；預設值和允許值因圖片類型和方案而異。 |
device_scale | Double | 透過調整像素比率（從 0.1 到 3）來控制解析度。數值越高，圖片品質和檔案大小就越大。 |
disable_twemoji | Boolean | HTML/CSS 和範本圖片預設使用 Twemoji；設定 true 可停用。URL 圖片僅在明確設定為 false 時才會注入 Twemoji。 |
format | String | 選擇最初傳回的圖片 URL 中的副檔名：png、jpg、webp 或 pdf。 |
full_screen | Boolean | 產生 URL 頁面整個高度的圖片。 |
google_fonts | String | 載入一個或多個 Google 字型，例如 Roboto|Open Sans。 |
headers | Object | 對 URL 截圖時新增自訂 HTTP 標頭。標頭僅限於所請求 URL 的來源以及任何 additional_header_origins。 |
identify_as_hcti | Boolean | 對 URL 截圖時，在頂層請求中新增 X-HCTI-SCREENSHOT: 1。 |
include_headers_on_subrequests | Boolean | 也將自訂的 headers 新增到同來源的子請求以及符合 additional_header_origins 的子請求。 |
jumbo_max_height | Integer | 巨無霸模式下的最大輸出高度，最高可達 80,000 像素。必須與 jumbo_max_width 一起設定，並會消耗額外的圖片額度。 |
jumbo_max_width | Integer | 巨無霸模式下的最大輸出寬度，最高可達 80,000 像素。必須與 jumbo_max_height 一起設定，並會消耗額外的圖片額度。 |
max_wait_ms | Integer | 設定等待截圖前的最大時間限制，範圍從 500 到 10000 毫秒。 |
media_type | String | 將 Chrome 設定為使用 screen 或 print CSS 媒體樣式渲染。 |
ms_delay | Integer | 產生圖片前的延遲時間。在等待 JavaScript 時很有用；從 500 毫秒開始。 |
pdf_options | Object | 使用頁面大小、邊距、縮放比例和背景列印來自訂 PDF 輸出。 |
proxy_id | String | 透過您組織設定的其中一個 HTTP 代理伺服器路由對外流量。適用於每月 10,000 張圖片或更高階的方案。 |
render_when_ready | Boolean | 等待 JavaScript 呼叫 ScreenshotReady() 後再產生圖片。 |
request_overrides | Array | 封鎖符合 URL 萬用字元模式和/或資源類型的瀏覽器網路請求。需要付費方案。 |
selector | String | 將圖片裁切到符合此 CSS 選擇器的元素，例如 section#complete-toolkit.container-lg。 |
storage_destination_id | String | 將渲染的檔案儲存到您組織設定的其中一個儲存目的地。適用於每月 10,000 張圖片或更高階的方案。 |
timezone | String | 使用 IANA 識別碼（例如 America/New_York）設定 Chrome 的時區。 |
transparent_background | Boolean | 設定為 true 以使用透明背景渲染。 |
viewport_height | Integer | 設定 Chrome 視窗的高度。使用任一尺寸時，必須同時設定兩個尺寸。 |
viewport_landscape | Boolean | 將 Chrome 視窗設定為橫向模式。 |
viewport_mobile | Boolean | 將 Chrome 視窗設定為模擬行動裝置。 |
viewport_touch | Boolean | 將 Chrome 視窗設定為支援觸控事件。 |
viewport_width | Integer | 設定 Chrome 視窗的寬度。使用任一尺寸時，必須同時設定兩個尺寸。 |
疑難排解
驗證錯誤
如果您收到驗證錯誤：
- 嘗試中斷並重新連線 MCP 伺服器，以觸發新的 OAuth 流程
- 確保您在瀏覽器中登入正確的 HTML/CSS to Image 帳戶
- 檢查 OAuth 視窗嘗試開啟時，彈出視窗是否遭到封鎖
權限錯誤
列出的工具可能需要您的連線不具備的權限。中斷並重新連線 HCTI，然後為目標組織核准所需的存取權限。重新整理現有的權杖不會新增權限。在存取權限變更之前，請勿重試被拒絕的操作。請參閱 MCP 授權。
速率限制錯誤
管理工具的限額與您組織的 REST 請求共用。重試受限的工具前請等待 60 秒；請參閱 速率限制。
連線問題
如果 MCP 伺服器無法連線：
- 確保您的網路允許對外的 HTTPS 連線
- 檢查 URL 是否完全為
https://mcp.hcti.io - 更新設定後重新啟動您的 AI 助理
圖片產生錯誤
如果圖片無法產生：
- 檢查您的帳戶在 儀表板 上是否有可用的圖片額度
- 確保 HTML 內容有效
- 對於 URL 截圖，請確認 URL 可公開存取
自動化平台
您也可以將 MCP 伺服器與自動化平台搭配使用：
Zapier
Zapier 有專用的 MCP 用戶端，可連線到 MCP 伺服器。這讓您可以在 Zapier 工作流程中使用 HTML/CSS to Image MCP 伺服器，而無需編寫程式碼。
Pipedream
Pipedream 支援 MCP 伺服器來建置無伺服器工作流程。連線 HTML/CSS to Image MCP 伺服器，以在您的 Pipedream 工作流程中自動化圖片產生。
MCP 伺服器也列在 Smithery 上。
需要協助嗎？
與真人交談。寄送電子郵件至 support@htmlcsstoimage.com，我們將協助您開始使用。