# HTML/CSS to Image API

Рендерит HTML/CSS, снимает скриншоты сайтов и собирает картинки или PDF из шаблонов без локального браузера.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 7
- Автор: htmlcsstoimage
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/htmlcsstoimage/agent-plugins
- Обновлён: 2026-10-20
- HTML: https://affpapa.org/nevibecode/mcp/htmlcss-to-image-api

## Что делает

Сервер превращает HTML/CSS-разметку в изображения, умеет снимать скриншоты живых сайтов и заполнять переиспользуемые шаблоны данными для генерации картинок или PDF. Всё работает через размещённый HCTI MCP-сервер по адресу `https://mcp.hcti.io`, поэтому отдельный браузер агенту не нужен.

Подключение идёт через браузерный OAuth от HCTI: ключ API или токен доступа хранить не нужно. Для рендеринга через ClawHub-версию требуется аккаунт HCTI с доступными кредитами.

В пакете также есть отдельные скиллы — для генерации изображений и шаблонов, и отдельно для настройки динамических Open Graph картинок с интеграцией в метаданные сайта.

## Требования
- Удалённый сервер: `https://mcp.hcti.io`

## Установка

### Claude Code (родная платформа)

**Командой платформы: удалённый сервер**
```bash
claude mcp add --transport http html-css-to-image https://mcp.hcti.io
```

### Codex

**Командой платформы: удалённый сервер**
```bash
codex mcp add htmlcss-to-image-api --url https://mcp.hcti.io
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "htmlcss-to-image-api": {
            "url": "https://mcp.hcti.io"
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "htmlcss-to-image-api": {
            "type": "http",
            "url": "https://mcp.hcti.io"
        }
    }
}
```

### Gemini CLI

**Командой платформы: удалённый сервер**
```bash
gemini mcp add -t http htmlcss-to-image-api https://mcp.hcti.io
```

## Когда брать
- сделать скриншот живого сайта без запуска браузера
- собрать картинку или PDF из HTML/CSS-шаблона
- настроить динамические Open Graph-превью для страниц сайта
- заполнить сохранённый шаблон данными и получить готовое изображение

## Примеры запросов агенту
- Сделай скриншот сайта example.com и сохрани как PNG
- Собери PDF из шаблона отчёта с этими данными
- Настрой динамическую Open Graph-картинку для страницы блога

## Похожие
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16062
- [mcp-server-chart](https://affpapa.org/nevibecode/mcp/mcp-server-chart.md) — MCP-сервер · ★ 4402
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP-сервер · ★ 3450

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md