HTML/CSS to Image

Интеграция MCP-сервера HTML/CSS to Image

Делайте скриншоты веб-сайтов, рендерите изображения или PDF и управляйте ресурсами вашей организации прямо из вашего ИИ-ассистента.

Введение

Независимо от того, какой ИИ-инструмент или агент вы используете, вы можете подключить его к HTML/CSS to Image через MCP. Дайте любому совместимому ассистенту публичный URL или HTML/CSS и попросите его сделать скриншот, отрендерить PDF или создать изображения из ваших сохранённых шаблонов.

• Начните бесплатно. Бесплатный аккаунт HCTI работает с любой интеграцией. Создание изображений использует доступные кредиты изображений вашей организации так же, как и API.
• Входите безопасно. Авторизуйте свой аккаунт через OAuth в браузере, без копирования API-ключей в вашего ассистента.
• Никакой браузерной инфраструктуры для управления. HCTI обрабатывает рендеринг и возвращает размещённый URL, который вы можете открыть, скачать или поделиться.

Вы также можете попросить вашего ассистента настроить прокси, места хранения и автоматические изображения Open Graph через возможности Management API. Эти операции требуют дополнительных разрешений OAuth; управление API-ключами доступно только через REST.

Выберите своего клиента

Выберите своего ассистента для получения инструкций по настройке и примеров для копирования.

Клиент	Как подключить
ChatGPT и Codex	Установите официальный плагин; используйте его в разговоре или в задаче кодирования.
Claude и Claude Code	Установите из каталога коннекторов Claude или подключите Claude Code.
Cline	Подключите Streamable HTTP сервер из расширения Cline.
Cursor	Добавьте HCTI в Cursor Agent с помощью кнопки установки или конфигурации MCP.
Gemini CLI	Подключите Gemini CLI с удалённым HTTP-сервером и входом через браузер.
GitHub Copilot	Подключите Copilot CLI из вашего терминала.
Grok	Используйте плагин HCTI или прямое MCP-подключение в Grok Build.
JetBrains IDE	Подключите AI Assistant через MCP-мост с поддержкой OAuth.
OpenCode	Настройте удалённый MCP-сервер и авторизуйте его из CLI.
VS Code	Добавьте удалённый HTTP-сервер и используйте его инструменты в режиме Copilot Agent.
Windsurf	Подключите HCTI к Cascade для скриншотов и рендеринга.
Zed	Добавьте удалённый MCP-сервер на панель агента.

Что такое MCP?

Протокол Model Context Protocol позволяет ассистентам вызывать внешние инструменты. Размещённый MCP-сервер HCTI рендерит HTML/CSS или публичный URL, предоставленный вашим ассистентом, и возвращает результат. Вам не нужно запускать рендеринговый браузер самостоятельно.

URL MCP-сервера: 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	CSS-стили для вашего HTML.
url	String	URL для скриншота. Обязателен для create_url_image.

Дополнительные параметры

Имя	Тип	Описание
additional_header_origins	Array	Разрешить пользовательские headers в запросах к конкретным дополнительным источникам HTTP или HTTPS.
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-изображения внедряют Twemoji только при явном установке значения false.
format	String	Выберите расширение файла в первоначально возвращаемом URL-адресе изображения: png, jpg, webp или pdf.
full_screen	Boolean	Создает изображение всей высоты страницы URL.
google_fonts	String	Загружает один или несколько шрифтов Google, например Roboto|Open Sans.
headers	Object	Добавляет пользовательские HTTP-заголовки при создании скриншота URL. Заголовки ограничены источником запрошенного URL и любыми additional_header_origins.
identify_as_hcti	Boolean	Добавляет X-HCTI-SCREENSHOT: 1 к запросу верхнего уровня при создании скриншота URL.
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 для рендеринга с использованием стилей CSS-медиа screen или print.
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	Устанавливает часовой пояс Chrome с идентификатором IANA, например America/New_York.
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
• Перезапустите вашего ИИ-ассистента после обновления конфигурации

Ошибки генерации изображений

Если изображения не генерируются:

• Проверьте, что в вашей учетной записи есть доступные кредиты на изображения на панели управления
• Убедитесь, что HTML-контент корректен
• Для скриншотов URL проверьте, что URL публично доступен

Платформы автоматизации

Вы также можете использовать MCP-сервер с платформами автоматизации:

Zapier

Zapier имеет выделенный MCP-клиент, который подключается к MCP-серверам. Это позволяет использовать MCP-сервер HTML/CSS to Image в рабочих процессах Zapier без написания кода.

Клиент MCP Zapier

Pipedream

Pipedream поддерживает MCP-серверы для создания бессерверных рабочих процессов. Подключите MCP-сервер HTML/CSS to Image для автоматизации генерации изображений в ваших рабочих процессах Pipedream.

Интеграция MCP Pipedream

MCP-сервер также указан на Smithery.

Нужна помощь?

Поговорите с человеком. Напишите на support@htmlcsstoimage.com, и мы поможем вам начать.