HTML/CSS to Image
官方一个MCP服务器，用于通过htmlcsstoimage.com从HTML和CSS生成图像或截取URL的屏幕截图。
你可以用 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，您可以打开、下载或分享。
您还可以让您的助手通过 管理 API 功能 配置代理、存储目标和自动 Open Graph 图像。这些操作需要额外的 OAuth 权限；API 密钥管理仅限 REST。
选择您的客户端
选择您的助手以获取设置说明和可复制的示例。
| 客户端 | 如何连接 |
|---|---|
| ChatGPT 与 Codex | 安装官方插件；在对话或编码任务中使用它。 |
| Claude 与 Claude Code | 从 Claude 连接器目录安装，或连接 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 IDE | 通过支持 OAuth 的 MCP 桥接连接 AI Assistant。 |
| OpenCode | 配置远程 MCP 服务器并从 CLI 授权。 |
| VS Code | 添加远程 HTTP 服务器并在 Copilot Agent 模式中使用其工具。 |
| Windsurf | 将 HCTI 连接到 Cascade 以进行截图和渲染。 |
| Zed | 将远程 MCP 服务器添加到 Agent Panel。 |
什么是 MCP？
模型上下文协议 允许助手调用外部工具。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 账户，查看所选组织和权限，然后返回助手。如有需要，打开 更多权限 选择额外的管理访问权限。某些客户端会在首次使用时自动提示；各个指南会显示如何显式连接。
要检查连接而不渲染图像，请询问：“使用 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，我们将帮助您入门。