HTML/CSS to Image

HTML/CSS to Image MCPサーバーの統合

ウェブサイトのスクリーンショットを撮影し、画像やPDFをレンダリングし、組織のリソースをAIアシスタントから直接管理できます。

はじめに

どのAIツールやエージェントを使用していても、MCPを通じてHTML/CSS to Imageに接続できます。対応するアシスタントに公開URLやHTML/CSSを渡し、スクリーンショットの撮影、PDFのレンダリング、保存済みテンプレートからの画像作成を依頼できます。

• 無料で始められます。 無料のHCTIアカウントはどの統合でも利用できます。画像の作成には、APIと同様に組織の利用可能な画像クレジットが使用されます。
• 安全にサインイン。 ブラウザでOAuthを通じてアカウントを認証します。APIキーをアシスタントにコピーする必要はありません。
• ブラウザインフラストラクチャの管理は不要。 HCTIがレンダリングを処理し、開いたり、ダウンロードしたり、共有したりできるホスト型URLを返します。

また、アシスタントにプロキシ、ストレージ先、自動Open Graph画像の設定をManagement API機能を通じて依頼することもできます。これらの操作には追加のOAuth権限が必要です。APIキーの管理はRESTのみです。

クライアントを選択

セットアップ手順とコピー可能な例については、お使いのアシスタントを選択してください。

クライアント	接続方法
ChatGPT & Codex	公式プラグインをインストールし、会話やコーディングタスクで使用します。
Claude & Claude Code	Claude Connectors Directoryからインストールするか、Claude Codeを接続します。
Cline	Cline拡張機能からStreamable HTTPサーバーを接続します。
Cursor	インストールボタンまたはMCP設定でHCTIをCursor Agentに追加します。
Gemini CLI	リモートHTTPサーバーとブラウザサインインでGemini CLIを接続します。
GitHub Copilot	ターミナルからCopilot CLIを接続します。
Grok	Grok BuildでHCTIプラグインまたは直接MCP接続を使用します。
JetBrains IDEs	OAuth対応のMCPブリッジを通じてAI Assistantを接続します。
OpenCode	リモートMCPサーバーを設定し、CLIから認証します。
VS Code	リモートHTTPサーバーを追加し、Copilot Agentモードでツールを使用します。
Windsurf	CascadeにHCTIを接続して、スクリーンショットとレンダリングを行います。
Zed	Agent PanelにリモートMCPサーバーを追加します。

MCPとは？

Model Context Protocolにより、アシスタントが外部ツールを呼び出せるようになります。HCTIのホスト型MCPサーバーは、アシスタントが提供するHTML/CSSまたは公開URLをレンダリングし、結果を返します。自分でレンダリングブラウザを実行する必要はありません。

MCPサーバーURL: https://mcp.hcti.io

トランスポート: Streamable HTTP

認証: OAuth

当社のエージェントプラグインには、HCTIを使用するためのワークフローガイダンスも含まれています。そのプラグインをサポートするクライアントでは、プラグインをインストールすると接続とアシスタント向けの指示の両方が提供されます。直接MCP接続では、以下のツールにアクセスできます。

利用可能なツール

これらのコアツールは、すべてのMCPクライアントで動作します。アクセスは接続に対して承認された権限に依存します。アシスタントにHCTIを名前で使用するよう依頼してください。

アカウント使用状況

ツール	機能
check_usage	画像をレンダリングせずに、使用済み画像数、画像許容量、次のリセット日、超過設定を確認します。

スクリーンショットとレンダリング

ツール	機能
create_image	HTML/CSSをPNG、JPG、WebP、またはPDFとしてレンダリングします。device_scale、viewport_width、viewport_height、ms_delayをサポートします。
create_url_image	ビューポート設定とクッキーバナー遮断機能を使用して、公開ページまたはCSSセレクターをキャプチャします。
create_templated_image	template_idとtemplate_valuesを使用して保存済みテンプレートをレンダリングします。
create_batch_images	共有のdefault_optionsと画像ごとのバリエーションを使用してバリエーションをレンダリングします。
get_max_batch_size	バッチを準備する前にアカウントのバッチ制限を確認します。

フィードバック

ツール	機能
submit_feedback	バグの報告、機能のリクエスト、HCTIチームへの改善提案を行います。フィードバックツールリファレンスを参照してください。

テンプレート管理

ツール	機能
create_template	HTML/CSSを変数付きの再利用可能なテンプレートとして保存します。
update_template	IDで既存のテンプレートを更新します。
list_templates	接続されたアカウント内のテンプレートを検索します。
list_template_versions	テンプレートのバージョン履歴を検査します。

画像オプションと再利用可能なデザインについては、レンダリングパラメータとテンプレートエディタを参照してください。完全なツールリファレンスには、プロキシ、ストレージ先、Open Graph設定、必要な権限も含まれています。

認証

HCTIを追加した後、クライアントの接続またはログインアクションを使用し、ブラウザで認証を完了します。使用したいテンプレートとクレジットがあるHCTIアカウントにサインインし、選択した組織と権限を確認してから、アシスタントに戻ります。必要に応じて、追加の管理アクセスを選択するにはその他の権限を開きます。一部のクライアントでは、最初の使用時に自動的にプロンプトが表示されます。個別のガイドでは、明示的に接続する方法が示されています。

画像をレンダリングせずに接続を確認するには、次のように依頼します：「HCTIを使用して、私の画像使用状況とアカウント制限を確認してください。」 check_usageツールにはusage:readが必要で、画像をレンダリングせずに使用状況と制限を返します。get_max_batch_sizeにもusage:readが必要です。レンダリングリクエストはHCTIアカウントの画像許容量を使用します。アシスタントのサブスクリプションは別途です。

プロンプト例

ウェブサイトのスクリーンショットを撮る方法

Use HTML/CSS to Image to screenshot https://example.com as a PNG.
Set viewport_width to 1440 and device_scale to 1. Return the image URL.

返されたURLを開いてキャプチャを確認します。自分のサイトの一部だけをキャプチャするには、そのページに実際に存在する.pricing-gridなどのCSSセレクターを指定します。HCTIはホスト型サービスからURLに到達できる必要があります。localhostは到達できません。

HTMLとCSSをPNGとしてレンダリングする方法

Use HCTI to render this HTML and CSS as a PNG with device_scale set to 1.
HTML: <div class="card">Hello from HCTI</div>
CSS: .card { width: 1200px; height: 630px; display: flex;
align-items: center; justify-content: center; background: #172554;
color: white; font: 64px sans-serif; }
Return the hosted image URL.

結果は、濃い青のカードに白いテキストが中央に表示されるはずです。アシスタントはHTML/CSSをHCTIに送信してレンダリングします。リポジトリから作業する場合は、関連ファイルを読み取り、自己完結型のマークアップとスタイルを提供するよう依頼してください。ローカルアセットパスはアクセス可能なアセットに置き換える必要があります。

PDFをエクスポートする方法

Format the following report as HTML and CSS, then render it with HCTI
using format="pdf". Use clear headings and a readable table.
Report: January revenue $12,000; February revenue $14,500; March revenue $16,200.
Return the PDF URL.

テンプレートを再利用してバリエーションを作成する方法

Use HCTI to list my saved templates. Find the social-card template and
inspect its variables before rendering it with the headline "New release".

Use HCTI to check my maximum batch size. Create five variations of the
HTML/CSS card we just rendered, with a different accent color in each.
Return a labeled list of image URLs.

テンプレートエディタを使用してテンプレートをデザインし、アシスタントがtemplate_valuesとして渡す値を定義します。

組織リソースを検査する方法

Use HCTI to list my OG configurations and inspect the blog configuration.
Explain its template mappings and refresh interval.

この例ではog_configs:readを承認してください。設定を作成または更新するには、og_configs:create_updateも承認してください。プロキシ、ストレージ先、OG管理操作については、ツールリファレンスを参照してください。

画像パラメータ

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

パラメータ	型	説明
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	HTML/CSSおよびテンプレート画像はデフォルトでTwemojiを使用します。無効にするにはtrueに設定します。URL画像は、明示的にfalseに設定した場合のみ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()を呼び出すまで画像の生成を待機します。
request_overrides	Array	URLワイルドカードパターンやリソースタイプに一致するブラウザのネットワークリクエストをブロックします。有料プランが必要です。
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ウィンドウが開こうとするときにポップアップがブロックされていないか確認してください

権限エラー

リストされたツールには、接続にない権限が必要な場合があります。HCTIを切断して再接続し、目的の組織に必要なアクセスを承認してください。既存のトークンを更新しても権限は追加されません。アクセスが変更されるまで、拒否された操作を再試行しないでください。MCP認証を参照してください。

レート制限エラー

管理ツールの制限は、組織のRESTリクエストと共有されます。レート制限されたツールを再試行する前に60秒待ってください。レート制限を参照してください。

接続の問題

MCPサーバーが接続しない場合：

• ネットワークが送信HTTPS接続を許可していることを確認してください
• URLが正確にhttps://mcp.hcti.ioであることを確認してください
• 設定を更新した後、AIアシスタントを再起動してください

画像生成エラー

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

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

自動化プラットフォーム

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にも掲載されています。

ヘルプが必要ですか？

人間に相談してください。support@htmlcsstoimage.comにメールを送っていただければ、始めるのをお手伝いします。