Backdraw MCP server

---

What it does

Backdraw is a local MCP server plus a Chrome extension. Ask Claude for an image "with ChatGPT" and Backdraw opens ChatGPT in a background tab of your own Chrome, where you are already signed in. It sends the prompt, waits for the picture and saves it on your PC. Claude gets the file path, a preview and the link to the chat.

• Generate new images, or edit one by attaching it as a reference.
• Ask for a shape (16:9, a 4:1 banner, …) or a transparent background.
• Save reference images from any website with a right-click and reuse them as collections.
• Browse everything you made in a gallery side panel.
• Pure Node.js with zero npm dependencies. Everything runs on your computer.

Personal use, with your own ChatGPT account and at your own risk. Automating the ChatGPT web page may conflict with OpenAI's terms; read Disclaimer and responsible use before you start.

Why Backdraw?

• Your everyday Chrome. No separate browser profile, no second login, no automation browser: Backdraw works in the Chrome you already use, where you are signed in to ChatGPT.
• Out of your way. The work happens in a muted background tab that never takes focus, so you keep working while the image is made.
• No open ports. The pieces talk over Chrome native messaging and a named pipe that only your Windows user can open. There is no DevTools port (such as 9222) and no local web server.
• No API key. It uses your ChatGPT plan; each image counts toward your normal ChatGPT limits.
• References from the web. Right-click images on any site to collect them, then generate in their style.
• A gallery of everything you made, in Chrome's side panel.
• One command to set up: npx backdraw@latest setup. Loading the extension is the only step left to you.

How it compares

Other open-source projects take different approaches, and several of them do things Backdraw doesn't (macOS or Linux support, an API mode, running on a server). Each row was checked against the project's README and source on 2026-10-25; ? means we couldn't tell. Spotted a mistake? Please open an issue.

Project	Uses your everyday Chrome (no separate profile or login)	Background tab (doesn't take focus)	Open port	API key needed	Right-click reference collections	Gallery	Platforms
Backdraw	Yes	Yes	No (native messaging + named pipe)	No	Yes	Yes	Windows
lownamlee/gpt-image-2-mcp	No (own browser profile)	Partly¹	No	Optional (API mode)	No	No	?
nothariharan/image-gen	No (own Edge profile)	No	Yes (CDP 9222)	No	No	No	Windows; macOS/Linux by hand
goofyshwetank/mcp-chatgpt-gemini-image	No (own Chromium profile)	No	No	No	No	No	?
Dasemu/chatgpt-imagegen-mcp	No (own profile, on a server)	Partly²	Yes (HTTP 8088, remote server)	No (own server token)	No	No	Linux server
Codex built-in $imagegen	– (no browser)	–	No	No (Codex sign-in)	No	?	?
Sateezg/codex-bridge	– (no browser, runs Codex)	–	No	No (Codex sign-in)	No	No	macOS, Linux

¹ Its own browser window, moved off screen or minimized once ChatGPT is ready. ² A browser on a virtual display (Xvfb) on the server, or headless.

Codex users already have built-in image generation; Backdraw is mainly for Claude Code, the Claude desktop app and VS Code.

How it works

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 is what Claude talks to. It forwards every tool call to host.js.
• host.js is started by Chrome when the extension connects. It runs the job queue (one job at a time), saves the images and keeps the job history in %USERPROFILE%\.backdraw\data.
• The extension opens chatgpt.com in a background tab, inside the ChatGPT Project you selected. The tab is never activated and is muted, no window takes focus, and your mouse and keyboard are never used: only synthetic events inside that one tab. The tab closes when the job is done, unless you are looking at it.
• No API key. Backdraw uses the ChatGPT session you already have in Chrome. It never reads cookies, tokens or passwords.
• Nothing leaves your PC except what you send to ChatGPT (the prompt and any reference images). There is no Backdraw server and no telemetry.

Images are saved in your Pictures folder under Backdraw, named after the time and the prompt, e.g. 20261021-153012_a-cozy-reading-nook.png.

Requirements

OS	Windows 10 or 11
Browser	Google Chrome 116 or newer (Edge, Brave and Chromium are registered too, but only Chrome is tested)
Runtime	Node.js 20 or newer
Account	A ChatGPT account that can generate images, signed in to chatgpt.com in Chrome
Client	Claude Code, the Claude desktop app, Codex, Cursor, VS Code or Gemini CLI (or another MCP client that runs stdio servers)

Windows only for now — the code is split into a platform module and macOS/Linux contributions are welcome. Everything OS-specific (named pipe, native host registration, user folders) lives in platform/win32.js.

Installation

Quick install

Run this in PowerShell or cmd (no admin rights needed):

npx backdraw@latest setup

It runs the backdraw package from npm.

setup does everything except one click in the browser:

1. It copies Backdraw to %USERPROFILE%\.backdraw (npx's own copy is temporary) and sets up the images folder Pictures\Backdraw (reference collections go to Pictures\Backdraw\References). Running it again updates Backdraw and keeps your settings, job history and collections.

2. It registers the native messaging host for your Windows user, for each browser it finds (Chrome, Edge, Brave, Chromium).

3. It lists the MCP clients it finds (Claude Code, the Claude desktop app, Codex, Cursor, VS Code, Gemini CLI) and asks which ones to add Backdraw to. Only the backdraw entry is added or updated, and every config file gets a timestamped .bak copy before it changes. --yes takes every client it found; --clients=claude-code,cursor takes exactly those.

4. It opens the extension folder and your browser's extensions page, copies the folder path to the clipboard, and waits for you to load the extension, the one step left to you:

   1. turn on Developer mode (top right),
   2. click Load unpacked,
   3. pick the folder (paste the path with Ctrl+V).

   As soon as the extension connects, setup prints ✓ Ready and an example prompt.

The native host is still named io.github.muhammedtalha04.backdraw, after the project's old GitHub user name: renaming it would break existing installs.

Install from your client

Your MCP client can also add Backdraw itself; it then starts the server with npx backdraw@latest mcp. The browser side still needs a one-time setup on the PC, which leaves the clients alone:

npx backdraw@latest setup --clients=none

Client	Add Backdraw
Claude Code	/plugin install backdraw --marketplace devtalh/backdraw (Claude Code 2.1.275 or later; or /plugin marketplace add devtalh/backdraw, then /plugin install backdraw@backdraw). /backdraw:setup explains the browser step.
Cursor
VS Code
Codex	codex mcp add backdraw -- cmd /c npx -y backdraw@latest mcp
Gemini CLI	npx backdraw@latest setup --clients=gemini

On Windows the command goes through cmd /c, because clients start npx without a shell. Use one way per client: if setup already added Backdraw to Claude Code, the plugin would start a second server with the same tools.

Manual install

1. Get the code. Clone the repository with git, or download it as a ZIP (Code → Download ZIP) and unzip it:

   git clone https://github.com/devtalh/backdraw.git
   cd backdraw
   

2. Run the installer in that folder (no admin rights needed):

   node install.js
   

   It does steps 1 and 2 above and adds Backdraw to Claude Code (user scope). For the other clients, run node bin/backdraw.js setup instead, or see Use it.

3. Load the extension once: open chrome://extensions, turn on Developer mode, click Load unpacked and select %USERPROFILE%\.backdraw\extension.

Finish in the popup

1. Open the popup. Click the Backdraw icon in the toolbar (pin it from the puzzle-piece menu). Until everything works, the popup shows a setup checklist with the fix for each step:
   1. the bridge is connected,
   2. you are signed in to ChatGPT,
   3. a ChatGPT Project is selected,
   4. ready: an example prompt to copy into Claude.
2. Create and select a ChatGPT Project. In ChatGPT, create a Project for your images (for example "Backdraw"), open it, click the Backdraw icon and press Use the “Backdraw” project. You can also ask Claude: "Select my Backdraw project in ChatGPT for images." Every new image chat is created inside that Project.

The popup also has a language (Auto / English / Türkçe) and a theme (Auto / Light / Dark) setting. If something doesn't work, run npx backdraw@latest doctor.

Use it

From Claude Code

Start a new Claude Code session after installing (MCP servers are loaded when a session starts) and ask in plain words, in any language. The backdraw server gives Claude these tools: generate_image, job_status, cancel_job, fetch_images, list_projects, select_project and list_collections (see Tools reference).

From the Claude desktop app (chat)

The desktop app keeps its own MCP config for chats. Claude rewrites that config when it exits, so Backdraw only changes it while Claude is closed. If setup found Claude running, add Backdraw later:

1. Quit Claude completely, also from the system tray.

2. Run this from PowerShell (not from a Claude session):

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

   (From a manual install: node install.js --desktop in ~\.backdraw.) A timestamped .bak copy of each config file is written before it is changed.

3. Start Claude again. Backdraw is available in new chats.

From other MCP clients

setup adds Backdraw to Codex, Cursor, VS Code and Gemini CLI too: pick them when it asks, or run npx backdraw@latest setup --clients=codex,cursor,vscode,gemini. It writes the full path of node.exe as the command, so a client that doesn't see your PATH still finds it. Restart the client or start a new session afterwards.

VS Code and Gemini CLI allow comments in their config files. Rewriting such a file would drop the comments, so setup leaves a file with comments alone and tells you; add the entry by hand then.

Backdraw is a plain stdio MCP server: node %USERPROFILE%\.backdraw\mcp-server.js. To add it by hand, use the examples below. In the config files, replace C:/Users/you with your home folder (echo %USERPROFILE% in cmd prints it). Forward slashes work on Windows and need no escaping in JSON. ~ below is your home folder. The PowerShell commands fill in the path themselves.

Codex (the CLI, the IDE extension and the app share ~\.codex\config.toml; docs). From PowerShell:

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

or in config.toml:

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

Cursor (~\.cursor\mcp.json for all projects, or .cursor\mcp.json in a project; docs). Cursor fills in ${userHome} itself:

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

VS Code (GitHub Copilot agent mode: run MCP: Open User Configuration for every workspace, or create .vscode\mcp.json in one; docs). Here the key is servers and type is required:

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

Gemini CLI (~\.gemini\settings.json; docs). -s user adds it for all projects (the default is the current project only). From PowerShell:

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

or in settings.json:

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

Example prompts

You say	What Claude passes to generate_image
Generate an image with ChatGPT: a cozy reading nook by a rainy window, warm lamp light.	a detailed prompt
Make a 16:9 banner for my blog with ChatGPT: "Night Shift Notes", neon city at dusk.	aspect_ratio: "16:9"
Use ChatGPT to make a sticker of a happy cactus with a transparent background.	transparent_background: true
Make an animated GIF with ChatGPT: one cat waving a paw, fixed camera, no text.	animated: true
Edit C:\path\to\photo.png with ChatGPT: turn the sky into a sunset, keep everything else.	reference_images: ["C:\\path\\to\\photo.png"]
Use my "Cats" collection as reference and make a poster with ChatGPT.	reference_collection: "Cats"

To edit an image, Backdraw needs it as a file on your PC: give Claude its full path (type or paste it) so Claude can pass it in reference_images. Files saved by earlier calls work directly. A fresh chat with the image attached is the most reliable way to edit.

You can also ask "What's the status of the ChatGPT image job?" or "Cancel it."

Reference collections

Collect images from the web, then use them as references.

1. Right-click an image on any web page → Add to Backdraw → pick a collection, or New collection… (a small window asks for the name).
2. A short note in the page confirms it, e.g. "Added to Cats · 5 images". On pages where Chrome doesn't let extensions show anything, the toolbar icon flashes a ✓ (or a red ! on error) instead.
3. Ask Claude to use the collection by name.

Each collection is a folder Pictures\Backdraw\References\<collection>\ with the images (named by Backdraw: 001_<name>.png, …), a collection.json with the source page and date of each image, and a thumbs\ folder. Adding the same image to a collection twice keeps one copy. PNG, JPEG, WebP and GIF are kept as they are; other formats Chrome can show (such as AVIF, BMP or SVG) are saved as PNG. If you delete an image file by hand, it drops out of the collection.

The popup's Collections section lists your collections. Open one to see its thumbnails, delete images, or rename or delete the collection.

Limit
References per message	16 (reference_images and collection images together; ChatGPT accepted 16 in testing)
One reference	20 MB
All references of one message	80 MB
One collection image	25 MB (an image over 20 MB stays in the collection; requests leave it out and say so, and naming it in reference_files makes the request fail with a message)

A request uses the newest images of the collection that fit in the free slots. To use specific ones, name them: Claude passes their file names (from list_collections) in reference_files.

Sizes and transparency

aspect_ratio

W:H with whole numbers, anywhere from 1:4 to 4:1: 1:1, 3:2, 2:3, 4:5, 16:9, 9:16, 5:2 (Discord banner), 3:1, 4:1, … 1920:1080 is reduced to 16:9; write 3:2, not 1.5:1. A few names work too: square, landscape (3:2), portrait (2:3), wide (16:9), tall (9:16), discord-banner (5:2).

• 1:3 to 3:1: ChatGPT draws these itself, at about 1.57 megapixels in the asked shape. Observed in October 2026: 1254×1254 (1:1), 1536×1024 (3:2), 1672×941 (16:9), 1983×793 (5:2).
• Up to 4:1 / 1:4: ChatGPT is asked for 3:1 (or 1:3) and told to keep subjects, faces and text inside the band that survives the crop; Backdraw then crops it from the centre.
• An image more than 1% off the asked ratio is cropped from the centre. The crop is the main file (<name>.png) and ChatGPT's original stays next to it as <name>_full.<ext>. output_dir copies get the main file only.
• If ChatGPT drew another shape and the crop had to cut more than planned, the result warns you to check for cut-off subjects or text.

transparent_background

transparent_background: true asks ChatGPT for a transparent background showing only the subject (not for animated GIFs, see below); GIF transparency is reported as described in Animated GIFs below. ChatGPT doesn't always deliver, so Backdraw checks the saved image: for PNGs, it reads the PNG header (alpha channel or tRNS chunk) and measures the share of see-through pixels. The result says either

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

or starts with ⚠ TRANSPARENT BACKGROUND MISSING (no alpha channel, or 2% or fewer of the pixels are transparent). Then retry once in a fresh chat or remove the background with another tool. Previews of transparent PNG images are drawn over a checkerboard.

Animated GIFs

animated: true asks ChatGPT for a short animated GIF. If it returns a still image, Backdraw asks once more for an animated GIF; if the result is still a static image, the tool result warns you. For best results, use one subject, one clear motion, a fixed camera and no small text in the scene. Reference upload preparation follows the reference_images behavior under Tools reference. If preparation fails, exceeds 4096 x 4096 pixels or produces a copy over 20 MB, the original is uploaded instead.

GIFs are saved without cropping; aspect_ratio is not applied to them. Every GIF result reports whether its background is transparent or opaque, using the share of transparent pixels measured in the first frame. If measurement fails, the GIF's transparent color flag is reported instead. ChatGPT's animated GIFs do not reliably keep a transparent background. An opaque result warns you if transparent_background: true; with a transparent reference, it only reports this as information. The attached preview shows all frames in a numbered grid (16 evenly spaced frames if there are more than 16), with transparent areas over a checkerboard. If decoding fails, only the first frame is shown. Fetching existing images keeps the first-frame preview. For example, a result line can be:

Animated GIF: 12 frames, 1200 ms per loop, loops forever; the attached preview shows all 12 frames in order, numbered from 1. Check that the subject keeps the same look, size and position from frame to frame.

Motion presets

Pass motion to choose a movement; for example, prompt: "A pixel-art fox", motion: "walk". The prompt describes the subject and style; motion supplies the movement and enables animated even when it is omitted or false. It adds a short request for a consistent character, a centered frame, a still camera and a plain light background. References keep their drawn appearance. Frame counts and timing below are hints; ChatGPT may produce different values. send_as_is: true sends your prompt verbatim, without the preset text.

Motion	Movement	Frame / timing hint
idle	Gentle breathing and one blink	8 frames, 150 ms each
walk	Walk in place, viewed from the side	8 frames, 100 ms each
run	Run in place, viewed from the side	8 frames, 80 ms each
jump	Crouch, jump and land in place	10 frames, 90 ms each
wave	Wave one hand while the body stays still	8 frames, 100 ms each
dance	Step left and right with bounces and swinging arms	10 frames, 100 ms each
bounce	Bounce in place, squashing on landing and stretching upward	8 frames, 90 ms each
wiggle	Lean left and right through the center	8 frames, 100 ms each
spin	Turn a full circle in place	12 frames, 80 ms each

Inspired by ideas from kiki-pixel-gif (MIT) and sprite-gen (Apache-2.0); no code, prompt text or tables were copied.