HTML/CSS to Image

MCP 伺服器整合

使用模型上下文協定，透過 AI 助理產生圖片。

新功能

MCP 伺服器是一項新功能。我們很期待聽到您的意見回饋！請寄電子郵件至 support@htmlcsstoimage.com。

---

什麼是 MCP？

模型上下文協定 (MCP) 是一項開放標準，允許 AI 助理連接到外部工具和服務。透過我們的 MCP 伺服器，您可以直接從 AI 程式設計助理產生圖片，無需編寫任何程式碼。

只要描述您想要的内容，AI 就會使用 HTML/CSS to Image API 為您建立圖片。

MCP 伺服器 URL： mcp.hcti.io

可用工具

MCP 伺服器提供以下工具：

圖片建立

工具	說明
create_image	從 HTML 和 CSS 產生圖片。支援所有標準參數，例如 device_scale、viewport_width、viewport_height、ms_delay 等。
create_url_image	對任何公開 URL 擷取螢幕截圖。包含選擇器、視窗設定和 Cookie 橫幅封鎖等選項。
create_templated_image	使用已儲存的範本產生圖片。傳入 template_id 和 template_values 以替換範本中的變數。
create_batch_images	在單一請求中建立最多 25 張圖片。設定 default_options 並為每張圖片提供 variations。
get_max_batch_size	根據您的方案，檢查單一批次中可建立的最大圖片數量。

範本管理

工具	說明
create_template	儲存可重複使用的 HTML/CSS 範本，用於透過變數替換產生圖片。
update_template	透過提供 template_id 和新內容來修改現有範本。
list_templates	檢視帳戶中所有已儲存的範本。每次請求最多傳回 100 個範本。
list_template_versions	檢視特定範本的版本歷史記錄。

驗證

MCP 伺服器使用 OAuth 進行驗證。當您首次連線時，瀏覽器會自動開啟以授權存取您的 HTML/CSS to Image 帳戶。無需手動設定憑證。

Cursor 設定

按一下下方按鈕，即可在 Cursor 中自動安裝 HTML/CSS to Image MCP 伺服器：

或者手動將以下設定新增到您的 .cursor/mcp.json 檔案：

{
  "mcpServers": {
    "hcti": {
      "type": "http",
      "url": "https://mcp.hcti.io"
    }
  }
}

儲存設定後重新啟動 Cursor。首次使用伺服器時，系統會提示您透過瀏覽器授權存取。

Claude Code 設定

若要將 MCP 伺服器與 Claude Code 搭配使用，請執行以下指令：

claude mcp add hcti --transport http https://mcp.hcti.io

若要驗證伺服器是否已新增：

claude mcp list

首次使用伺服器時，系統會提示您透過瀏覽器授權存取。

Claude Desktop 設定

Claude Desktop（獨立應用程式）也支援 MCP 伺服器。編輯您的 Claude Desktop 設定檔：

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json

Windows： %APPDATA%\Claude\claude_desktop_config.json

新增以下設定：

{
  "mcpServers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

儲存設定後重新啟動 Claude Desktop。首次使用伺服器時，系統會提示您透過瀏覽器授權存取。

Windsurf 設定

Windsurf（由 Codeium 開發）支援 MCP 伺服器。將以下內容新增到您的 ~/.codeium/windsurf/mcp_config.json 檔案：

{
  "mcpServers": {
    "hcti": {
      "serverUrl": "https://mcp.hcti.io"
    }
  }
}

更新設定後重新啟動 Windsurf。首次使用伺服器時，系統會提示您透過瀏覽器授權存取。

Cline（VS Code）設定

Cline 是 VS Code 中受歡迎的自動化程式設計代理。若要新增 MCP 伺服器：

1. 開啟 VS Code 並前往 Cline 設定
2. 導覽至 MCP 伺服器
3. 按一下 新增伺服器 並進行設定：

{
  "hcti": {
    "url": "https://mcp.hcti.io"
  }
}

或者，直接編輯您的 Cline MCP 設定檔，路徑為 ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json。

首次使用伺服器時，系統會提示您透過瀏覽器授權存取。

Zed 設定

Zed 是一款具備 AI 功能的高效能程式碼編輯器。將 MCP 伺服器新增到您的 Zed 設定（~/.config/zed/settings.json）：

{
  "context_servers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

首次使用伺服器時，系統會提示您透過瀏覽器授權存取。

OpenCode 設定

OpenCode 是一款開源的 AI 程式設計助理。將 MCP 伺服器新增到您的 opencode.json 設定檔：

{
  "mcp": {
    "hcti": {
      "type": "remote",
      "url": "https://mcp.hcti.io",
      "enabled": true
    }
  }
}

或者，透過指令列新增：

opencode mcp add

首次使用伺服器時，系統會提示您透過瀏覽器授權存取。

自動化平台

您也可以將 MCP 伺服器與自動化平台搭配使用：

Zapier

Zapier 有專用的 MCP 用戶端，可連接到 MCP 伺服器。這讓您可以在 Zapier 工作流程中使用 HTML/CSS to Image MCP 伺服器，無需編寫程式碼。

Zapier MCP 用戶端整合

Pipedream

Pipedream 支援 MCP 伺服器，用於建置無伺服器工作流程。連接 HTML/CSS to Image MCP 伺服器，即可在 Pipedream 工作流程中自動化圖片產生。

Pipedream MCP 整合

MCP 伺服器也列在 Smithery 上。

範例提示

設定完成後，您可以自然地要求 AI 助理產生圖片。以下是一些範例：

從 HTML 建立圖片：

• 「建立一張藍色按鈕的圖片，上面寫著『立即訂閱』，具有圓角和微妙的陰影」
• 「產生一張具有漸層背景和標題『Hello World』的社交卡片」

擷取網站螢幕截圖：

• 「對 https://stripe.com 擷取螢幕截圖，並將 device_scale 設為 2 以獲得高解析度」
• 「使用選擇器『.pricing-grid』對 https://example.com/pricing 的定價表格擷取螢幕截圖」

產生社交媒體圖片：

• 「建立一張 Twitter/X 卡片圖片，具有漸層背景、標題『即將推出』和我們的標誌」
• 「為我關於 Python 的部落格文章製作一張 Open Graph 圖片」

批次建立圖片：

• 「建立 10 張產品卡片圖片的變體，每張使用不同的背景顏色」

使用範本：

• 「列出我儲存的範本」
• 「使用我的『social-card』範本建立圖片，並將標題設為『新功能發布』」
• 「將此 HTML/CSS 儲存為名為『blog-header』的範本，以便我可以重複使用」

如果您先在儀表板中設計範本，範本編輯器文件 可以幫助您選擇區塊、設定變數，並決定 MCP 伺服器應傳入哪些值作為 template_values。

圖片參數

建立圖片時，主要參數如下：

參數	類型	說明
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	設定為 true 以使用原生表情符號字型，而非 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	Jumbo 模式下的最大輸出高度，最高可達 80,000 像素。必須與 jumbo_max_width 一起設定，並會消耗額外的圖片額度。
jumbo_max_width	Integer	Jumbo 模式下的最大輸出寬度，最高可達 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() 後再產生圖片。
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 視窗嘗試開啟時，彈出視窗是否未被封鎖

連線問題

如果 MCP 伺服器無法連線：

• 確保您的網路允許對外的 HTTPS 連線
• 檢查 URL 是否完全符合 https://mcp.hcti.io
• 更新設定後，請重新啟動您的 AI 助手

圖片生成錯誤

如果圖片生成失敗：

• 檢查您的帳戶在 儀表板 上是否有可用的圖片額度
• 確保 HTML 內容有效
• 對於 URL 截圖，請確認 URL 是可公開存取的

---

需要協助嗎？

歡迎與真人聯繫。如有任何問題，請寄電子郵件至 support@htmlcsstoimage.com，我們將很樂意協助您開始使用。