Codetoimage MCP Server

Name: Codetoimage MCP Server
Author: beznazwiska

作者：beznazwiskaバージョン 0.2.0i★ 0iパソコンで動く

レジストリ名io.github.beznazwiska/codetoimage-mcp-server

インストール方法

What it does

Pixel-perfect HTML/CSS to PNG/JPG/WebP for AI agents — inline image or 24h hosted URL.

Connects パソコンで動く
Account or key Needs CODETOIMAGE_API_KEY
Category デザイン・画像・音声

インストール

使っているAIアプリを選んで、設定をコピーしてください。

チェック 3/3 合格 · あなたのパソコンで動きます · ✓ コマンド確認済み 2026年11月14日

まず：どの AI を使っていますか？

ClaudeWeb · アプリ · スマホChatGPTWebClaude CodeターミナルCursorコードエディタVS Codeコードエディタその他その他のアプリ

使っているアプリを選ぶと、下に手順が表示されます。

Claude につなげますが、先に準備が必要です

Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません

AI にインストールしてもらう

このメッセージを Claude のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの Claude に MCP server Codetoimage MCP Server を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：{ "mcpServers": { "codetoimage": { "command": "npx", "args": [ "-y", "@codetoimage/mcp-server" ], "env": { "CODETOIMAGE_API_KEY": "your-value" } } } } 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) CODETOIMAGE_API_KEY は "your-value" のままにして、本当の値は私がファイルかアプリの入力欄に自分で貼るよう伝える。チャットにキーを書かせない。5) 了承した内容を実行し、Codetoimage MCP Server のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
Codetoimage MCP Server に登録してキーを作る
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
Codetoimage MCP Server のサイトを開く ↗
完了
パソコン版 Claude アプリの設定ファイルを開く
SettingsDeveloperEdit Config
完了

この設定を貼り付けて保存

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

キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください

完了

Claude を終了してもう一度開く
完了
試してみる
Codetoimage MCP Server を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude が Codetoimage MCP Server を使っていると言うか、回答に Codetoimage MCP Server のツール名が出れば接続成功です

追加の設定 1 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · 初期値 https://api.codetoimage.app

説明は英語の原文のままです。

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

ChatGPT はまだ Codetoimage MCP Server につなげません

Codetoimage MCP Server はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません

代わりにできること

A · Codetoimage MCP Server につなげるアプリを使う

Claude の手順 →Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません
Claude Code の手順 →Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ）
Cursor の手順 →Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ）
VS Code の手順 →Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ）

B · デザイン・画像・音声の中で ChatGPT につなげる別のサーバー

同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました

Pascal 3D Editor✓ ChatGPT
Semiotic✓ ChatGPT
TypeUI✓ ChatGPT

Claude Code につなげますが、先に準備が必要です

Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ）

AI にインストールしてもらう

このメッセージを Claude Code のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの Claude Code に MCP server Codetoimage MCP Server を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：claude mcp add --scope user codetoimage --env CODETOIMAGE_API_KEY=your-value -- npx -y @codetoimage/mcp-server 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) CODETOIMAGE_API_KEY は "your-value" のままにして、本当の値は私がファイルかアプリの入力欄に自分で貼るよう伝える。チャットにキーを書かせない。5) 了承した内容を実行し、Codetoimage MCP Server のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
Codetoimage MCP Server に登録してキーを作る
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
Codetoimage MCP Server のサイトを開く ↗
完了
ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
完了
4
このコマンドを貼り付けて Enter
```
claude mcp add --scope user codetoimage --env CODETOIMAGE_API_KEY=your-value -- npx -y @codetoimage/mcp-server
```
Enter の前に「your-value」を自分のキーに書き換えてください
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
完了
Claude Code で /mcp と入力
Codetoimage MCP Server が一覧にあり、接続済みと表示されれば OK です
完了
試してみる
Codetoimage MCP Server を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude Code が Codetoimage MCP Server を使っていると言うか、回答に Codetoimage MCP Server のツール名が出れば接続成功です

追加の設定 1 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · 初期値 https://api.codetoimage.app

説明は英語の原文のままです。

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Cursor につなげますが、先に準備が必要です

Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ）

AI にインストールしてもらう

このメッセージを Cursor のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの Cursor に MCP server Codetoimage MCP Server を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：{ "mcpServers": { "codetoimage": { "command": "npx", "args": [ "-y", "@codetoimage/mcp-server" ], "env": { "CODETOIMAGE_API_KEY": "your-value" } } } } 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) CODETOIMAGE_API_KEY は "your-value" のままにして、本当の値は私がファイルかアプリの入力欄に自分で貼るよう伝える。チャットにキーを書かせない。5) 了承した内容を実行し、Codetoimage MCP Server のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
Codetoimage MCP Server に登録してキーを作る
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
Codetoimage MCP Server のサイトを開く ↗
完了
このボタンで Cursor を開く
Cursor で開く
Cursor がインストールの確認をするので Install を押します
完了
キーを入力
Codetoimage MCP Server の設定で CODETOIMAGE_API_KEY が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
完了
Cursor の AI チャットを Agent モードで開く
完了
試してみる
Codetoimage MCP Server を使って、私に何ができるか教えて、1 つやってみせて
✓ Cursor が Codetoimage MCP Server を使っていると言うか、回答に Codetoimage MCP Server のツール名が出れば接続成功です

追加の設定 1 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · 初期値 https://api.codetoimage.app

説明は英語の原文のままです。

メニュー名は 2026年11月11日に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

VS Code につなげますが、先に準備が必要です

Codetoimage MCP Server のキーが必要です（提供元のサイトで作成） · 先にパソコンへ Node.js を入れてください（1 回だけ）

AI にインストールしてもらう

このメッセージを VS Code のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの VS Code に MCP server Codetoimage MCP Server を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：{ "servers": { "codetoimage": { "type": "stdio", "command": "npx", "args": [ "-y", "@codetoimage/mcp-server" ], "env": { "CODETOIMAGE_API_KEY": "your-value" } } } } 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) CODETOIMAGE_API_KEY は "your-value" のままにして、本当の値は私がファイルかアプリの入力欄に自分で貼るよう伝える。チャットにキーを書かせない。5) 了承した内容を実行し、Codetoimage MCP Server のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
Codetoimage MCP Server に登録してキーを作る
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
Codetoimage MCP Server のサイトを開く ↗
完了
このボタンで VS Code を開く
VS Code で開く
VS Code がインストールの確認をするので Install を押します
完了
キーを入力
Codetoimage MCP Server の設定で CODETOIMAGE_API_KEY が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
完了
VS Code の AI チャットを Agent モードで開く
完了
試してみる
Codetoimage MCP Server を使って、私に何ができるか教えて、1 つやってみせて
✓ VS Code が Codetoimage MCP Server を使っていると言うか、回答に Codetoimage MCP Server のツール名が出れば接続成功です

追加の設定 1 項目（入力しなくても使えます）

上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · 初期値 https://api.codetoimage.app

説明は英語の原文のままです。

メニュー名は 2026年11月11日に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください

MCP を使えるアプリをすべて見る →

JSON 設定は下の「開発者向け」にあります

つまずいたら？Codetoimage MCP Server を使っている人に聞いてみましょう💬 ディスカッション →

開発者向け：ターミナルのコマンドと JSON 設定

パソコンにインストール

Claude Code

claude mcp add --scope user codetoimage --env CODETOIMAGE_API_KEY=your-value -- npx -y @codetoimage/mcp-server

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

{
  "servers": {
    "codetoimage": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@codetoimage/mcp-server"
      ],
      "env": {
        "CODETOIMAGE_API_KEY": "your-value"
      }
    }
  }
}

自分で入力する値

CODETOIMAGE_API_KEY 秘密必須 env
API key from https://codetoimage.app/dashboard/keys (starts with cti_live_…). Sandbox tier is free.
CODETOIMAGE_API_URL env
Override the API base URL. Defaults to https://api.codetoimage.app.

説明は英語の原文のままです。

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

ひと目でわかる

GitHubスター i: 0
週あたりのダウンロードi: 46/週
ライセンス i: MIT
接続方法: パソコンで動く
トランスポート: stdio
最新バージョンi: 0.2.0
カテゴリi: デザイン・画像・音声
レジストリ公開日i: 2026年7月11日
コードの最終更新i: 2026年7月11日
作者: beznazwiska
パッケージ: npm: @codetoimage/mcp-server
リポジトリ: beznazwiska/codetoimage-mcp-server
ウェブサイト: codetoimage.app
レジストリでの状態: 有効

使えるアプリ

このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。

パソコン上で動かせるアプリ

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

すべてのアプリと長所・短所 →

できること

パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月15日にチェック

✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント beznazwiska で確認済みです
✓ 合格
今もメンテナンスされている
コードの最終更新：4 か月前
✓ 合格
ライセンスがある
MITを使用
– 対象外
エンドポイントが応答する
これはパソコンで動くため、インターネット上のエンドポイントはありません
– 対象外
OAuthでサインイン
パソコンで動き、代わりにローカルの設定を使います
… 未チェック
ツールの説明に隠れた指示がない
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです

公開済みの脆弱性（OSV.dev）

まだ確認していません

確認していること → · JSON

作者の方へ：再確認の依頼・情報の誤りの報告

ログイン

話し合い

質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。

まだ投稿はありません。最初の質問や共有をどうぞ。

ここの投稿は利用者によるもので、PopNx チームのものではありません。

ログインして投稿

ユーザーレビュー

まだレビューはありません

ログインしてレビューを書く

デザイン・画像・音声のほかのサーバーとの比較i

このカテゴリのほかの3075件のうち0%よりスターが多い
このカテゴリのほかの3075件のうち13%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの3075件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Codetoimage MCP Serverは安全ですか？

当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

入力が必要なもの：CODETOIMAGE_API_KEY

パソコンで動きますか、それともクラウドですか？

あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません（サーバー自体がオンラインサービスを呼び出す場合を除きます）。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は4 か月前、最新バージョン（0.2.0）がレジストリに届いたのは4 か月前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。

代わりに使えるものは？

同じカテゴリには：Pascal 3D Editor, Figma MCP Server, Remocn: Remotion MCP server, Harness, ChatCut

似た働きのほかの候補

同じカテゴリでほかの作者のもの。コマンドは確認済み。公式を先に、次にスター順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Pascal 3D Editor

Create, inspect, validate, and save editable 3D building scenes with Pascal's MCP server.

作者：pascalorg広く使われている↓ 1037/週★ 2.6万リポジトリ全体のスター一昨日更新

パソコンでもクラウドでも✓ 提供元 · pascal.app

インストール

Figma MCP Server

The Figma MCP server brings Figma design context directly into your AI workflow.

作者：figma広く使われている★ 218613 か月前更新

クラウドで動く✓ 提供元 · mcp.figma.com

接続方法

Remocn: Remotion MCP server

Hosted MCP for Remotion videos: search Remocn components, read docs, plan a video, preview it.

作者：Remocn成長中★ 17055 日前更新

クラウドで動く✓ 提供元 · remocn.dev

接続方法

Harness

Start Claude Code and Codex agents the person can watch, wait for them and read their answers.

作者：autonomous-ai成長中↓ 109/週★ 148727 日前更新

パソコンで動く✓ harness.autonomous.ai

インストール

ChatCut

AI video editor for agents: cut footage, add captions and motion graphics, export editable edits.

作者：ChatCut-Inc成長中★ 104116 日前更新

クラウドで動く✓ 提供元 · chatcut.io

接続方法

Pascal 3D Editor — クラウドでもパソコンにインストールでも使える · キー不要
Figma MCP Server — クラウドで動き、インストール不要 · キー不要 · Claude のディレクトリに掲載
Remocn: Remotion MCP server — クラウドで動き、インストール不要 · キー不要
Harness — パソコンにインストールが必要 · キー不要
ChatCut — クラウドで動き、インストール不要 · キー不要

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

@codetoimage/mcp-server

Official Model Context Protocol server for codetoimage.app – render HTML/CSS to PNG/JPG/WebP directly from Claude Desktop, Claude Code, Cursor, or any MCP-compatible client.

What you get

Two tools, no setup beyond an API key:

`render_html_to_image` – returns the image inline so your agent (or you, in chat) can see it immediately. Best for "show me the rendered card", OG preview iteration, chart generation, badge mockups.
`render_html_to_url` – returns a temporary hosted URL (24h TTL). Best when the image needs to live somewhere external – Instagram Graph API, OpenGraph meta tags, Slack unfurls, docs/posts embeds.

Install

You don't need to install anything globally – MCP clients can run it via npx. Get an API key at codetoimage.app/dashboard/keys, then add the config below.

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

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

Restart Claude Desktop. The two tools appear in the tool picker.

Claude Code

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

Then set the env var in your shell profile (or pass -e CODETOIMAGE_API_KEY=cti_live_… in the claude mcp add call).

Cursor

Edit ~/.cursor/mcp.json:

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

Usage from an agent

The tools are self-documenting – your agent will pick the right one based on intent. Example prompts that just work:

"Render this card as a PNG: Hello at 800×400."

"Generate an Open Graph image for the blog post 'Why agents need pixel-perfect rendering' and give me a URL I can paste into the og:image meta tag."

"Take this CSS card and render it as a transparent PNG so I can use it on a dark background."

"Render my saved template 3f2a91d0-... with title 'Launch day' as an Instagram story."

Tool schemas

`render_html_to_image`

Field	Type	Required	Notes
`html`	string	✓*	Full HTML (typically with ). *Not needed with `template_id`
`css`	string	–	Optional CSS injected as
`template_id`	uuid	✓*	Saved template from the dashboard (Templates page); alternative to `html`
`variables`	object	–	Values for `{{placeholders}}` in the template (HTML-escaped)
`preset`	enum	–	Named size: `og`, `twitter-card`, `facebook-post`, `linkedin-post`, `instagram-square`, `instagram-portrait`, `instagram-story`, `youtube-thumbnail`, `pinterest-pin`
`width`	integer 1-2048	–	Default 800; overrides `preset`
`height`	integer 1-2048	–	Default 600; overrides `preset`
`format`	`png` \	`jpeg` \	`webp`	–	Default `png`
`quality`	integer 1-100	–	JPEG/WebP only
`transparent`	boolean	–	PNG/WebP, paid plans
`background`	string	–	e.g. `#ffffff` or `rgb(…)`

Returns: image content (base64 inline), rendered in the chat.

`render_html_to_url`

Same input schema as render_html_to_image. Returns a text block with:

url – temporary hosted image URL
format – final output format
expires_at – ISO timestamp (24h from render)
credits_remaining – your plan's quota state

Configuration

Variable	Default	Purpose
`CODETOIMAGE_API_KEY`	–	Required. Get one at codetoimage.app/dashboard/keys
`CODETOIMAGE_API_URL`	`https://api.codetoimage.app`	API base URL (override for dev/proxy)

Plans + limits

Free – 50 renders/month, no watermark, full features (up to 2048×2048, all formats).
Paid (Starter / Hobby / Pro / Scale) – from $9/mo for 1,000 renders up to 50,000/month, higher rate limits.
Pay as you go – prepaid credit packs from $5, valid 12 months, no subscription.

Pricing: codetoimage.app/#pricing

Web dashboard + REST API
@codetoimage/cli – terminal/CI usage

License

MIT

Codetoimage MCP Server

What it does

インストール

Node.js を入れる（まだなければ）

Codetoimage MCP Server に登録してキーを作る

パソコン版 Claude アプリの設定ファイルを開く

この設定を貼り付けて保存

Claude を終了してもう一度開く

試してみる

代わりにできること

Node.js を入れる（まだなければ）

Codetoimage MCP Server に登録してキーを作る

ターミナルを開く

このコマンドを貼り付けて Enter

Claude Code で /mcp と入力

試してみる

Node.js を入れる（まだなければ）

Codetoimage MCP Server に登録してキーを作る

このボタンで Cursor を開く

キーを入力

Cursor の AI チャットを Agent モードで開く

試してみる

Node.js を入れる（まだなければ）

Codetoimage MCP Server に登録してキーを作る

このボタンで VS Code を開く

キーを入力

VS Code の AI チャットを Agent モードで開く

試してみる

パソコンにインストール

自分で入力する値

ひと目でわかる

使えるアプリ

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

公開済みの脆弱性（OSV.dev）

話し合い

ユーザーレビュー

デザイン・画像・音声のほかのサーバーとの比較i

よくある質問

似た働きのほかの候補

Pascal 3D Editor

Figma MCP Server

Remocn: Remotion MCP server

Harness

ChatCut

作者のREADME

@codetoimage/mcp-server

What you get

Install

Claude Desktop

Claude Code

Cursor

Usage from an agent

Tool schemas

render_html_to_image

render_html_to_url

Configuration

Plans + limits

Related

License

`render_html_to_image`

`render_html_to_url`