HTML/CSS to Image

HTML/CSS to Image MCP Server The HTML/CSS to Image MCP server lets AI assistants create production-ready images, website screenshots, and PDFs through…

От сообществаСбоиБез входаГлобальныйБесплатноМожет изменять данные

Что умеет

  • Update Template: Updates a specified template with the given content
  • Create Template: Creates a template from the given content
  • Create Batch Images: Create a batch of up to 25 images

Какие данные видит

Нужен ли аккаунт

Не нужен: сервер работает без входа

HTML/CSS to Image MCP Server

The HTML/CSS to Image MCP server lets AI assistants create production-ready images, website screenshots, and PDFs through natural-language instructions.

Use it to:

  • Render HTML and CSS into PNG, JPG, WebP, or PDF
  • Capture screenshots of public URLs
  • Generate images from reusable templates and variables
  • Create batches of up to 25 image variations
  • Create, update, list, and version image templates
  • Configure viewport size, device scale, selectors, render delays, and other rendering options

Authentication is handled through OAuth, so users can securely connect their HTML/CSS to Image account without manually configuring API credentials.

MCP endpoint: https://mcp.hcti.io
Documentation: docs.htmlcsstoimage.com/integrations/mcp
Website: htmlcsstoimage.com

Как подключить

Как подключить HTML/CSS to Image к Claude

Адрес сервера, который нужно вставить в настройках Claude:

https://htmlcsstoimage.run.tools

  1. Откройте Claude (сайт claude.ai или приложение для компьютера).
  2. Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
  3. Нажмите Добавить пользовательский коннектор (Add custom connector).
  4. Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
  5. В чате нажмите + → Коннекторы и включите новый коннектор.

Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

Авторизация

После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

Как подключить HTML/CSS to Image к ChatGPT

Адрес сервера, который нужно вставить в настройках ChatGPT:

https://htmlcsstoimage.run.tools

  1. Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
  2. Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
  3. Откройте Настройки → Коннекторы и нажмите Создать (Create).
  4. Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
  5. В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
  6. В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

Авторизация

При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

Как подключить HTML/CSS to Image к Cursor

Адрес сервера, который нужно вставить в настройках Cursor:

https://htmlcsstoimage.run.tools

Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

Вручную:

  1. В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
  2. Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
  3. Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

Авторизация

Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

Список инструментов сервера (12)

Технические названия из tools/list. Нужны только разработчикам.

update_templateUpdates a specified template with the given content
create_templateCreates a template from the given content
create_batch_imagesCreate a batch of up to 25 images
list_storage_destinationsLists storage destinations available to the current organization. Returns opaque IDs and non-sensitive metadata only; connection details and credentials are never included.
create_imageCreates an image from the given content
list_proxiesLists proxies available to the current organization. Returns opaque IDs and non-sensitive metadata only; connection details and credentials are never included.
get_max_batch_sizeGet the maximum number of images that can be created in a single batch according to the user's plan.
list_template_versionsList template versions for a specified template_id
check_usageChecks the current usage of images against the account's usage limits
list_templatesList templates
create_templated_imageCreates an image using a specified Template
create_url_imageCreates an image from the given URL