HTML/CSS to Image

AI エージェント向け HTML/CSS 画像変換 API

AI エージェントがブラウザーを管理することなく、実際のウェブサイトのスクリーンショットを撮影し、HTML/CSS をレンダリングして、再利用可能なテンプレートに画像や PDF を生成できます。

このリポジトリは、https://mcp.hcti.io のホスト型 HCTI MCP サーバー向けに、クライアント別のマニフェストを備えたポータブルな エージェントプラグイン パッケージです。認証には HCTI のブラウザーベースの OAuth フローを使用します。このリポジトリには API キーやアクセストークンは保存されません。

リポジトリの構成

パス	用途
plugin.json	ポータブルなエージェントプラグインのマニフェストです。
mcp.json	ポータブルな MCP 設定です。
.mcp.json	Claude Code、GitHub Copilot、Grok 互換の MCP 設定です。
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 marketplace のマニフェストです。
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 用のスタンドアロン OAuth/MCP Open Graph スキルです。

ChatGPT と Codex

ChatGPT または Codex のプラグインディレクトリから、公式の HTML/CSS to Image プラグイン をインストールしてください。これは推奨される OpenAI 連携方法で、HCTI の登録済み MCP 接続とブラウザーベースの OAuth を使用します。

ネイティブの .codex-plugin/plugin.json マニフェストには共有 HCTI スキルが含まれ、.app.json はこのパッケージを公開済みの OpenAI プラグインに対応付けます。

Kimi Code

Kimi Code で GitHub からプラグインを直接インストールします。

/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 は、含まれている HCTI Agent Skills を自動的に検出します。

開発中にローカルのチェックアウトをテストするには、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 サーバーが利用可能であることを確認します。/mcp から hcti に接続し、ブラウザーで認証を完了してください。

Cline

リポジトリの llms-install.md を Cline に渡してホスト型 HCTI サーバーを設定するか、https://mcp.hcti.io をリモートの Streamable HTTP サーバーとして手動で追加してください。ブラウザーで 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 で カスタマイズ を開き、HTML/CSS to Image API を検索して、インストール を選択し、希望するスコープを選びます。

Cursor の MCP 設定を開いて hcti を見つけ、接続 を選択して、ブラウザーで認証を完了してください。接続後、新しいエージェントチャットを開始すると、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 が表示されることを確認します。画像リクエストをテストする前に、Cursor の MCP 設定から hcti MCP サーバーに接続してください。

次のテストサイクルでは、コピーした html-css-to-image ディレクトリを現在のチェックアウトに置き換えて、Cursor を再読み込みします。

Grok Build

xAI プラグインマーケットプレイスは、このリポジトリの特定のコミットを参照します。Grok マニフェストは、ルートのスキル、MCP エンドポイント、アセットを再利用します。

マーケットプレイスのエントリーが利用可能になったら、Grok Build で HTML/CSS to Image をインストールし、プロンプトが表示されたら hcti MCP サーバーに接続して、ブラウザーで認証を完了してください。

ClawHub / OpenClaw

ClawHub スキルは、ホスト型 MCP サーバーを通じて、HTML/CSS のレンダリング、ウェブサイトのスクリーンショット、PDF 出力、保存済みテンプレートのレンダリングに対応します。ユーザーはブラウザーベースの OAuth を使用して https://mcp.hcti.io に接続します。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 <your-clawhub-owner-handle> を追加します。それ以外の場合、認証済みユーザーがリストの所有者になります。公開はこのリポジトリへのコミットとは別に行われ、新しいリリースは自動レビューのため公開が遅れる場合があります。

ClawHub は、公開されたスキルを MIT-0 ライセンスで配布します。初回公開の前にライセンス条件を確認してください。ホスト型 HCTI サービスには、引き続き独自の利用規約が適用されます。ClawHub の公開とスキル形式を参照してください。

含まれる機能

コアとなるレンダリングツールとテンプレートツールは次のとおりです。

ツール	目的
create_image	HTML と CSS を画像または PDF としてレンダリングします。
create_url_image	公開 URL または選択したページ要素をキャプチャします。
create_templated_image	保存済みの HCTI テンプレートを変数の値でレンダリングします。
create_batch_images	1 回のリクエストで複数の画像バリエーションを生成します。
get_max_batch_size	アカウントの現在のバッチ上限を確認します。
create_template	再利用可能な HTML/CSS テンプレートを保存します。
update_template	既存のテンプレートを更新します。
list_templates	認証済みアカウントのテンプレートを一覧表示します。
list_template_versions	テンプレートのバージョン履歴を確認します。

MCP によるリソースの管理

画像の生成に加えて、HCTI MCP サーバーは接続済みの組織の補助リソースを管理できます。

リソース	ツール	目的
使用状況	check_usage	組織の現在の画像使用量と上限を確認します。
Open Graph 設定	create_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 の設定に必要な外部 ID を取得します。

動的な Open Graph 画像設定は、特に便利な連携ポイントです。エージェントは既存の HCTI テンプレートを特定し、ページのメタデータをその変数に割り当て、必要に応じて設定済みのプロキシまたはストレージの保存先を選択して、キャッシュされたソーシャル画像を配信するための永続的な設定を作成できます。

リソースツールは、OAuth 認証時に選択した HCTI 組織を対象として動作します。利用できるツールは、その接続に付与された権限によって異なります。一覧表示と取得は読み取り専用ですが、作成、更新、削除の操作はアカウントを変更します。特に、update_og_config は設定全体を置き換えるため、エージェントは更新前に現在の設定を取得し、変更しない設定を保持する必要があります。

リクエストの例

• 「このタイトルとカラーパレットを使って、1200×630 の Open Graph 画像を作成してください。」
• 「https://example.com/pricing の料金表をキャプチャしてください。」
• 「HCTI のテンプレートを一覧表示し、この見出しを使ってソーシャルカードのテンプレートをレンダリングしてください。」
• 「アクセントカラーを変えた商品カードを 5 種類作成してください。」
• 「https://example.com 向けに、ソーシャルカードのテンプレートを使用し、タイトルと説明をページのメタデータから割り当てる動的な Open Graph 設定を作成してください。」

データの取り扱い

プラグイン経由で送信されたリクエストは、ホスト型の HTML/CSS to Image サービスによって処理されます。HCTI に提供された HTML、CSS、テンプレートの値、対象 URL、レンダリングオプション、リソース設定はそのサービスに送信され、永続リソースは接続済みの HCTI 組織に保存されます。許可されたレンダリングワークフローを設定する意図があり、HCTI がそのデータを処理することを理解している場合を除き、Cookie、認証ヘッダー、非公開 URL、その他の秘密情報は提供しないでください。

ライセンスとサービス利用規約

このリポジトリのプラグインファイルは、MIT License のもとで利用できます。このライセンスは、このリポジトリのソースコード、設定、ドキュメントに適用されますが、ホスト型の HTML/CSS to Image サービスには適用されません。サービスの利用には、別途利用規約とプライバシーポリシーが適用されます。

検証

リポジトリのチェックを実行します。

node scripts/validate-template.mjs

Claude Code の公式厳格バリデーターで Claude アダプターを検証します。

claude plugin validate . --strict

互換性の検証済み環境

プラグインのランタイム、共有 HCTI スキル、MCP の検出、ブラウザーを使った OAuth フローは、Claude Code 2.1.258 でテスト済みです。privacyPolicyUrl などのディレクトリ一覧メタデータを厳格に検証するには、Claude Code 2.1.281 以降を使用してください。

Grok アダプターは、ピン留めされたコミットに対する xAI マーケットプレイスのカタログおよびコンポーネントインデックスのチェックで検証されています。

HOL Registry

AI エージェントのプラグインはHOL Plugin Registryに登録されています。インストールの詳細、セキュリティ上の調査結果、来歴、現在の信頼スコアを確認できます。

ドキュメントとサポート

• HTML/CSS to Image MCP ドキュメント
• 公式 ChatGPT と Codex のプラグイン
• OpenAI プラグインのパッケージ化に関するドキュメント
• Kimi Code プラグインのドキュメント
• Gemini CLI 拡張機能のドキュメント
• GitHub Copilot プラグインのドキュメント
• Cline MCP のインストール手順
• Cursor プラグインのドキュメント
• Cursor プラグインのリファレンス
• Claude Code プラグインのドキュメント
• Claude Code プラグインのリファレンス
• サポート：[email protected]