API ВЕГА

HTML/CSS to Image API для AI-агентов

Позволяет AI-агентам делать снимки работающих сайтов, преобразовывать HTML/CSS в изображения и заполнять многоразовые шаблоны с сохранением результата в виде изображений или PDF — без необходимости управлять браузером.

Этот репозиторий — переносимый пакет плагинов для агентов с манифестами для отдельных клиентов. Он предназначен для работы с размещённым HCTI MCP-сервером по адресу https://mcp.hcti.io. Для аутентификации используется браузерный OAuth-процесс HCTI; в этом репозитории не хранятся API-ключи и токены доступа.

Структура репозитория

ПутьНазначение
plugin.jsonПереносимый манифест Agent Plugins.
mcp.jsonПереносимая конфигурация MCP.
.mcp.jsonКонфигурация MCP для Claude Code, GitHub Copilot и Grok.
llms-install.mdИнструкции по установке для агентов: Cline и других MCP-клиентов.
.codex-plugin/plugin.jsonМанифест нативного плагина ChatGPT и Codex.
.app.jsonСвязывает пакет с официальным опубликованным плагином OpenAI.
.claude-plugin/plugin.jsonМанифест плагина Claude Code.
.cursor-plugin/plugin.jsonМанифест Cursor Marketplace.
.grok-plugin/plugin.jsonМанифест маркетплейса Grok Build.
gemini-extension.jsonМанифест расширения Gemini CLI.
kimi.plugin.jsonМанифест плагина Kimi Code.
skills/hcti-image-generation/Инструкции по созданию изображений и работе с шаблонами.
skills/hcti-open-graph-images/Инструкции по настройке динамических изображений Open Graph.
clawhub/html-css-to-image/Отдельный навык ClawHub для рендеринга через OAuth/MCP.
clawhub/hcti-open-graph-images/Отдельный навык ClawHub для работы с Open Graph через OAuth/MCP.

ChatGPT и Codex

Установите официальный плагин HTML/CSS to Image из каталога плагинов в ChatGPT или Codex. Это рекомендуемый вариант интеграции с OpenAI: он использует зарегистрированное MCP-подключение HCTI с браузерной OAuth-аутентификацией.

В нативном манифесте .codex-plugin/plugin.json упакован общий навык HCTI, а .app.json связывает пакет с опубликованным плагином OpenAI.

Kimi Code

Установите плагин напрямую из GitHub в Kimi Code:

/plugins install https://github.com/htmlcsstoimage/agent-plugins
/reload

Выполните /mcp-config login hcti и завершите авторизацию в браузере. Затем запустите /mcp, чтобы убедиться, что инструменты HCTI подключены.

Чтобы проверить локальную копию репозитория, выполните /plugins install /path/to/agent-plugins. Kimi копирует установленные плагины в свой каталог плагинов, поэтому после изменения локальных исходных файлов установите плагин повторно.

Gemini CLI

Установите расширение напрямую из GitHub:

gemini extensions install https://github.com/htmlcsstoimage/agent-plugins

Перезапустите Gemini CLI и выполните /extensions list, чтобы проверить, что расширение включено. Затем запустите /mcp auth hcti и завершите авторизацию в браузере. Выполните /mcp list, чтобы убедиться, что инструменты HCTI подключены. Gemini CLI автоматически обнаруживает включённые в пакет Agent Skills HCTI.

Чтобы проверить локальную копию репозитория во время разработки, выполните gemini extensions link /path/to/agent-plugins, перезапустите Gemini CLI и проверьте расширение командой /extensions list.

GitHub Copilot

Установка локальной копии репозитория

Установите этот репозиторий напрямую:

copilot plugin install /path/to/agent-plugins

Запустите Copilot CLI и выполните /plugin list, /skills list и /mcp, чтобы убедиться, что плагин, навык и сервер HCTI доступны. Подключите hcti через /mcp и завершите авторизацию в браузере.

Cline

Передайте Cline файл llms-install.md, чтобы настроить подключение к размещённому серверу HCTI, или добавьте сервер вручную как удалённый сервер Streamable HTTP по адресу https://mcp.hcti.io. Завершите OAuth-авторизацию в браузере; API-ключ и установка локального сервера не требуются.

Claude Code

Установка из сообщества Claude

После публикации плагина добавьте маркетплейс сообщества Anthropic и установите плагин:

/plugin marketplace add anthropics/claude-plugins-community
/plugin install html-css-to-image@claude-community
/reload-plugins

Выполните /mcp, выберите hcti и завершите авторизацию в браузере. Claude может автоматически вызывать навык HCTI, когда это уместно. Навык также доступен по команде /html-css-to-image:hcti-image-generation.

Проверка локальной копии репозитория

Проверьте и загрузите этот репозиторий напрямую:

claude plugin validate . --strict
claude --plugin-dir .

В тестовом сеансе выполните /mcp, чтобы подключить hcti, а затем отправьте запрос на создание изображения. После изменения манифеста, навыка или конфигурации MCP используйте /reload-plugins.

Cursor

Установка из Cursor Marketplace

После публикации плагина откройте в Cursor раздел Customize, найдите HTML/CSS to Image API, выберите Install и укажите нужную область установки.

Откройте настройки MCP в Cursor, найдите hcti, выберите Connect и завершите авторизацию в браузере. После подключения начните новый чат Agent, чтобы инструменты HCTI стали доступны.

Проверка локальной копии репозитория

Скопируйте этот репозиторий в локальный каталог плагинов Cursor:

mkdir -p ~/.cursor/plugins/local
cp -R /path/to/agent-plugins ~/.cursor/plugins/local/html-css-to-image

Перезапустите Cursor или выполните Developer: Reload Window, затем убедитесь, что HTML/CSS to Image API появился в разделе Customize. Перед проверкой запроса на создание изображения подключите MCP-сервер hcti в настройках MCP Cursor.

Для следующего цикла проверки замените скопированный каталог html-css-to-image актуальной локальной копией репозитория и перезагрузите Cursor.

Grok Build

Маркетплейс плагинов xAI ссылается на этот репозиторий с указанием конкретного коммита. Манифест Grok использует общий корневой навык, конечную точку MCP и ресурсы.

Когда запись появится в маркетплейсе, установите HTML/CSS to Image в Grok Build, подключите MCP-сервер hcti по запросу и завершите авторизацию в браузере.

ClawHub / OpenClaw

Навык ClawHub поддерживает рендеринг HTML/CSS, создание снимков сайтов, вывод в формате PDF и рендеринг сохранённых шаблонов через размещённый MCP-сервер. Пользователи подключаются к https://mcp.hcti.io с помощью браузерной OAuth-аутентификации; API-ключи не требуются. Для рендеринга необходим аккаунт HCTI с доступными кредитами.

Отдельный навык Open Graph создаёт постоянные динамические конфигурации для социальных превью и добавляет URL изображений в метаданные сайта. Он включает справочную информацию по интеграции с веб-страницами и использует то же OAuth-подключение.

Эти отдельные дистрибутивы находятся за пределами skills/, чтобы другие клиенты не обнаруживали дублирующиеся навыки. В инструкциях по настройке описана регистрация сервера в OpenClaw и прохождение OAuth-аутентификации; одна лишь установка навыка не создаёт подключение. Публикуйте только папку навыка, а не весь репозиторий плагина.

Находясь в корневой папке этого репозитория и используя актуальную версию ClawHub CLI, выполните:

clawhub login
clawhub skill publish ./clawhub/html-css-to-image \
  --slug html-css-to-image \
  --name "HTML/CSS to Image" \
  --categories integrations,creative \
  --topics "screenshots,html,css,pdf,images" \
  --dry-run

Отдельно проверьте предварительный просмотр навыка Open Graph:

clawhub skill publish ./clawhub/hcti-open-graph-images \
  --slug hcti-open-graph-images \
  --name "HTML/CSS to Image — Dynamic Open Graph Images" \
  --categories integrations,development \
  --topics "open-graph,social-previews,seo,images,html" \
  --dry-run

Проверьте каждый предварительный просмотр, а затем запустите соответствующую команду публикации без --dry-run. Чтобы опубликовать навык от имени организации, добавьте --owner в обе команды; в противном случае владельцем записи станет пользователь, выполнивший вход. Публикация навыка выполняется отдельно от отправки коммита в этот репозиторий, а выпуск новых версий может задержаться из-за автоматической проверки.

ClawHub распространяет опубликованные навыки по лицензии MIT-0. Перед первой публикацией ознакомьтесь с её условиями; на размещённый сервис HCTI распространяются собственные условия. См. публикацию в ClawHub и формат навыков.

Доступные возможности

Основные инструменты для рендеринга и работы с шаблонами:

ИнструментНазначение
create_imageПреобразует HTML и CSS в изображение или PDF.
create_url_imageСоздаёт снимок общедоступного URL или выбранного элемента страницы.
create_templated_imageРендерит сохранённый шаблон HCTI с заданными значениями переменных.
create_batch_imagesСоздаёт несколько вариантов изображения в одном запросе.
get_max_batch_sizeПроверяет текущий лимит размера пакета для аккаунта.
create_templateСохраняет многоразовый шаблон HTML/CSS.
update_templateОбновляет существующий шаблон.
list_templatesВыводит список шаблонов в авторизованном аккаунте.
list_template_versionsПоказывает историю версий шаблона.

Управление ресурсами с помощью MCP

Помимо генерации изображений, MCP-сервер HCTI может управлять вспомогательными ресурсами в подключённой организации:

РесурсИнструментыНазначение
Использованиеcheck_usageПроверить текущее использование изображений и лимиты организации.
Конфигурации Open Graphcreate_og_config, update_og_config, get_og_config, list_og_configs, delete_og_configУправлять динамическими изображениями для предпросмотра страниц сайта в социальных сетях.
Проксиcreate_proxy, update_proxy, get_proxy, list_proxies, delete_proxyУправлять прокси, используемыми HCTI при обращении к исходным сайтам.
Места храненияcreate_storage_destination, update_storage_destination, get_storage_destination, list_storage_destinations, delete_storage_destination, get_aws_storage_external_idУправлять внешними местами хранения для сгенерированных изображений и получать внешний идентификатор, необходимый для настройки AWS.

Динамические конфигурации изображений Open Graph — особенно полезная точка интеграции. Агент может найти существующий шаблон HCTI, передать в его переменные метаданные страницы, при необходимости выбрать настроенный прокси или место хранения и создать постоянную конфигурацию для выдачи кэшированных изображений для социальных сетей.

Инструменты для работы с ресурсами используют организацию HCTI, выбранную при авторизации через OAuth. Доступность инструментов зависит от разрешений, предоставленных этому подключению. Получение списка ресурсов и просмотр данных доступны только для чтения; операции создания, обновления и удаления изменяют настройки учётной записи. В частности, update_og_config заменяет конфигурацию целиком, поэтому перед обновлением агенту следует получить текущую конфигурацию и сохранить все неизменяемые параметры.

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

  • «Создай изображение Open Graph размером 1200×630 с этим заголовком и цветовой палитрой».

  • «Сделай снимок таблицы с тарифами на https://example.com/pricing».

  • «Покажи список моих шаблонов HCTI и создай изображение по шаблону social-card, используя этот заголовок».

  • «Создай пять вариантов карточки товара с разными акцентными цветами».

  • «Создай динамическую конфигурацию Open Graph для https://example.com на основе моего шаблона social-card и передавай в него заголовок и описание из метаданных страницы».

Обработка данных

Запросы, отправленные через плагин, обрабатываются размещённым сервисом HTML/CSS to Image. В этот сервис передаются HTML, CSS, значения шаблонов, целевые URL, параметры рендеринга и конфигурация ресурсов, предоставленные HCTI; постоянные ресурсы хранятся в подключённой организации HCTI. Не передавайте файлы cookie, заголовки авторизации, закрытые URL и другие секретные данные, если только вы намеренно не настраиваете авторизованный процесс рендеринга и не понимаете, что эти данные будут обрабатываться HCTI.

Лицензия и условия использования сервиса

Файлы плагина в этом репозитории распространяются по условиям лицензии MIT. Лицензия распространяется на исходный код, конфигурацию и документацию этого репозитория, но не на размещённый сервис HTML/CSS to Image. Использование сервиса регулируется отдельными Условиями использования и Политикой конфиденциальности.

Проверка

Запустите проверки репозитория:

node scripts/validate-template.mjs

Проверьте адаптер Claude с помощью официального строгого валидатора Claude Code:

claude plugin validate . --strict

Проверенная совместимость

Среда выполнения плагина, общие навыки HCTI, обнаружение MCP и браузерный процесс OAuth были протестированы с Claude Code 2.1.258. Для строгой проверки метаданных каталога, например privacyPolicyUrl, используйте Claude Code версии 2.1.281 или новее.

Адаптер Grok проверяется каталогом маркетплейса xAI и проверками индекса компонентов для зафиксированного коммита.

Реестр HOL

Наши плагины для AI-агентов зарегистрированы в реестре плагинов HOL. Там можно ознакомиться с инструкциями по установке, результатами проверки безопасности, происхождением плагинов и текущей оценкой доверия.

Документация и поддержка