mcpField
B
Backdraw

Backdraw

ローカル
github.comメディア・デザイン13 日前に更新

Backdraw について

Backdrawは、ログイン済みのChatGPTアカウントを使い、Chromeのバックグラウンドタブで画像を生成・編集するローカルMCPサーバーと拡張機能です。主にClaudeユーザー向けで、生成画像をWindows PCに保存します。

主な機能

  1. 01ChatGPTを使った画像生成と編集
  2. 02ミュートされたバックグラウンドタブで実行
  3. 03ウェブサイトで集めた画像を参照に再利用
  4. 04ギャラリーで生成画像を閲覧
  5. 05画像とジョブ履歴をローカルに保存

活用シーン

  1. 01Claudeの依頼から画像を生成
  2. 02参照画像を使って画像を編集
  3. 03後の生成に使うウェブサイト画像を収集

MCP 対応

BackdrawはstdioのMCPサーバーとして動作し、画像生成、ジョブの確認・キャンセル、画像取得、プロジェクトやコレクションの管理ツールを提供します。サーバーはネイティブメッセージングと名前付きパイプでChrome拡張機能と通信します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"devtalh-backdraw": {
"command": "npx",
"args": [
"-y",
"backdraw"
]
}
}
}
起動コマンドnpx -y backdraw

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmbackdraw2.1.3

ツール

7

掲載時のツール一覧 · 2 日前に更新

パラメーター型必須説明
promptstringはい画像の詳細な説明または編集指示。言語は問いません。
output_dirstringいいえ任意。画像を追加でコピーするフォルダー。例:現在のプロジェクトの assets フォルダー(絶対パスを推奨)。中央の images フォルダーには常にコピーが保存されます。
send_as_isbooleanいいえブリッジが追加する短い指示を付けず、プロンプトをそのまま送信します(ChatGPT からの質問への回答に便利です)。
aspect_ratiostringいいえ任意の形状を W:H 形式で指定します。例:1:1、3:2、2:3、4:3、3:4、16:9、9:16、4:5、5:2(Discord のバナー)、3:1(ヘッダー)。整数を使い、1:4 から 4:1 までの任意の W:H を指定できます(1.5:1 ではなく、3:2 を使用してください)。ChatGPT は 1:3 から 3:1 までの比率を自動で描画します。それより横長または縦長の場合は、3:1 / 1:3 で描画してからトリミングします。画像の比率が1%を超えてずれている場合、中央から指定比率にトリミングし(最も近いピクセルに丸め)、元画像も保持します。
wait_secondsintegerいいえ指定した秒数以内に返します。デフォルトの45秒なら、一部のクライアントに設定されている60秒のツール制限を超えません。時間内にジョブが完了しない場合、結果に STILL RUNNING または QUEUED と表示されます。その job_id を指定して job_status を再度呼び出してください。
auto_reattachbooleanいいえChatGPT が画像にアクセスできないと返答し、アップロードを求めた場合、チャット内の最新画像(または reference_images)を自動で添付し、もう一度だけ依頼します。
filename_hintstringいいえ任意の短い被写体名(例:'red fox mascot')。プロンプト冒頭の代わりに、保存ファイル名に使用します。プロンプトが参照画像についての指示などから始まる場合に指定してください。
include_previewbooleanいいえ確認用に、縮小した結果のプレビューを添付します。
reference_filesarrayいいえ任意。list_collections から取得したファイル名を指定し、reference_collection の最新画像ではなく、指定した画像だけを添付します。
conversation_urlstringいいえ任意。之前结果中的 ChatGPT 会話リンクを指定すると、新しいチャットではなく、その会話にプロンプトを送信します。簡単な追加依頼に便利です。正確な編集には、新しいチャットで reference_images を使うことを推奨します。
reference_imagesarrayいいえメッセージに添付する任意のローカル画像ファイル(png/jpg/webp/gif、最大 16 枚)。編集する画像やキャラクターシートなどを指定します。以前の呼び出しで保存したパスもそのまま使えます。
reference_collectionstringいいえユーザーの Backdraw 参照コレクション名(任意。list_collections を参照。部分一致)。画像は reference_images の後に追加され、参照画像の合計は最大 16 枚です。上限を超える場合は新しい画像が使われますが、reference_files で別の画像を指定した場合を除きます。
transparent_backgroundbooleanいいえ背景が透明な PNG を要求します(ステッカー、ロゴ、アイコン、スプライト)。保存された画像に実際に透明ピクセルが含まれているかどうかが結果に示されます。

詳細

Backdraw

お使いのChatGPTアカウントを使い、バックグラウンドのChromeタブでClaudeに画像を生成させます。
APIキー不要、追加費用なし、見守る必要もありません。

npm version devtalh/backdraw MCP server

ウェブ上の画像を右クリックして参考画像として保存すると、Claude CodeがBackdrawにそのスタイルの画像を依頼します。ChatGPTがバックグラウンドタブで画像を生成し、ファイルはPCに保存されます

トルコ語


概要

Backdrawは、ローカルMCP サーバーとChrome拡張機能です。Claudeに「ChatGPTで」画像を作るよう頼むと、 Backdrawは、すでにサインインしているお使いのChromeでバックグラウンドタブにChatGPTを開きます。 プロンプトを送信し、画像ができるのを待って、PCに保存します。Claudeにはファイルパスとプレビュー、 チャットへのリンクが渡されます。

  • 新しい画像を生成したり、画像を参考として添付して編集したりできます。
  • 縦横比(16:9、4:1のバナーなど)や透明な背景を指定できます。
  • 右クリックであらゆるウェブサイトから参考画像を保存し、コレクションとして再利用できます。
  • サイドパネルのギャラリーで、作成した画像をすべて確認できます。
  • npm依存関係ゼロの純粋なNode.js製です。すべてお使いのコンピューター上で動作します。

お使いのChatGPTアカウントを使った個人利用を想定しています。ご自身の責任でご利用ください。 ChatGPTウェブページの自動操作は、 OpenAIの規約に抵触する可能性があります。開始する前に 免責事項と責任ある利用をお読みください。

Backdrawを選ぶ理由

  • いつものChromeで使えます。 別のブラウザープロファイルや追加のログイン、自動操作用ブラウザーは不要です。 Backdrawは、ChatGPTにサインイン済みの、普段お使いのChromeで動作します。
  • 作業の邪魔になりません。 処理はフォーカスを奪わないミュート状態のバックグラウンドタブで行われるため、 画像の生成中も作業を続けられます。
  • ポートを開放しません。 各コンポーネントはChromeのネイティブメッセージングと、お使いのWindowsユーザーだけが開ける名前付きパイプを介して通信します。 DevToolsポート(9222など)もローカルウェブサーバーもありません。
  • APIキー不要です。 ChatGPTのプランを利用し、各画像は通常のChatGPT利用上限にカウントされます。
  • ウェブ上の画像を参考にできます。 どのサイトでも画像を右クリックして保存し、そのスタイルで画像を生成できます。
  • 作成した画像をすべて確認できる、Chromeのサイドパネル内のギャラリーがあります。
  • セットアップはコマンド1つで完了します。 npx backdraw@latest setupを実行してください。残る作業は拡張機能の読み込みだけです。
比較

ほかのオープンソースプロジェクトは異なるアプローチを採用しており、Backdrawにはない機能(macOS または Linux のサポート、API モード、サーバーでの実行)を備えているものもあります。各項目は、2026-10-25 にプロジェクトの README とソースを確認しました。? は確認できなかったことを示します。間違いを見つけましたか? issue を作成してください。

プロジェクト普段使っている Chrome を使用(別のプロファイルやログインは不要)バックグラウンドタブ(フォーカスを奪わない)ポートを開くAPI キーが必要右クリックで参照画像をまとめるギャラリープラットフォーム
Backdrawはいはいいいえ(ネイティブメッセージング + 名前付きパイプ)いいえはいはいWindows
lownamlee/gpt-image-2-mcpいいえ(専用のブラウザプロファイル)一部¹いいえ任意(API モード)いいえいいえ?
nothariharan/image-genいいえ(専用の Edge プロファイル)いいえはい(CDP 9222)いいえいいえいいえWindows、macOS/Linux は手動
goofyshwetank/mcp-chatgpt-gemini-imageいいえ(専用の Chromium プロファイル)いいえいいえいいえいいえいいえ?
Dasemu/chatgpt-imagegen-mcpいいえ(サーバー上の専用プロファイル)一部²はい(HTTP 8088、リモートサーバー)いいえ(専用サーバーのトークン)いいえいいえLinux サーバー
Codex 組み込みの $imagegen–(ブラウザーなし)–いいえいいえ(Codex にサインイン)いいえ??
Sateezg/codex-bridge–(ブラウザーなし、Codex を実行)–いいえいいえ(Codex にサインイン)いいえいいえmacOS、Linux

¹ ChatGPT の準備ができると、専用のブラウザーウィンドウを画面外に移動するか、最小化します。 ² サーバー上の仮想ディスプレイ(Xvfb)でブラウザーを実行するか、ヘッドレスで実行します。

Codex ユーザーはすでに組み込みの画像生成を利用できます。Backdraw は主に Claude Code、Claude デスクトップアプリ、VS Code 向けです。

仕組み

Claude Code / Claude desktop app (MCP client)
        │  MCP over stdio
        ▼
  mcp-server.js ──── named pipe, your Windows user only ────►  host.js
                                                                 │  Chrome native messaging
                                                                 ▼
                                                     Backdraw Chrome extension
                                                                 │  background tab
                                                                 ▼
                                      chatgpt.com → your Project → new chat → image
  • mcp-server.js は Claude との通信を担います。すべてのツール呼び出しを host.js に転送します。
  • 拡張機能が接続すると、Chrome が host.js を起動します。ジョブキュー(同時に 1 件)を実行し、画像を保存して、ジョブ履歴を %USERPROFILE%\.backdraw\data に保持します。
  • 拡張機能は、選択した ChatGPT プロジェクト内で chatgpt.com をバックグラウンドタブとして開きます。そのタブがアクティブになることはなく、ミュートされます。ウィンドウがフォーカスを奪うことも、マウスやキーボードが使用されることもありません。そのタブ内で合成イベントだけが発生します。ジョブが完了するとタブは閉じますが、そのタブを見ている場合は閉じません。
  • API キーは不要です。 Backdraw は、すでに Chrome で使用している ChatGPT セッションを使います。Cookie、トークン、パスワードを読み取ることはありません。
  • ChatGPT に送信するもの(プロンプトと参照画像)以外は、PC の外に送信されません。 Backdraw のサーバーはなく、テレメトリーもありません。

画像は Pictures フォルダー内の Backdraw に保存され、時刻とプロンプトに基づく名前が付けられます。例:20261021-153012_a-cozy-reading-nook.png。

要件

OSWindows 10 または 11
ブラウザーGoogle Chrome 116 以降(Edge、Brave、Chromium も登録されていますが、テスト済みなのは Chrome のみです)
ランタイムNode.js 20 以降
アカウント画像を生成できる ChatGPT アカウント。Chrome で chatgpt.com にサインインしている必要があります
クライアントClaude Code、Claude デスクトップアプリ、Codex、Cursor、VS Code、Gemini CLI(または stdio サーバーを実行するほかの MCP クライアント)

現時点では Windows のみです。コードはプラットフォームモジュールに分かれており、macOS/Linux 向けの貢献を歓迎します。名前付きパイプ、ネイティブホストの登録、ユーザーフォルダーなど、OS 固有のものはすべて platform/win32.js にあります。

インストール

クイックインストール

PowerShell または cmd で次のコマンドを実行します(管理者権限は不要です)。

npx backdraw@latest setup

これは、npm の backdraw パッケージを実行します。

setup は、ブラウザーでのクリックを1回行う以外のすべてを実行します。

  1. Backdraw を %USERPROFILE%\.backdraw にコピーします(npx 自身が作成するコピーは一時的なものです)。さらに、画像フォルダー Pictures\Backdraw を設定します(参照コレクションは Pictures\Backdraw\References に保存されます)。 もう一度実行すると、Backdraw が更新され、設定、ジョブ履歴、コレクションは保持されます。

  2. 見つかった各ブラウザー(Chrome、Edge、Brave、Chromium)について、Windows ユーザー用のネイティブメッセージングホストを登録します。

  3. 見つかった MCP クライアント(Claude Code、Claude デスクトップアプリ、Codex、Cursor、VS Code、 Gemini CLI)を一覧表示し、Backdraw を追加するクライアントを尋ねます。追加または更新されるのは backdraw エントリーのみで、各設定ファイルは変更前にタイムスタンプ付きの .bak コピーが作成されます。 --yes は見つかったすべてのクライアントを選択し、--clients=claude-code,cursor は指定したクライアントのみを選択します。

  4. 拡張機能フォルダーとブラウザーの拡張機能ページを開き、フォルダーのパスをクリップボードにコピーして、最後に必要な手順である拡張機能の読み込みを待ちます。

    1. デベロッパー モード(右上)をオンにします。
    2. パッケージ化されていない拡張機能を読み込むをクリックします。
    3. フォルダーを選択します(Ctrl+V でパスを貼り付けます)。

    拡張機能が接続すると、setup は ✓ Ready とプロンプトの例を表示します。

ネイティブホストの名前は、プロジェクトの以前の GitHub ユーザー名にちなみ、引き続き io.github.muhammedtalha04.backdraw です。名前を変更すると、既存のインストールが動作しなくなるためです。

クライアントからインストールする

MCP クライアントから Backdraw を追加することもできます。この場合、サーバーは npx backdraw@latest mcp で起動します。ブラウザー側では、クライアントに変更を加えない PC 上での初回セットアップが引き続き必要です。

npx backdraw@latest setup --clients=none
クライアントBackdraw の追加方法
Claude Code/plugin install backdraw --marketplace devtalh/backdraw(Claude Code 2.1.275 以降。別の方法として、/plugin marketplace add devtalh/backdraw を実行してから /plugin install backdraw@backdraw を実行します)。/backdraw:setup でブラウザー側の手順を確認できます。
CursorCursor に Backdraw を追加
VS CodeVS Code に Backdraw をインストール
Codexcodex mcp add backdraw -- cmd /c npx -y backdraw@latest mcp
Gemini CLInpx backdraw@latest setup --clients=gemini

Windows では、クライアントがシェルを介さずに npx を起動するため、コマンドは cmd /c 経由で実行されます。各クライアントでは、どちらか一方の方法を使用してください。すでに setup で Claude Code に Backdraw を追加している場合、プラグインが同じツールを持つサーバーを2つ目として起動してしまいます。

手動インストール
  1. コードを取得します。 git でリポジトリをクローンするか、ZIP としてダウンロードして(Code → Download ZIP)、解凍します。

    git clone https://github.com/devtalh/backdraw.git
    cd backdraw
    
  2. **インストーラーを実行します。**そのフォルダー内で実行してください(管理者権限は不要です)。

    node install.js
    

    上記の手順1と2を実行し、Claude Code に Backdraw を追加します(ユーザースコープ)。その他のクライアントの場合は、代わりに node bin/backdraw.js setup を実行するか、使い方を参照してください。

  3. 拡張機能を一度読み込みます。 chrome://extensions を開き、デベロッパー モードをオンにして、パッケージ化されていない拡張機能を読み込むをクリックし、%USERPROFILE%\.backdraw\extension を選択します。

ポップアップで仕上げる
  1. ポップアップを開きます。 ツールバーの Backdraw アイコンをクリックします(パズルピースメニューからピン留めしてください)。 すべてが動作するようになるまで、ポップアップには各ステップの修正方法を示すセットアップチェックリストが表示されます:
    1. ブリッジが接続されていること
    2. ChatGPT にサインインしていること
    3. ChatGPT Project が選択されていること
    4. 準備完了:Claude にコピーするプロンプトの例
  2. ChatGPT Project を作成して選択します。 ChatGPT で画像用の Project を作成し(たとえば「Backdraw」)、開いてから、Backdraw アイコンをクリックし、「Backdraw」プロジェクトを使用を押します。 Claude に「画像用に ChatGPT で Backdraw プロジェクトを選択して」と頼むこともできます。新しい画像チャットはすべて、その Project 内に作成されます。

ポップアップには言語(自動 / 英語 / トルコ語)とテーマ(自動 / ライト / ダーク)の設定もあります。 うまく動作しない場合は、npx backdraw@latest doctor を実行してください。

使用方法

Claude Code から

インストール後、新しい Claude Code セッションを開始し(MCP サーバーはセッション開始時に読み込まれます)、どの言語でも自然な言葉で依頼してください。backdraw サーバーは Claude に次のツールを提供します: generate_image、job_status、cancel_job、fetch_images、list_projects、select_project、list_collections(ツールのリファレンスを参照)。

Claude デスクトップアプリ(チャット)から

デスクトップアプリはチャット用に独自の MCP 設定を保持します。Claude は終了時にその設定を書き換えるため、Backdraw が設定を変更するのは Claude が終了している間だけです。セットアップ時に Claude の実行中が検出された場合は、後で Backdraw を追加してください:

  1. システムトレイからも含め、Claude を完全に終了します。

  2. PowerShell から(Claude のセッションではなく)次のコマンドを実行します:

    npx backdraw@latest setup --clients=claude-desktop
    

    (手動でインストールした場合:~\.backdraw で node install.js --desktop を実行します。)変更前に、各設定ファイルのタイムスタンプ付き .bak コピーが作成されます。

  3. Claude を再起動します。新しいチャットで Backdraw を利用できます。

その他の MCP クライアントから

setup は Codex、Cursor、VS Code、Gemini CLI にも Backdraw を追加します:確認画面でそれらを選ぶか、npx backdraw@latest setup --clients=codex,cursor,vscode,gemini を実行してください。コマンドには node.exe のフルパスが書き込まれるため、PATH が認識されないクライアントでも見つけられます。その後、クライアントを再起動するか、新しいセッションを開始してください。

VS Code と Gemini CLI の設定ファイルではコメントを使用できます。そのようなファイルを書き換えるとコメントが失われるため、セットアップではコメントを含むファイルをそのまま残し、その旨を通知します。その後、エントリを手動で追加してください。

Backdraw は通常の stdio MCP サーバーです:node %USERPROFILE%\.backdraw\mcp-server.js。手動で追加する場合は、以下の例を使用してください。設定ファイルでは、C:/Users/you をホームフォルダーに置き換えてください(cmd で echo %USERPROFILE% を実行すると表示されます)。Windows ではスラッシュを使用でき、JSON 内でエスケープする必要はありません。以下の ~ はホームフォルダーを表します。PowerShell コマンドではパスが自動的に補完されます。

Codex(CLI、IDE 拡張機能、アプリで ~\.codex\config.toml を共有します; ドキュメント)。PowerShell から:

codex mcp add backdraw -- node "$env:USERPROFILE\.backdraw\mcp-server.js"

または config.toml に次を記述します:

[mcp_servers.backdraw]
command = "node"
args = ["C:/Users/you/.backdraw/mcp-server.js"]

Cursor(すべてのプロジェクト用の ~\.cursor\mcp.json、またはプロジェクト内の .cursor\mcp.json; ドキュメント)。Cursor が ${userHome} を自動的に補完します:

{
  "mcpServers": {
    "backdraw": {
      "type": "stdio",
      "command": "node",
      "args": ["${userHome}/.backdraw/mcp-server.js"]
    }
  }
}

VS Code(GitHub Copilot エージェントモード:各ワークスペースで MCP: Open User Configuration を実行するか、1 つのワークスペース内に .vscode\mcp.json を作成します; ドキュメント)。 ここではキーは servers で、type は必須です:

{
  "servers": {
    "backdraw": {
      "type": "stdio",
      "command": "node",
      "args": ["C:/Users/you/.backdraw/mcp-server.js"]
    }
  }
}

Gemini CLI(~\.gemini\settings.json; ドキュメント)。-s user を指定すると、すべてのプロジェクトに追加されます(デフォルトでは現在のプロジェクトのみ)。PowerShell から:

gemini mcp add -s user backdraw node "$env:USERPROFILE\.backdraw\mcp-server.js"

または settings.json に次を記述します:

{
  "mcpServers": {
    "backdraw": {
      "command": "node",
      "args": ["C:/Users/you/.backdraw/mcp-server.js"]
    }
  }
}

プロンプトの例

指示Claude が generate_image に渡す内容
ChatGPT で画像を生成してください:雨の降る窓辺にある、居心地のよい読書スペース。ランプの温かな光。詳細な prompt
ChatGPT でブログ用の 16:9 バナーを作ってください:「Night Shift Notes」というタイトルで、夕暮れのネオン輝く街。aspect_ratio: "16:9"
ChatGPT を使って、背景を透明にした、笑顔のサボテンのステッカーを作ってください。transparent_background: true
ChatGPT で C:\path\to\photo.png を編集してください。空を夕焼けにして、ほかはすべてそのままにしてください。reference_images: ["C:\\path\\to\\photo.png"]
「Cats」コレクションを参照して、ChatGPT でポスターを作ってください。reference_collection: "Cats"

画像を編集するには、Backdraw が PC 上のファイルとして画像を扱える必要があります。Claude が reference_images に渡せるよう、ファイルのフルパスを入力または貼り付けてください。以前の呼び出しで保存されたファイルは、そのまま使えます。画像を添付した新しいチャットで編集するのが最も確実です。

*「ChatGPT の画像生成ジョブの状況は?」や「キャンセルして。」*と尋ねることもできます。

参照コレクション

ウェブから画像を集めて、参照画像として使います。

  1. ウェブページ上の画像を右クリックし、Add to Backdraw → コレクションを選択するか、New collection… を選びます(小さなウィンドウが開き、名前の入力を求められます)。
  2. ページ上に「Added to Cats · 5 images」のような短いメッセージが表示されます。Chrome の制限により拡張機能が何も表示できないページでは、代わりにツールバーアイコンが ✓(エラー時は赤い !)で点滅します。
  3. コレクション名を指定して、Claude に使用を依頼します。

各コレクションは Pictures\Backdraw\References\<collection>\ フォルダーです。画像(Backdraw が 001_<name>.png などの名前を付けます)、各画像のソースページと日付を記録した collection.json、および thumbs\ フォルダーが含まれます。同じ画像をコレクションに 2 回追加しても、コピーは 1 つだけ保持されます。PNG、JPEG、WebP、GIF はそのまま保存されます。AVIF、BMP、SVG など、Chrome で表示できるその他の形式は PNG として保存されます。画像ファイルを手動で削除すると、その画像はコレクションから除外されます。

ポップアップの Collections セクションには、コレクションが一覧表示されます。コレクションを開くと、サムネイルの表示、画像の削除、コレクションの名前変更や削除ができます。

上限
メッセージあたりの参照画像数16(reference_images とコレクションの画像の合計。テストでは ChatGPT は 16 枚を受け付けました)
参照画像 1 枚あたり20 MB
メッセージ 1 件あたりの参照画像の合計80 MB
コレクション画像 1 枚あたり25 MB(20 MB を超える画像もコレクションには保持されますが、リクエストからは除外され、その旨が表示されます。また、reference_files で指定するとメッセージが表示され、リクエストは失敗します)

リクエストでは、空き枠に収まる範囲でコレクションの新しい画像が使われます。特定の画像を使うには、画像名を指定してください。Claude は list_collections から取得したファイル名を reference_files に渡します。

サイズと透明度

aspect_ratio

整数の W:H で指定します。範囲は 1:4 から 4:1 までです。1:1、3:2、2:3、4:5、16:9、9:16、5:2(Discord バナー)、3:1、4:1 などを指定できます。1920:1080 は 16:9 に縮小されます。1.5:1 ではなく 3:2 と記述してください。いくつかの名前も使えます。square、landscape(3:2)、portrait(2:3)、wide(16:9)、tall(9:16)、discord-banner(5:2)です。

  • 1:3 から 3:1: ChatGPT が指定された形状で直接描画します。サイズは約 1.57 メガピクセルです。2026 年 10 月に確認したサイズは、1254×1254(1:1)、1536×1024(3:2)、1672×941(16:9)、1983×793(5:2)です。
  • 最大 4:1/1:4: ChatGPT に 3:1(または 1:3)で描画するよう指示し、トリミング後も残る帯の中に被写体、顔、テキストを収めるよう伝えます。その後、Backdraw が中央からトリミングします。
  • 指定した比率から 1% を超えて外れている画像は、中央からトリミングされます。トリミングした画像がメインファイル(<name>.png)となり、ChatGPT の元画像はその隣に <name>_full.<ext> として残ります。output_dir にコピーされるのはメインファイルのみです。
  • ChatGPT が別の形状で描画し、予定より大きくトリミングする必要があった場合、被写体やテキストが切れていないか確認するよう警告が表示されます。
transparent_background

transparent_background: true を指定すると、ChatGPT に被写体だけが表示されたアルファチャンネル付き PNG をリクエストします。ChatGPT が常にそのとおりに出力するとは限らないため、Backdraw は保存された画像を確認します。PNG ヘッダー(アルファチャンネルまたは tRNS チャンク)を読み取り、透過ピクセルの割合を測定します。結果は次のいずれかになります。

Transparent background: yes — PNG with an alpha channel, 61% of the pixels are transparent.

または、⚠ TRANSPARENT BACKGROUND MISSING で始まります(アルファチャンネルがない、またはピクセルの 2% 以下しか透過していない場合)。その場合は、新しいチャットで一度再試行するか、別のツールで背景を削除してください。透過画像のプレビューはチェッカーボード上に表示されます。

ギャラリーのサイドパネル

ポップアップの ギャラリーを開く をクリックすると、現在表示しているページの横に Backdraw のサイドパネルが開きます。Backdraw のツールバーアイコンを右クリックして、Backdraw ギャラリーを開く を選ぶこともできます。

  • 上部: 進行中のジョブ(ステップ、ジョブ ID、経過時間。ホバーすると ChatGPT のメッセージを表示)、"アイドル"、または未接続の通知が表示されます。
  • ギャラリー: 生成した画像が新しい順に表示されます。一度に 12 件ずつ表示され、さらに読み込む で追加できます。各画像にはサムネイル、日付、プロンプト(ホバーすると先頭 300 文字を表示)、サイズ、および指定されている場合はアスペクト比が表示されます。
  • 画像ごとの操作: チャットを開く、フォルダーに表示(エクスプローラーでファイルを選択した状態で開く)、パスをコピー、コレクションに追加(既存のコレクションまたは 新しいコレクション…)。

ギャラリーにはジョブ履歴の画像が表示され、履歴には直近の 100 件のジョブが保存されます。サムネイルはプレビューから生成され、プレビューは 7 日間保存されます。それより古い画像にはプレースホルダーが表示されます。画像ファイル自体は画像フォルダーに保存されたままです。

ツールリファレンス

ツールパラメーター(デフォルト)機能
generate_imageprompt(必須)、aspect_ratio、transparent_background(false)、reference_images、reference_collection、reference_files、conversation_url、auto_reattach(false)、send_as_is(false)、output_dir、wait_seconds(45)、include_preview(true)Project で新しいチャットを開始(または conversation_url のチャットを続行)し、画像を生成または編集します。
job_statusjob_id、wait_seconds(45)、include_preview(true)ジョブの完了を待ち、状態を報告します。job_id がない場合は、ブリッジの状態(Chrome の接続状態、選択中の Project、画像フォルダー、キュー、最近のジョブ)を報告します。
cancel_jobjob_id(必須)キュー内または実行中のジョブをキャンセルします。ChatGPT がすでに生成中の場合は、バックグラウンドタブで「停止」をクリックします。
fetch_imagesconversation_url(必須)、aspect_ratio、output_dir、wait_seconds(45)、include_preview(true)既存のチャットで、メッセージを送信せずに最新の回答の画像をダウンロードします。
list_projects–ChatGPT の Project を一覧表示し、選択中のものを示します。
select_projectname または url新しい画像チャットで使用する Project を選択して記憶します(名前は大まかに照合されます)。
list_collections–参照コレクションを、画像数、フォルダー、ファイルとともに一覧表示します(新しいものから順)。
  • reference_images:ローカルの png / jpg / webp / gif ファイルを最大 16 個指定できます。残りの枠はコレクションの画像で埋められます。
  • reference_files:list_collections のファイル名を指定し、reference_collection の画像のうち、指定したものだけを添付します。
  • conversation_url:https://chatgpt.com/ のチャットリンクです。簡単な追加指示には適していますが、正確な編集には reference_images を使った新しいチャットのほうが効果的です。
  • auto_reattach:ChatGPT が画像を確認できないと伝えて再送を求めた場合、自動的に画像を添付し、もう一度依頼します。
  • send_as_is:Backdraw が追加する短い指示(例:ChatGPT の質問への回答)を付けず、プロンプトを一字一句そのまま送信します。
  • output_dir:結果をこのフォルダーにもコピーします。画像フォルダーには常にコピーが保存されます。
  • wait_seconds:0~900。

結果の表示内容:

結果意味
SUCCESS保存したファイルのパス、チャットリンク、プレビューが表示されます。編集の場合は 編集チェック の行も追加されます。
STILL RUNNING / QUEUEDまだ完了していません。Claude はジョブ ID を指定して job_status を呼び出し続けます。
NEEDS USER ACTIONChatGPT にログインまたは本人確認のページが表示されています(トラブルシューティングを参照)。
NEEDS REFERENCE IMAGEChatGPT が編集対象の画像を取得できませんでした。結果には、そのチャットからすでに保存された画像が一覧表示されます。
CHATGPT REPLIED WITHOUT AN IMAGEChatGPT がテキストで回答しました(質問、拒否、上限)。回答のうち最大 3,000 文字が含まれます。
FAILED / CANCELLED理由と、存在する場合はチャットリンクが表示されます。

すばやい応答

通常、画像の生成には 1~3 分かかりますが、generate_image、fetch_images、job_status はデフォルト(wait_seconds)で 45 秒以内に戻ります。画像がまだ準備できていない場合は、ジョブ ID とともに STILL RUNNING またはキュー内の位置を示す QUEUED が返され、ジョブが完了するまで Claude が再度 job_status(job_id, wait_seconds=45) を呼び出します。

クラウドから PC に接続するクライアントは、ツール呼び出しを 60 秒後に中断することがよくあります。デフォルトの 45 秒なら、この制限内に収まります。クライアントから進行状況を求められると、Backdraw は待機中に進行状況の通知を送信します。クライアントでツール呼び出しをキャンセルすると待機だけが停止し、cancel_job で停止するまでジョブは実行され続けます。

CLI

セットアップとトラブルシューティングを行うには、Backdraw フォルダー(%USERPROFILE%\.backdraw、またはインストール元のフォルダー)で以下を実行します。どこからでも npx backdraw <command> で同じコマンドを実行できます。例:npx backdraw status。npm run status は node cli.js status と同じです。backdraw mcp は stdio 上で MCP サーバー自体を実行します。MCP クライアントはこれを起動します。

node cli.js status                          Bridge status (Chrome connected, selected project, queue)
node cli.js projects                        List ChatGPT projects
node cli.js select <name | link>            Select the project where images are generated
node cli.js generate "<prompt>" [--ref IMAGE]... [--url CHAT_LINK] [--aspect W:H] [--transparent]
                     [--reattach] [--out FOLDER] [--raw] [--wait 300] [--collection NAME [--file FILE]...]
                                            Generate an image (--ref: a reference or the image to edit, up to 16)
node cli.js collect <chat link> [--aspect W:H] [--out FOLDER]
                                            Download the latest images of an existing chat (sends nothing)
node cli.js job <id> [--wait 60]            Show a job's status
node cli.js cancel <id>                     Cancel a job
node cli.js collections                     List the reference collections
node cli.js collection <name>               Show one collection and its images
node cli.js outdir <folder>                 Change the central images folder
node cli.js debug on|off                    Verbose logging (logs\host.log)
node cli.js diagnose [link] [--selector CSS] [--max N] [--worker]
                                            Page diagnostics
node cli.js reload                          Reload the Chrome extension

例:

node cli.js generate "a lighthouse at dawn, watercolor" --aspect 16:9
node cli.js generate "close only the eyes" --ref C:\path\to\portrait.png
node cli.js collect https://chatgpt.com/c/<chat id> --aspect 16:9

Doctor

npx backdraw@latest doctor          checks everything, changes nothing
npx backdraw@latest doctor --fix    repairs what is safe to repair, then checks again

doctor はチェックごとに1行を出力します。✓(問題なし)、⚠(確認が必要)、✗(問題あり)のいずれかと、1行の修正方法が表示されます。

  • Node.js のバージョン、インストールフォルダー、ファイル、拡張機能、これらのバージョンが一致しているかを確認します。
  • ホストマニフェストと、インストールされている各ブラウザーが実際に読み込むレジストリエントリーを確認します(Claude デスクトップアプリの MSIX サンドボックス内からも確認します)。
  • ユーザーごとのネイティブホストを無効にする(NativeMessagingUserLevelHosts)またはブロックする(NativeMessagingBlocklist)ブラウザーポリシーを確認します。これらを変更できるのは管理者だけです。
  • ブリッジ(名前付きパイプ)、拡張機能とそのバージョン、拡張機能が最後に確認した ChatGPT のサインイン状態、Project が選択されているかどうかを確認します。
  • すべての MCP クライアントにある Backdraw のエントリーを確認します。エントリーが存在し、このインストール先を参照しているかを確認します。また、Claude デスクトップアプリが実行中かどうかも表示します。

--fix はホストマニフェストとレジストリエントリーを書き換え、クライアントのエントリーがこのインストール先を参照するように修正します(バックアップを作成します。Claude デスクトップアプリについては、アプリが終了している場合に限ります)。修正できなかった項目も表示されます。出力は安全に issue に貼り付けられます。ホームフォルダーは ~ と表示され、プロジェクト名、プロンプト、チャットリンクは表示されません。

トラブルシューティング

問題対処方法
何か問題がある場合まず npx backdraw@latest doctor を実行してください。
BRIDGE NOT RUNNINGChrome が終了しているか、拡張機能が読み込まれていないか、オフになっています。Chrome を開く(拡張機能は自動的に接続します)か、chrome://extensions で Backdraw をオンにしてください。node cli.js status で確認できます。
Backdraw アイコンに赤い ! が表示される拡張機能がローカルホストに接続できません。ポップアップにエラーと修正方法が表示されます。npx backdraw@latest doctor --fix(または node install.js)を再実行してから、chrome://extensions で Backdraw を再読み込みしてください。
NEEDS USER ACTIONChatGPT にログイン画面または人間による認証(CAPTCHA)が表示されています。Chrome で ChatGPT のタブを開き、自分で完了してください。Backdraw がこれを回避しようとすることはありません。ジョブは最大10分間、操作を待ちます。完了すると自動的に続行します。10分経過すると失敗し、ChatGPT のタブは開いたままになります。
⚠ EDIT CHECK (edited: false)ChatGPT が編集ではなく新しい画像を生成しました(実際に編集された場合、画像の約95〜100%が維持されます)。reference_images に元の画像を指定し、conversation_url は指定せずに、つまり新しいチャットで再度依頼してください。
NEEDS REFERENCE IMAGE長いチャットで ChatGPT が画像を見失いました。reference_images を使って画像を添付する(新しいチャットでの実行を推奨)か、auto_reattach を使用してください。
FAILED — ChatGPT did not finish in timeジョブは約10分後に中断されます。結果にチャットリンクが含まれている場合、ChatGPT の処理完了後に fetch_images(または node cli.js collect <link>)を実行すると画像をダウンロードできます。同じ方法でトリミングするには、同じ aspect_ratio を指定してください。
No ChatGPT project is selected yetポップアップで Project を選択するか、Claude に Projects の一覧表示と選択を依頼してください。
ChatGPT did not open the projectProject が削除または名前変更されています。もう一度選択してください。
Chrome プロファイルが2つあるローカルブリッジは Windows ユーザーごとに1つなので、Backdraw は1つの Chrome プロファイルだけで読み込んでください。

詳細なログを確認するには、node cli.js debug on を実行し、%USERPROFILE%\.backdraw\logs\host.log を確認してください(無効にするには node cli.js debug off を実行します)。

ChatGPT のウェブ UI が変更された場合

Backdraw は chatgpt.com のウェブページを操作するため、デザイン変更によって動作しなくなる場合があります(たとえば、メッセージボックスを見つけられなくなることがあります)。

  1. node cli.js diagnose(または node cli.js diagnose <chat link>)を実行してください。Backdraw が認識しているページ構造の概要が出力されます。--selector CSS と --max N を指定すると対象を絞り込めます。--worker を指定すると、実行中のジョブのタブを調べます。
  2. セレクターは extension/inpage.js にあります。
  3. 修正後、もう一度 node install.js を実行してください。ファイルがコピーされ、実行中の拡張機能が再読み込みされます。
  4. 変更内容を添えて、issue を作成してください。その前に、diagnose の出力から個人情報(チャットのタイトル、プロジェクト名、プロンプト)を削除してください。

更新

npx backdraw@latest setup

手動インストールの場合:git pull(または ZIP を再ダウンロード)してから、node install.js を実行します。

どちらの方法でも、新しいファイルを古いファイルに上書きし、設定、ジョブ履歴、コレクションを保持したまま、すべてを再登録して実行中の拡張機能を再読み込みします。Chrome を終了していた場合は、起動時に新しいバージョンが読み込まれます。

「ChatGPT image bridge」(1.x)から移行しますか? セットアップ(または node install.js)で移行されます。%USERPROFILE%\.claude\chatgpt-image-bridge から設定とジョブ履歴をコピーし(既存のファイルは上書きしません)、古いネイティブホストと古い chatgpt-images MCP エントリを削除します。その後、chrome://extensions で古い「Claude ChatGPT Görsel Köprüsü」拡張機能を削除し、代わりに %USERPROFILE%\.backdraw\extension を読み込みます。拡張機能 ID は変わりません。Backdraw が正常に動作したら、古いフォルダーを手動で削除してください。

アンインストール

npx backdraw@latest uninstall --dry-run     shows what would be removed, changes nothing
npx backdraw@latest uninstall

(手動インストールの場合:node install.js --uninstall [--dry-run]。)すべてのブラウザーのネイティブホスト登録と、Claude Code、Codex、Cursor、VS Code、Gemini CLI の backdraw MCP エントリを削除します。また、Claude を終了した状態で、デスクトップアプリの設定からも削除します(それぞれバックアップが作成されます)。さらに、1.x で使用されていた名前も削除します。その後、chrome://extensions で拡張機能を削除してください。

ファイルは次の 2 か所に保持されます。

  • %USERPROFILE%\.backdraw:プログラム、設定、ジョブ履歴(プロンプトを含む)、プレビュー、ログ。
  • 既定では Pictures\Backdraw の画像フォルダー:生成した画像と、References 内の参照コレクション。ドライランでは実際に使用されているフォルダーが一覧表示されます。また、アンインストール前に node cli.js status を実行した場合も同様です。

削除したい場合は、これらのフォルダーを手動で削除してください。1.x から移行した場合は、%USERPROFILE%\.claude\chatgpt-image-bridge も削除してください。

プライバシーとセキュリティ

  • すべての処理はお使いの PC 上で実行されます。Backdraw のサーバー、テレメトリー、API キーは必要ありません。
  • Backdraw が Cookie、トークン、パスワードを読み取ることはなく、ログインや CAPTCHA を自動化することもありません。ログインなどはご自身で行ってください。
  • ローカルブリッジはネットワークポートではなく名前付きパイプを使用し、ネイティブホストが受け付けるのは Backdraw 拡張機能からの通信だけです。
  • プロンプト、ジョブ履歴、プレビュー、ログは %USERPROFILE%\.backdraw(data\ と logs\)に保存されます。
  • reference_images は、名前が .png、.jpg、.jpeg、.webp、.gif のいずれかで終わるローカルファイルを ChatGPT のメッセージに添付できます。信頼できないコンテンツを Claude が扱う場合は、Backdraw のツール呼び出しを確認してください。

詳細、脅威モデル、脆弱性の報告方法については、SECURITY.md をご覧ください。

MCP プロトコルのサポート

  • 2026-07-28(ステートレス):ハンドシェイクはありません。各リクエストで _meta にバージョンを指定します。server/discover をサポートしています。
  • レガシーの initialize ハンドシェイク: 2025-11-25、2025-06-18、2025-03-26、2024-11-05。
  • ツールのタイトルと注釈、進行状況の通知、notifications/cancelled、JSON-RPC バッチに対応しています。サポートされていないバージョンの場合は、サポート対象の一覧とともにエラー -32022 が返されます。

免責事項と責任ある利用

  • 個人利用、ご自身のアカウント。 Backdraw は、ご自身の Chrome でご自身の ChatGPT アカウントを使って画像を生成する個人向けに作られています。アカウントを共有したり、サービスとして他の人のために画像を生成したり、製品のバックエンドとして利用したりしないでください。
  • OpenAI の利用規約。 OpenAI の利用規約では、「データまたは出力を自動的に、あるいはプログラムを使用して抽出する」ことや、レート制限や保護措置を回避することが禁止されています。Backdraw は ChatGPT のウェブページを操作するため、利用するとこれらの規約に抵触する可能性があります。規約を読み、ご自身で判断してください。
  • アカウントに関するリスクはご自身で負うものとします。 OpenAI は、規約違反と判断したアカウントを制限、停止、または閉鎖する場合があります。Backdraw はいかなる保証もなく提供されており(MIT ライセンス)、アカウントに起きたことについて作者は責任を負いません。
  • 一度に一件ずつ、人間のペースで実行します。 キューは一つだけです。バックグラウンドタブで一つのプロンプトを処理し、画像の保存後にのみ次のジョブを開始します。Backdraw は並行してチャットを開かず、独自にプロンプトを再送信することもなく(auto_reattach の再質問を一度行う場合を除きます)、ログイン画面や人間による確認画面が表示された場合は、ご自身で完了するまで処理を停止します。
  • 通常の利用制限が適用されます。 画像を生成するたびに、ご自身の ChatGPT の利用制限に加算されます。
  • OpenAI または Anthropic との提携、承認、後援関係はありません。

ライセンス

MIT

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。