Image Tools / Docs
Automation

What your assistant can do

A user-friendly tour of the 8 MCP tools — what each one does, when your assistant will reach for it, and example prompts to try.

Once your assistant is connected, it has 8 tools at its disposal. You don't need to memorise them — say what you want and the assistant picks the right ones. This page exists so you understand what's possible and can phrase prompts that land cleanly.

#The eight tools, plain English

#1. Discover what's possible — get_editor_capabilities

The first thing your assistant should call. Returns the live catalog: 22+ canvas presets (Instagram post, YouTube thumbnail, business card, A4, …), 67 Google Fonts, 36 curated icons, 12 blend modes, and 5 worked examples ready to copy-paste.

"What canvas sizes and fonts do you support?" → assistant calls this tool, lists what's available.

#2. Browse starter templates — list_templates

Returns the curated Starter Design Kit — 6 designer-built .img projects. Each one is a real, editable starting point.

TemplateCanvas
YouTube Thumbnail Pro1280×720
Business Card Studio1050×600
Podcast Cover Signal1080×1080
App Launch Story1080×1920
Webinar Flyer Pro1080×1350

"Show me the starter templates." → assistant lists all six with thumbnails and a one-line summary each.

#3. Read a template's bytes — template://starter-kit/<id> resource

Once you've picked a template, your assistant fetches its .img bytes and can either save them locally or feed them into the next tool.

"Open the YouTube thumbnail starter and change the headline to 'How I Built This'." → assistant reads the template, then uses apply_ops (below) to swap the text.

#4. Compile a design (no file output) — compile_intent

Takes a high-level description (canvas + layers + background) and produces the full editor document. Use this when you want to inspect the structure before saving.

"Lay out a blog hero: 1200×627, dark navy background, big white headline, smaller grey subtitle." → assistant compiles the design, returns the structured layers; you can iterate on it before saving.

#5. Save a finished design — render_design

The happy path. Same as compile_intent but produces a downloadable .img file your assistant writes to disk. This is the tool you'll use most.

"Make me a 1080×1080 Instagram post: black background, big bold 'STAY CURIOUS' headline in Anton font, gold subtitle. Save as post.img." → 5 seconds later you have an editable .img.

#6. Edit an existing design — apply_ops

Surgical edits to a design that already exists. Pass an .img (or its document JSON) plus a list of edits — change a text, swap a color, hide a layer, reorder. Atomic: any error rolls back the whole batch.

"In cover.img, change the title text to 'Field Notes Vol. 02' and make the background blue." → assistant calls apply_ops with two edits, saves the new version.

#7. Validate a hand-edited design — validate_document

If you (or another tool) edited a document JSON manually, this tool checks it for problems: dangling resource references, layer ordering gaps, duplicate ids, group cycles. Migrates older .img schema versions to the current one along the way.

"Is this document valid?" → assistant calls validate_document and surfaces any errors/warnings before you save.

#8. Preview the result — create_preview_session + get_preview_instructions

For agents with a browser/screenshot capability: opens a short-lived local preview URL plus stable selectors for Playwright. Lets your assistant see the rendered design before declaring it finished.

"Render the design and show me a screenshot." → assistant creates a preview session, opens it, screenshots the canvas. Useful for self-correction loops.


#Two flows you'll use most

#Design from scratch

You:   Make me a YouTube thumbnail with a dark gradient background,
       headline "Design With AI" in big bold type, and a sparkles icon
       in the top-left corner. Save as `thumb.img`.

Asst:  [calls get_editor_capabilities]   → confirms YT preset (1280×720),
                                          icon `lucide:sparkles` is available
       [composes a DesignIntent]
       [calls render_design]            → returns 6 KB .img bytes
       [writes to disk]
Done.  thumb.img saved (6 KB). Open it in the editor at /tools/image-editor.

#Remix a starter template

You:   Open the podcast cover starter, change the show name to
       "Field Notes" and the host to "Sharif Khan". Save as `ep1.img`.

Asst:  [calls list_templates]            → finds podcast-cover-signal
       [reads template://starter-kit/podcast-cover-signal]
       [calls apply_ops]                 → set_layer_text on two layers,
                                          repackage: true
       [writes to disk]
Done.  ep1.img saved. Two text layers updated; rest of the design
       (mic icon, gradient rings, layout) preserved.

#Prompts that work well

The MCP server returns rich, structured warnings when your assistant makes a mistake (font fallback, off-canvas layer, opacity > 1). You don't need to be precise about colors or pixel positions — the assistant self-corrects from those signals. Be specific about intent, vague about implementation:

"Modern fintech aesthetic. Dark mode. Big bold sans-serif headline. Tasteful purple accent."

"Like a New Yorker cover but for a tech podcast — single hero illustration, magazine masthead, restrained typography."

"Three-up product card grid for an Instagram story. Centered. Each card shows a product name and price."

Less helpful:

"Use #5b21b6 at x:240 y:380 with width:600 height:80." (over-specified — the assistant has to follow your numbers literally even if they're wrong)

"Make it nice." (under-specified — no anchor for taste)


#Where designs go after rendering

Every .img your assistant produces is a real layered design file. To open and refine it:

  1. Go to the editor.
  2. Click Open project (top-left).
  3. Select the .img file your assistant saved.

Every layer — text, shapes, icons, gradients, effects — is editable. Tweak fonts, drag elements, add new layers. Save again as .img, or export to PNG / JPEG / SVG via the editor's Export menu.

For format details (manifest, document JSON, packaging), see The .img format.