HTML/CSS to Image

公式

HTML & CSSまたはURLのスクリーンショットから、htmlcsstoimage.comを使用して画像を生成するためのMCPサーバーです。

htmlcsstoimage.com で表示このMCPを試すスポンサー

HTML CSS To Image MCPで何ができますか？

HTML/CSSから画像を生成 — アシスタントにカスタムHTMLとCSSをcreate_imageで画像にレンダリングさせ、ビューポート、スケール、遅延、フォーマットを制御できます。
任意の公開URLのスクリーンショット — create_url_imageを使用してWebページや特定の要素をキャプチャし、セレクタ、ビューポート設定、Cookieバナーのブロックなどのオプションを指定できます。
テンプレート画像の作成 — 保存済みテンプレートにtemplate_idとtemplate_valuesを渡してcreate_templated_imageで変数を置換し、画像を生成します。
複数画像の一括生成 — create_batch_imagesを使用して、共通のデフォルト設定と画像ごとのバリエーションを指定し、1回のリクエストで最大25個の画像バリエーションを作成できます。
再利用可能なテンプレートの管理 — create_template、update_template、list_templatesを使用してテンプレートを保存、更新、一覧表示し、一貫性のある反復可能な画像デザインを実現します。

ドキュメント

MCPサーバー統合

Model Context Protocolを使用して、AIアシスタントで画像を生成します。

新機能

MCPサーバーは新機能です。ぜひフィードバックをお聞かせください！support@htmlcsstoimage.com までメールをお送りください。

MCPとは？

Model Context Protocol (MCP) は、AIアシスタントが外部ツールやサービスに接続できるようにするオープン標準です。当社のMCPサーバーを使用すると、コードを書くことなく、AIコーディングアシスタントから直接画像を生成できます。

希望する内容を説明するだけで、AIがHTML/CSS to Image APIを使用して画像を作成します。

MCPサーバーURL: 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	1回のリクエストで最大25枚の画像を作成します。`default_options` を設定し、各画像に `variations` を指定します。
get_max_batch_size	プランに基づいて、1回のバッチで作成できる最大画像数を確認します。

テンプレート管理

ツール	説明
create_template	変数置換を使用して画像を生成するための再利用可能なHTML/CSSテンプレートを保存します。
update_template	`template_id` と新しいコンテンツを指定して、既存のテンプレートを変更します。
list_templates	アカウント内の保存済みテンプレートをすべて表示します。リクエストごとに最大100件のテンプレートを返します。
list_template_versions	特定のテンプレートのバージョン履歴を表示します。

認証

MCPサーバーは認証にOAuthを使用します。初回接続時に、ブラウザが自動的に開き、HTML/CSS to Imageアカウントへのアクセスを承認します。手動での認証情報の設定は不要です。

Cursorのセットアップ

下のボタンをクリックして、CursorにHTML/CSS to Image MCPサーバーを自動インストールします：

または、以下の設定を .cursor/mcp.json ファイルに手動で追加します：

{
  "mcpServers": {
    "hcti": {
      "type": "http",
      "url": "https://mcp.hcti.io"
    }
  }
}

設定を保存した後、Cursorを再起動します。サーバーを初めて使用する際に、ブラウザ経由でのアクセス承認を求められます。

Claude Codeのセットアップ

Claude CodeでMCPサーバーを使用するには、次のコマンドを実行します：

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サーバーを追加するには：

VS Codeを開き、Cline設定 に移動します
MCPサーバー に移動します
サーバーを追加 をクリックして設定します：

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

または、ClineのMCP設定ファイルを ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json で直接編集します。

サーバーを初めて使用する際に、ブラウザ経由でのアクセス承認を求められます。

Zedのセットアップ

Zed はAI機能を備えた高性能コードエディタです。Zedの設定（~/.config/zed/settings.json）にMCPサーバーを追加します：

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

サーバーを初めて使用する際に、ブラウザ経由でのアクセス承認を求められます。

OpenCodeのセットアップ

OpenCode はオープンソースのAIコーディングアシスタントです。opencode.json 設定ファイルにMCPサーバーを追加します：

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

または、コマンドラインで追加することもできます：

opencode mcp add

サーバーを初めて使用する際に、ブラウザ経由でのアクセス承認を求められます。

自動化プラットフォーム

MCPサーバーは自動化プラットフォームでも使用できます：

Zapier

Zapierには、MCPサーバーに接続する専用のMCPクライアントがあります。これにより、コードを書かずにZapierワークフロー内でHTML/CSS to Image MCPサーバーを使用できます。

Zapier MCPクライアント統合

Pipedream

Pipedreamはサーバーレスワークフロー構築のためのMCPサーバーをサポートしています。HTML/CSS to Image MCPサーバーを接続して、Pipedreamワークフローで画像生成を自動化します。

Pipedream MCP統合

MCPサーバーは Smithery にも掲載されています。

プロンプト例

設定が完了すると、AIアシスタントに自然な言葉で画像生成を依頼できます。以下に例を示します：

HTMLから画像を作成：

「角が丸く、控えめな影が付いた『Subscribe Now』と書かれた青いボタンの画像を作成して」
「グラデーション背景と『Hello World』というタイトルのソーシャルカードを生成して」

ウェブサイトのスクリーンショット：

「高解像度用に device_scale を2に設定して https://stripe.com のスクリーンショットを撮って」
「セレクター『.pricing-grid』を使用して https://example.com/pricing の価格表をスクリーンショットして」

ソーシャルメディア画像の生成：

「グラデーション背景、『Launching Soon』というタイトル、当社のロゴが入ったTwitter/Xカード画像を作成して」
「Pythonに関するブログ記事用のOpen Graph画像を作成して」

画像の一括作成：

「それぞれ異なる背景色の製品カード画像のバリエーションを10個作成して」

テンプレートの操作：

「保存済みテンプレートを一覧表示して」
「『social-card』テンプレートを使用して、タイトルを『New Feature Release』に設定して画像を作成して」
「このHTML/CSSを『blog-header』というテンプレートとして保存して、再利用できるようにして」

ダッシュボードでテンプレートをデザインする場合は、テンプレートエディタのドキュメントが、ブロックの選択、変数の設定、MCPサーバーが template_values として渡す値の決定に役立ちます。

画像パラメータ

画像を作成する際の主なパラメータは次のとおりです：

パラメータ	型	説明
html	`String`	レンダリングするHTMLコンテンツ。`create_image` に必要です。
css	`String`	HTML用のCSSスタイル。
url	`String`	スクリーンショットするURL。`create_url_image` に必要です。

追加パラメータ

名前	型	説明
additional_header_origins	`Array`	特定の追加HTTPまたはHTTPSオリジンへのリクエストでカスタム `headers` を許可します。
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`	`Roboto\|Open Sans` などの1つ以上のGoogleフォントを読み込みます。
headers	`Object`	URLのスクリーンショット時にカスタムHTTPヘッダーを追加します。ヘッダーはリクエストされたURLのオリジンと任意の `additional_header_origins` に制限されます。
identify_as_hcti	`Boolean`	URLのスクリーンショット時にトップレベルリクエストに `X-HCTI-SCREENSHOT: 1` を追加します。
include_headers_on_subrequests	`Boolean`	同一オリジンのサブリクエストと `additional_header_origins` に一致するサブリクエストにもカスタム `headers` を追加します。
jumbo_max_height	`Integer`	ジャンボモードでの最大出力高さ（最大 `80,000` ピクセル）。`jumbo_max_width` と一緒に設定する必要があり、追加の画像クレジットを消費します。
jumbo_max_width	`Integer`	ジャンボモードでの最大出力幅（最大 `80,000` ピクセル）。`jumbo_max_height` と一緒に設定する必要があり、追加の画像クレジットを消費します。
max_wait_ms	`Integer`	スクリーンショットを撮る前に待機する最大時間制限を `500` から `10000` ミリ秒の範囲で設定します。
media_type	`String`	Chromeを `screen` または `print` CSSメディアスタイルでレンダリングするように設定します。
ms_delay	`Integer`	画像を生成する前の遅延時間。JavaScriptの待機に役立ちます。`500` ミリ秒から始めます。
pdf_options	`Object`	ページサイズ、余白、スケール、背景印刷でPDF出力をカスタマイズします。
proxy_id	`String`	組織で設定されたHTTPプロキシの1つを通じて送信トラフィックをルーティングします。月10,000画像プラン以上で利用可能です。
render_when_ready	`Boolean`	JavaScriptが `ScreenshotReady()` を呼び出すまで画像の生成を待機します。
selector	`String`	`section#complete-toolkit.container-lg` などのCSSセレクターに一致する要素に画像をトリミングします。
storage_destination_id	`String`	レンダリングされたファイルを組織で設定されたストレージ先の1つに保存します。月10,000画像プラン以上で利用可能です。
timezone	`String`	`America/New_York` などのIANA識別子でChromeのタイムゾーンを設定します。
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 であることを確認してください
設定を更新した後、AIアシスタントを再起動してください

画像生成エラー

画像の生成に失敗する場合：

アカウントにダッシュボードで利用可能な画像クレジットがあることを確認してください
HTMLコンテンツが有効であることを確認してください
URLスクリーンショットの場合、URLが公開アクセス可能であることを確認してください

ヘルプが必要ですか？

人間に相談してください。ご質問がある場合は、support@htmlcsstoimage.com までメールをお送りください。喜んでサポートいたします。