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 中设置

要在 Claude Code 中使用 MCP 服务器，请运行以下命令：

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 创建图像：

• “创建一个蓝色按钮的图像，上面写着‘立即订阅’，带有圆角和微妙的阴影”
• “生成一张带有渐变背景和标题‘你好，世界’的社交卡片”

对网站进行截图：

• “对 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	巨幅模式下最大输出高度，最高可达 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() 后再生成图像。
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，我们将很乐意帮助你开始使用。