codetoimage-mcp-server

@codetoimage/mcp-server

codetoimage.app の公式 Model Context Protocol サーバーです。Claude Desktop、Claude Code、Cursor、または MCP 互換クライアントから HTML/CSS を PNG/JPG/WebP に直接レンダリングできます。

利用できる機能

API キー以外のセットアップは不要で、2 つのツールを利用できます。

• render_html_to_image – 画像をインラインで返すため、エージェント（またはチャット中のあなた）がすぐに確認できます。「レンダリングしたカードを見せて」、OG プレビューの反復、チャートの生成、バッジのモックアップに最適です。
• render_html_to_url – 一時的なホスト URL（有効期間 24 時間）を返します。画像を外部に配置する必要がある場合に最適です。Instagram Graph API、OpenGraph メタタグ、Slack のリンクプレビュー、ドキュメントや投稿への埋め込みなどに利用できます。

インストール

グローバルにインストールする必要はありません。MCP クライアントから npx で実行できます。codetoimage.app/dashboard/keys で API キーを取得し、以下の設定を追加してください。

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json（macOS）または %APPDATA%\Claude\claude_desktop_config.json（Windows）を編集します。

{
  "mcpServers": {
    "codetoimage": {
      "command": "npx",
      "args": ["-y", "@codetoimage/mcp-server"],
      "env": {
        "CODETOIMAGE_API_KEY": "cti_live_..."
      }
    }
  }
}

Claude Desktop を再起動してください。ツールピッカーに 2 つのツールが表示されます。

Claude Code

claude mcp add codetoimage -s user -- npx -y @codetoimage/mcp-server

次に、シェルのプロファイルで環境変数を設定するか（または claude mcp add の呼び出し時に -e CODETOIMAGE_API_KEY=cti_live_… を渡します）。

Cursor

~/.cursor/mcp.json を編集します。

{
  "mcpServers": {
    "codetoimage": {
      "command": "npx",
      "args": ["-y", "@codetoimage/mcp-server"],
      "env": {
        "CODETOIMAGE_API_KEY": "cti_live_..."
      }
    }
  }
}

エージェントからの使い方

ツールは自己説明型です。エージェントは意図に応じて適切なツールを選択します。すぐに使えるプロンプトの例：

「このカードを PNG としてレンダリングしてください：<div style='padding:40px;background:#6366f1;color:white;border-radius:16px'>Hello</div>、サイズは 800×400 です。」

「ブログ記事『エージェントにピクセル単位で正確なレンダリングが必要な理由』の Open Graph 画像を生成し、og:image メタタグに貼り付けられる URL を教えてください。」

「この CSS カードを透明な PNG としてレンダリングしてください。暗い背景で使いたいです。」

「保存済みのテンプレート 3f2a91d0-... を、タイトル『ローンチ当日』で Instagram ストーリーとしてレンダリングしてください。」

ツールのスキーマ

render_html_to_image

フィールド	型	必須	備考
html	string	✓*	HTML 全体（通常は <body> を含みます）。*template_id を指定する場合は不要です
css	string	–	<style> として挿入する CSS（任意）
template_id	uuid	✓*	ダッシュボードのテンプレートページにある保存済みテンプレート。html の代わりに指定できます
variables	object	–	テンプレート内の {{placeholders}} に設定する値（HTML エスケープされます）
preset	enum	–	サイズ名：og、twitter-card、facebook-post、linkedin-post、instagram-square、instagram-portrait、instagram-story、youtube-thumbnail、pinterest-pin
width	integer 1-2048	–	デフォルトは 800。preset を上書きします
height	integer 1-2048	–	デフォルトは 600。preset を上書きします
format	png | jpeg | webp	–	デフォルトは png
quality	integer 1-100	–	JPEG/WebP のみ
transparent	boolean	–	PNG/WebP、有料プランで利用可能
background	string	–	例：#ffffff または rgb(…)

戻り値：画像コンテンツ（インラインの base64）。チャット内にレンダリングされます。

render_html_to_url

入力スキーマは render_html_to_image と同じです。以下を含むテキストブロックを返します。

• url – 一時的なホスト画像 URL
• format – 最終的な出力形式
• expires_at – ISO タイムスタンプ（レンダリングから 24 時間後）
• credits_remaining – プランのクォータ状態

設定

変数	デフォルト	用途
CODETOIMAGE_API_KEY	–	必須。 codetoimage.app/dashboard/keys で取得してください
CODETOIMAGE_API_URL	https://api.codetoimage.app	API のベース URL（開発環境やプロキシ用の上書き）

プランと制限

• 無料 – 月50回のレンダリング、ウォーターマークなし、全機能（最大2048×2048、全形式）。
• 有料（Starter / Hobby / Pro / Scale） – 月1,000回のレンダリングで月額9ドルから、最大月50,000回まで利用可能で、レート制限も高くなります。
• 従量課金 – 5ドルからのプリペイドクレジットパック。有効期限は12か月で、サブスクリプションは不要です。

料金：codetoimage.app/#pricing

関連リンク

• Web ダッシュボードと REST API
• @codetoimage/cli – ターミナル／CI での使用

ライセンス

MIT