HTML/CSS to Image

Интеграция MCP-сервера

Генерируйте изображения с помощью ИИ-ассистентов, используя Model Context Protocol.

Новая функция

MCP-сервер — это новая функция. Мы будем рады услышать ваши отзывы! Напишите нам на support@htmlcsstoimage.com.

---

Что такое MCP?

Model Context Protocol (MCP) — это открытый стандарт, который позволяет ИИ-ассистентам подключаться к внешним инструментам и сервисам. С помощью нашего MCP-сервера вы можете генерировать изображения прямо из вашего ИИ-кодинг-ассистента без написания кода.

Просто опишите, что вам нужно, и ИИ использует HTML/CSS to Image API для создания изображения.

URL MCP-сервера: 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

Нажмите кнопку ниже, чтобы автоматически установить MCP-сервер HTML/CSS to Image в Cursor:

Или вручную добавьте следующую конфигурацию в ваш файл .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 Settings
2. Перейдите в MCP Servers
3. Нажмите Add Server и настройте:

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

Либо отредактируйте файл настроек MCP Cline напрямую по адресу ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json.

При первом использовании сервера вам будет предложено авторизовать доступ через браузер.

Настройка для Zed

Zed — это высокопроизводительный редактор кода с функциями ИИ. Добавьте MCP-сервер в настройки Zed (~/.config/zed/settings.json):

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

При первом использовании сервера вам будет предложено авторизовать доступ через браузер.

Настройка для OpenCode

OpenCode — это опенсорсный ИИ-кодинг-ассистент. Добавьте MCP-сервер в ваш файл конфигурации opencode.json:

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

Либо добавьте его через командную строку:

opencode mcp add

При первом использовании сервера вам будет предложено авторизовать доступ через браузер.

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

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

Zapier

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

Интеграция MCP-клиента Zapier

Pipedream

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

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

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

Примеры запросов

После настройки вы можете просить вашего ИИ-ассистента естественным образом генерировать изображения. Вот несколько примеров:

Создать изображение из HTML:

• «Создай изображение синей кнопки с текстом “Subscribe Now” с закруглёнными углами и лёгкой тенью»
• «Сгенерируй социальную карточку с градиентным фоном и заголовком “Hello World”»

Сделать скриншот сайта:

• «Сделай скриншот https://stripe.com с device_scale, установленным на 2, для высокого разрешения»
• «Сделай скриншот таблицы цен на https://example.com/pricing с помощью селектора “.pricing-grid”»

Создать изображения для соцсетей:

• «Создай карточку для Twitter/X с градиентным фоном, заголовком “Launching Soon” и нашим логотипом»
• «Сделай Open Graph изображение для моего поста в блоге о Python»

Пакетное создание изображений:

• «Создай 10 вариантов изображения карточки товара, каждый с разным цветом фона»

Работа с шаблонами:

• «Покажи мои сохранённые шаблоны»
• «Создай изображение с помощью моего шаблона “social-card” с заголовком “New Feature Release”»
• «Сохрани этот HTML/CSS как шаблон с названием “blog-header”, чтобы я мог переиспользовать его»

Если вы сначала создаёте шаблоны в дашборде, документация по редактору шаблонов поможет вам выбрать блоки, настроить переменные и решить, какие значения MCP-сервер должен передавать как template_values.

Параметры изображений

При создании изображений основными параметрами являются:

Параметр	Тип	Описание
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	Установите true, чтобы использовать системные шрифты эмодзи вместо Twemoji.
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().
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

Проблемы с подключением

Если MCP-сервер не подключается:

• Убедитесь, что ваша сеть разрешает исходящие HTTPS-соединения
• Проверьте, что URL точно соответствует https://mcp.hcti.io
• Перезапустите вашего ИИ-ассистента после обновления конфигурации

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

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

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

---

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

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