Web Asset Studio

Generate consistent sticker packs, pixel-art sprites, animation sheets and web icons with your own ChatGPT web account, then cut, clean and pack them automatically. An MCP server plus an agent skill. No OpenAI API key, no paid image API.

▶ Watch the 24-second promo · Bahasa Indonesia

Why

The OpenAI image API is paid per image. Students and hobbyists often already have a ChatGPT account and can generate images in the web app, but one prompt gives one image with one expression, and a second prompt drifts: different face, different style, a fake "transparent" checkerboard background, pixel art that is not on a grid.

Web Asset Studio fixes the part around the generation:

Related MCP server: aseprite-mcp

How it works

Two halves, plus a skill that tells the agent how to use them:

photo ──► add_reference ──► project_create (style bible) ──► build_prompt
                                                               │
        browser MCP drives chatgpt.com in your logged-in Chrome ◄┘
        (attach files, type prompt, wait, download)
                                                               │
 ingest ──► agent checks the preview ──► slice_grid ──► process ──► build_spritesheet
                                                       │
                              raw/  frames/  processed/  sheets/   project.json

• Browser MCP (Claude in Chrome or @agent360/browser-mcp) operates chatgpt.com in the Chrome profile where you are already signed in.

• web-asset-studio MCP server (this repo) does everything deterministic: folders, manifest, prompt composition, ingesting downloads, background removal, pixelation, outlines, slicing, packing. Pure JavaScript, no native dependencies, bundled to one file.

• asset-studio skill is the procedure for the agent: lock the character, generate in grids, QA every result, regenerate what drifts. Clients without skills can read the same text from the MCP prompt asset_studio_workflow.

Read this first

• Terms of use. OpenAI's terms restrict automatic extraction of output from the service. Automating chatgpt.com with your account is a gray area and the risk (rate limits, account restrictions) is yours. The workflow is deliberately slow: one image at a time, it stops at usage limits, and it never works around login or CAPTCHA (it hands those to you).

• Limits. Free accounts have a small daily image quota; a 3x3 grid gives nine assets for one image.

• Privacy. Any photo you attach is uploaded to ChatGPT. The agent is instructed to ask you first.

• ChatGPT's UI changes. The selectors in skills/asset-studio/references/chatgpt-web.md are hints; the agent is told to discover elements on the live page. That page was verified against a real account in October 2026, but expect drift.

• Video (Sora) is only partly covered: ingest and video_to_frames (needs ffmpeg) exist, the browser flow is untested.

Install

Requirements: Node.js 18.17+, Chrome signed in to chatgpt.com, and one browser MCP.

1. A browser MCP (pick one)

• Claude in Chrome: install the extension and connect it to Claude.

• Agent360 Browser MCP:

  claude mcp add --scope user browser-mcp -- npx @agent360/browser-mcp@latest

  then install its Chrome extension. To upload reference photos, enable Allow access to file URLs for the extension in chrome://extensions.

2a. Claude Code (plugin: server + skill)

claude plugin marketplace add EgiStr/web-asset-studio

claude plugin install web-asset-studio@web-asset-studio

Restart Claude Code. The server is prebuilt in dist/server.mjs, so there is nothing to compile.

2b. Any other MCP client (Claude Desktop, Cursor, VS Code, Codex, Windsurf)

{
  "mcpServers": {
    "web-asset-studio": {
      "command": "node",
      "args": ["/path/to/web-asset-studio/dist/server.mjs"],
      "env": { "ASSET_STUDIO_ROOT": "/path/to/your/project/asset-studio" }
    }
  }
}

Environment variables

In Chrome, turn off Ask where to save each file before downloading and allow multiple downloads when asked.

Use it

Tell your agent, for example:

Use asset-studio. Here is my photo ~/photos/me.jpg. Make 18 chibi sticker expressions with transparent backgrounds, a white outline, 512 px.

Make a 48 px pixel-art character from this photo, then a 4-frame idle and an 8-frame walk cycle facing right, packed as a sprite sheet for Phaser.

Make 16 pixel icons, 32 px, for a farming web game: coin, seed bag, watering can, hoe, and so on, all sharing one palette.

Output lives in asset-studio/<project>/:

project.json   style bible, palette, anchor, every asset with its prompt and chat URL
refs/          reference photos
raw/           ChatGPT downloads, untouched
frames/        cells cut from grid sheets or video
processed/     final transparent PNGs, uniform size
sheets/        sprite sheet .png + atlas .json + preview .gif
video/         downloaded videos

MCP tools

Recipes for stickers, pixel stickers, sprite animation, emotes, web icons, phone wallpapers and fixes for common problems are in skills/asset-studio/references/recipes.md.

Development

npm install
npm test      # builds dist/server.mjs first, then runs 18 tests
npm run build

The tests cover image processing on synthetic images (fake checkerboard, off-grid pixel art, a subject cropped at the edge, aligned animation frames), the full pipeline from a fake Downloads folder, and the bundled server started without node_modules through a real MCP client. dist/server.mjs is committed because the plugin runs it directly: rebuild and commit it after changing src/.

src/        image.mjs (pixels), workspace.mjs (projects), prompts.mjs, server.mjs (MCP)
skills/     the asset-studio skill and its references
test/       node:test suites
docs/       promo.mp4

Contributions are welcome, especially: updates to the ChatGPT page hints when the UI changes, an objects-only mode for build_prompt (it currently always injects the character bible), and a tested Sora/video flow.

License

MIT